Skip to end of metadata
Go to start of metadata

Introduction

One of the most challenging tasks in developing scalable web application is providing rich visual style design in consistent fashion across the entire web forms in the application. Designing the style that is reusable and consistent in an application can oftenly become a painful task for developers because of the insufficient tools that has specific features to address this problem.

Intersoft has implemented its own unique theme architecture since WebUI Framework 2 which enables a definition of xml-based layout file to be reusable and applied across entire web application to produce consistent visual styles.

This page describes how you can apply theme in WebUI application. In order to apply theme in WebUI application you will need to:

On this page:

Create Web Application

Intersoft has Intersoft Empty Web Application project template which helps developer to create an empty web application project using Intersoft WebUI Studio controls. Creating the project is easy and straight forward:

  1. Open Visual Studio.
  2. Open New Project dialog box (File / New / Project or type New Project in the Quick Launch window).
  3. Navigate to Visual C# or Visual Basic / Intersoft Solutions / ASP.NET from the tree navigation on the left.
  4. Enter WebUIThemeTutorial as the Name and define the Location of the project then click OK button.

 

Add Theme Project

The first thing to apply theme in WebUI application is to add theme project config file in the root of your web application.

The theme project configuration file represents a single file (ISTHEME.CONFIG) that contains configurations for all the theme project.

istheme.config

In the config file above, you'll see several nodes. Let's go through these nodes one by one.

  • ProjectInfo: this node contains information about the theme project.
    AppName:  the name of the theme project.
    WebPath: the URL for the hosted project in IIS.
    PhysicalPath: the physical path of the project.
    ApplyBehaviors: indicates whether ?? user behaviors should be applied? 
  • SelectedTheme: this node contains information about the selected theme
    Name: the name of the selected theme.
    Location: the location of the selected theme. This should correspond to one of specified ThemeLocation.
    Enabled: specify whether selected theme is enabled or not.
  • ThemeLocation: this node contains information about theme location.
    Name: the name of theme location.
    Path: the path of theme location.

This theme project configuration specify that WebUIThemeTutorial project uses WinVista theme in Private location. In the next step, we will add theme file in a location which correspond to the Location attribute in SelectedTheme node.

 

Add Theme File

Add a folder and named it as Themes in the root of your web application. This folder name should match with the one specified in Location attribute in SelectedTheme node at Theme project config file.

Next, add a theme file into the folder. The theme file represents a single file (.istheme extension) that contains configurations for all the components, pages and/or controls that are contained within the Web application.

The following is an example of theme project definition.

winvista.istheme

In this sample, the theme file only contain configuration for WebDesktopManager and WebGrid components. The WebDesktopManager component will use Vista layout. Its style is specified in WinVista.isl (layout file).

 

Add Layout File

The layout file represents a single file (*.ISL) that contains style configurations. You can create a new layout file of use an existing layout file. To simplify the process, this tutorial will use existing layout file which available in WebDesktop sample project.

Following is layout file definition for WebDesktop component.

winvista.isl  Expand source


Running WebUI Application with Theme Applied

Save all the changes and build your web application. When the application is running and requested through browser, WebUI Framework (through Theme architecture) will detect for istheme.config file and automatically apply the contained theme information and component's style definition to the requested page.

Theme framework will automatically generate css file at first run. It can be found inside the theme folder.

The screenshot below shows a simple page with WebDesktopManager before WebUI theme applied.


The result of WebDesktop Manager with Vista theme will look like following:

 


Related Topics