Skip to end of metadata
Go to start of metadata

Web's Style At A Glance

ASP.NET v1.x introduced the capability to customize server side components through Style class exposed in many Appearance-category properties. It enables developers to change the style easily with predefined properties available in Style class. The properties include following:

  • BackColor
  • BorderColor
  • BorderStyle
  • BorderWidth
  • CssClass
  • Font
  • ForeColor
  • Height
  • Width

Improved WebStyle

WebUI.NET Framework introduced a more robust WebStyle class with more style properties and detailed configurations of border styles as well as improved behavior and mechanism over the built-in ASP.NET v1.x Style.

WebStyle consists of properties listed below:

  • BackColor
  • BackColor2
  • BackgroundImage
  • BaseStyle
  • BorderColor
  • BorderSettings
  • BorderStyle
  • BorderWidth
  • CssClass
  • Cursor
  • CustomRules
  • Font
  • ForeColor
  • GradientType
  • Height
  • HorizontalAlign
  • Margin
  • Overflow
  • OverflowX
  • OverflowY
  • Padding
  • VerticalAlign
  • Width

The improved WebStyle enables more precise control over the appearance, look & feel of the component and its entire UI elements.

Style Rendering

WebStyle has two types of rendering when used in components:

  • CSS syntax output.
    By default, every settings made to a WebStyle will be rendered as full CSS syntax during page request. The class name will automatically determined by the component's name, the style's hierarchy and the style's name.

    Example:

    CSS

     

    Each style will produce one CSS Class per instance of controls in a page.

  • External CssClass.
    The WebStyle has the flexibility to allow developers to use their own external CSS Class definition. Developers can define the CSS Class in either a page level scope by using <style> tag or external stylesheet link by using <link href="styles.css" ... >.

    To take advantage of External CssClass, you can simply enter the name of the desired CssClass, for instance: DTHeader in each style's CssClass property. During rendering, the WebStyle object will check for the CssClass property and automatically determine the output. In this context where CssClass exists, the CSS syntax for the specified WebStyle will not produced. Instead, the CssClass property will be assigned in the element's className attribute.

     

    In the scenarios where a lot of instances exist in a page, it is wise to use External CssClass for better performance and reduced output page's size.

DynamicStyle

One of the new stuff in WebUI.NET Framework is the new DynamicStyle class. The DynamicStyle provides a convenient and centralized way to bring interactive effect to the components and its entire UI elements.

DynamicStyle is built around the WebStyle object, and consist of 3 states of interactivity: Normal, Over and Active. See following screenshot for details:

States description:

  • Normal. The style applied to the element when the control is in normal state (doesn't has focus and not hovered)
  • Over. The style applied to the element when the control is being hovered (doesn't has focus)
  • Active. The style applied to the element when the control has focus. A control received focus when it is clicked, or tabbed using keyboard.

     

    The three states interactivity does not require any additional programming in either server or client side. It is handled automatically in Client Side Object Framework.
     

     

Inheritable Base Style

With the availability of DynamicStyle in WebUI.NET Framework, it also introduced one issue in efficiency and reusability. For example, imagine you set the Normal state of TextBoxStyle to have Padding: 3px, Margin: 2px, Overflow: Hidden. You then wish to change BackColor of the Over state and probably ForeColor of the Active state. Now you will see problem when in Over and Active state and notice that the basic attributes in Normal state are not applied. This is normal since that there are no connection between the Normal, Over and Active state. The last thing you can do is then copying the same attributes to Over and Active state.

WebUI.NET Framework implements the solution for the DynamicStyle efficiency by providing BaseStyle property in the WebStyle class. With the BaseStyle feature, developers has the capability to inherit attributes that exist in a state's Style. In the scenario above, developers only have to set Over state's BaseStyle to Normal, and set Active state's BaseStyle to Over.

During rendering process, the WebUI.NET Framework will automatically apply non-default attributes in the specified BaseStyle to the current rendered WebStyle. The framework also supports multiple inheritance such as in the scenario above where Active state inherits from Over and Over inherits from Normal.

 

The Style rendering process, BaseStyle inheritance and other automation process fully takes the advantage of Advanced Serialization and Rich Object Model features of WebUI.NET Framework.
 

 

Integration with Theme Architecture

In addition to the External CssClass mode discussed in Style Rendering topic, WebUI.NET Framework includes theme core interfaces embedded in the control's architecture to enable application-wide theming. The interface worked in conjunction with Layout Manager interface and other features.