With many advantages and benefits introduced in framework-concept of component design such as unified object model, common features and functionalities and much more; WebUI Framework also includes a unified theme architecture in the core control level that enables universal theming on all components that derived from WebUI Framework.
The embedded theme architecture will be extensively utilized in upcoming new set of UI components which includes a visual Theme Manager designer that fully take advantages of the theme architecture. The Theme Manager is built around the Visual Studio environment to provide a centralized, single interface management to WebUI components' styles in the entire web application.
The theme architecture is possible with the framework-level integration and extensively combines existing key features such as the WebStyle, DynamicStyle, Layout Manager altogether to synergy a mature, rock solid foundation for the entire theme architecture.
Following are just some of the top benefits offered by the built-in theme architecture:
- Improved page's performance in overall.
There will be improvement in overall performance of web page in the entire web application since that the page doesn't need to render each class for each style per components in the page. Any WebUI components will automatically detect its state of EnableTheming and assign the class name to the entire style without producing the css output text in the page.
- Reduced page's size.
The class definitions of component will no longer be rendered in the page for each components. In parallel with improving page's performance, it also reduced page's size by 80. Imagine if you have 10 components in a page and each component produce about 5K of class definitions required to render the UI style, your page size will be increased up to 50K for only class definitions. With this theme architecture, no individual class definitions required and hence your page size could be reduced by more than 80.
- Centralized administration and effective site management.
Imagine that you have 100 pages of large web applications and your customer require you to change the default look&feel and styles for the components in the entire application, you would probably spend a week or more to carefully perform these changes or otherwise you will probably refuse to do these changes and let your customers unhappy. Certainly this has been a very major issue in web development today and yet no vendors are bothered to work on the solution. With the availability of WebUI.NET Framework and its theme architecture features, it has deliver a truly new level of usability and efficiency with the centralized management over the components' styles in entire web application.
Theme Architecture Hierarchy Diagram
Key features of theme architecture:
- Dynamic compilation. The theme definition will be compiled dynamically by the theme architecture at runtime for an ASP.NET web application. The architecture is capable to perform the compilation only when the theme definition has been changed.
- Single stylesheet output. Theme definition will be parsed and compiled into single CSS based stylesheet. The external css stylesheet will be automatically injected into page during runtime.
- XML-based Theme Definition. Theme definition has its format in XML for better interoperability and easier management. A theme definition has ".istheme" extension.
- Intersoft Layout File for style definition. The style definition of each component is using the same layout format as in Layout Manager. See Layout Manager link below to learn more.
- Theme location. There are 2 types of location where the theme definitions are stored, those are: Global and Private. Global location means that the theme definitions are located at Virtual Directory level, the default is in "/CommonLibrary/Themes/" (See Centralized Client Files to learn more). The Private location means that the theme definition and its entire data files are stored under the root web application, the default is "~/ISThemes/".Use of Global theme location is recommended for better reusability. You only need to create the definitions once and use them in multiple web applications.
- Multiple theme group. Refer to the diagram above, a theme can contains multiple groups so called "ThemeGroup". ThemeGroup is provided to enable greater level of flexibility in styles customization in page level theme. ThemeGroup contains the component and style definition as well as subscribe pages and components. With the ThemeGroup, you can create one default group which contains the components list and styles that will be applied to all pages in the web application. You can then create separate groups for specific components list and styles, and specific pages and controls which will use its own style definition. For example, the caption bar should appear in Red for Tasks Management page and Blue for Accounts Management page, while leaving all other components to use default ThemeGroup definition.
- Page level theme. Inside the ThemeGroup definition, you can also enable or disable the theming for specific page. For example, you might want to disable the theming for all controls in Administration page. This can be done through the configuration at <Page> node under the ThemeGroup.
- Instance level theme. Under the <Page> node, you can further customize the styles for each individual component. The individual component is differentiated with its control ID. The <Control> node enables you to turn off the theming for the specific control or apply different style definition for the specific control.
- Session/User personalized theme. By default, the overall theme architecture is performed at application level. That means, each theme definition, the ThemeGroup and its entire settings are automatically applied to the application without additional programming or codes. Every users that accessed the application will see the same look & feel. For even greater flexibility, the built-in theme architecture has been designed to allow user personalized theming which believed to be one key requirement in today's business applications.
Theme Definition Sample
Although it is not recommended to programmatically write the theme definition by your own due to the complexity of the theme architecture concept and features, at least you can try to write simple sample to demonstrate the capability of built-in theme architecture for the current time, until the Visual Theme Manager is available in early 2005.
Following is a sample theme definition: