Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Web Development

Themes, Skins, and ASP.NET 2.0


Vikram is a software-designer specialist for Hewlett-Packard GDIC. He can be contacted at [email protected].


There's nothing really new about the concept of "themes," particularly with respect to Microsoft Windows. For instance, desktop themes in Windows 95 let you apply color schemes across the entire range of controls that make up the Windows UI and icons. Themes were also part of the Microsoft Plus! add-on pack for Windows. More recently, themes were extended in Windows XP with Visual Styles that let you control the color, size, and fonts used in controls. Additionally, applications such as Winamp have contributed to the themes craze, with thousands developed by people around the world. With the release of .NET Framework 2.0 and Visual Studio 2005, themes extend to ASP.NET web applications.

In ASP.NET 2.0, a theme is a way of defining the look-and-feel for server controls in web applications. Once defined, a theme can be applied across an entire application, to a single page of an application, or to a specific control on a web page.

A theme is made up of one or more "skins" and can contain traditional Cascading Style Sheets (CSS). Skins are files that contain the property definitions for various controls. Previous versions of ASP and ASP.NET used CSS to achieve consistency in appearance. In fact, themes support and complement CSS. A theme lets you specify values for ASP.NET Web Server controls. Additionally, when you need to specify settings for HTML elements, traditional CSS files can be used as part of a theme.

Figure 1 illustrates the control flow for ASP.NET 2.0 themes. As soon as the request for a page arrives, a check verifies that a theme has been defined for the page or web application. If a theme has been defined, then the theme information is retrieved from the default locations where the theme would be stored. This can be the App_Themes folder under the folder of the web application for a theme specific to the application, or the \IISRoot\aspnet_client\system_web\2_0_50727\Themes folder for themes that have been defined at the global level. Based on the information retrieved, the theme is applied to the page and the page is displayed on the browser.

Creating and Applying Themes

There are several steps involved in creating themes:

Step 1. Start Visual Studio 2005 and select New Web Site from the File menu. Choose ASP.NET Web Site from the templates, then C# in the language drop-down. Also choose HTTP as the location and create the web site on the local IIS.

Step 2. Build a UI that has common UI elements—Labels, Textboxes, Dropdowns, and Buttons—on the default.aspx web page.

Step 3. Right click on the Solution Explorer and select Add Folder. Choose the Add ASP.NET Folder from the submenu and drill down to select the Theme folder. This creates an App_Themes folder that acts as the container for all the themes defined for this web application.

Step 4. Under the Theme folder, create another folder of type Theme. Specify a name for the folder. The name you specify becomes the name for the theme. For simplicity, I use "SimpleGrayTheme."

Step 5. Add a skin file. Right click on the SimpleGrayTheme folder and choose Add New Item. There is no separate template for a skin in the list of installed templates. Choose Skin, then name it Textbox.skin. Add more skin files, such as Dropdown.skin, Label.skin, and Button.skin. (It isn't mandatory to have separate .skin files for each control; I only do so for clarity. No matter how many .skin files a theme contains, the ASP.NET 2.0 runtime merges them all and considers it as a single .skin file.)

Step 6. Define the appearance for these controls that you placed on the web page. Start with the skin for the button. Listing One presents the property settings for the Button. Similarly, you define the property settings for each of the other controls. Listing Two presents the contents of each of the .skin files.

Step 7. Once you have defined the appearance for the controls, you can apply the skin to the page. The page exposes the theme as a property. Select the web page and open the Properties window for the page. In the list, navigate to the Property theme, and SimpleGrayTheme drops down as a choice. If more than one theme is defined, these also appear in the drop-down menu. In fact, the theme is an @Page directive and if you open the source view for the web page, this directive would be set. The Visual Studio 2005 IDE does not provide designer support for the themes. Even after applying a theme to the page, the appearance of the page in the VS 2005 Designer does not change. Furthermore, it is possible to specify the theme for the page at runtime. However, this needs to be set in the Page_PreInit event for the page; see Listing Three(a). It is also possible to specify a theme for an entire application by making use of the Web.config file; see Listing Three(b).

Step 8. Run the web application to display the web page in the browser. The page appears with the theme applied to it.

Managing Multiple Skins

In the scenario just presented, I applied the same skin to all text boxes on the page. In reality, it is often necessary to apply multiple different skins to different instances of the same control. For example, you might want to have a particular skin for the First Name and Last Name text boxes, while a different one for the Job Title and Company. To address this scenario, ASP.NET 2.0 has implemented the concept of a "SkinID"—a unique identifier or a name for identifying a particular skin. In other words, SkinID lets you specify a specific skin for a control. For example, the skin definitions in Listing Four modify the TextBox.skin in Listing Two. Essentially, I have created three skins for the TextBox control. The second and third skin definitions have a SkinID specified, while the first one does not. The next thing to do is associate a specific skin with a specific text-box control.

In the web page, select the text box for which you want to specify a SkinID and open the Properties window. In the Properties window, select the SkinID property. The skins defined for text boxes are presented for selection in the drop-down menu.

For the FirstName and LastName fields, select RequiredTextBox SkinID and for the Address text box, select the RequiredTextBox SkinID. For the Job Title and Company text boxes, do not specify any SkinID. Now run the application. The web page is displayed in Figure 2.

The default skin was applied to the Job Title and Company fields, although no SkinID was specified to these controls. This is by design. If a default skin exists for a control, then that skin is applied to all instances of that control for which no SkinID has been specified.

Disabling Skins

You can disable skins from being applied to a particular control. To do so, the EnableTheming property on the control needs to be set to False. By default, this is set to True on all controls that support themes. All controls for which the EnableTheming property is set to False are excluded from themes.

Theme Classification

In ASP.NET, another method of applying a theme to a page is a "StyleSheetTheme," which is applied by setting the property StyleSheetTheme on the page. The StyleSheetTheme is an @Page directive by the name "StyleSheetTheme."

It is important to understand that this classification is purely based on the way the theme is applied. It is possible to apply the same theme as a Theme setting in one page, and as a StyleSheetTheme in another page. Based on whether a theme has been applied with a Theme setting or a StyleSheetTheme, the behavior changes.

By behavior, I mean the precedence of the skin over a particular property that has been set on a control. For example, say that in a page the Font-Bold property for each of the controls is set to False. In the skin for this control, this property has been set as True.

When you apply the theme as a StyleSheetTheme, the property value set on the control takes precedence over the value that has been applied in the Theme setting. That is, even though the Font-Bold property has been set to True in the Theme setting, the control's setting of False in StyleSheetTheme will be considered as final and the page will appear without the boldface applied on the controls.

In contrast, if you applied the same theme to the same page in the Theme setting, then the opposite happens. That is, the control properties set in the Theme folder override any value that has been set on the control. Hence, in this case, the page would appear with boldface applied on all controls. This lets you control the behavior of the themes, based on the scenario and particular requirements.

Application-Specific and Global Themes

Themes stored in the App_Themes folder of a particular web application are specific to that application and can be used only by that web application.

If there is a need to reuse the same theme in multiple web applications, then the Theme folder would need to be placed in this folder on the machine:

\IISRoot\aspnet_client\system_web
\2_0_50727\Themes

For example, if you use the default IIS web site located at C:\Inetpub\wwwroot, the folder is C:\Inetpub\wwwroot\aspnet_client\system_web\2_0_50727\Themes. Once the theme has been placed in the specified folder, it becomes available to all web applications on the machine.

Conclusion

The concept of themes, coupled with the concept of master pages in ASP.NET 2.0, gives you an efficient and easy-to-use infrastructure for you to design and develop web applications that are consistent in appearance and layout.

DDJ



Listing One

Button.skin
<asp:Button 
   BorderColor  = "LightSlateGray"
   BorderStyle  = "Inset"
   BorderWidth  = "4px"
   Font-Bold     = "True"
   Font-Name   = "Verdana"
   Font-Size     = "XX-Small"
   ForeColor    = "Black"
   Runat         = "Server" 
/> 
Back to article


Listing Two
Dropdown.skin
<asp:DropDownList   
   Font-Bold    = "True"
   Font-Name  = "Verdana"
   Font-Size    = "XX-Small"
   ForeColor    = "Gray"
   Runat        = "Server" 
/>

Label.skin
<asp:Label
   BackColor  = "WhiteSmoke" 
   ForeColor  = "DarkSlateGray"
   Font-Bold  = "True"
   Font-Name = "Verdana"
   Font-Size  = "XX-Small"
   Runat       = "Server" 
/>

TextBox.skin
<asp:TextBox 
   BackColor   = "WhiteSmoke" 
   ForeColor   = "DarkGray" 
   Font-Bold   = "True"
   Font-Name  = "Verdana"
   Font-Size   = "XX-Small"
   Runat        = "Server" 
/>
Back to article


Listing Three
(a)

Setting Theme In Code at Runtime
void Page_PreInit(object sender, EventArgs e)
{
   Page.Theme = "SimpleGrayTheme";      
}

(b)
Web.config
<configuration>
    <system.web>
    <pages theme="SimpleGrayTheme" />
    </system.web>
</configuration>
Back to article


Listing Four
TextBox.skin
<asp:TextBox 
   BackColor  = "WhiteSmoke" 
   ForeColor  = "DarkGray" 
   Font-Bold  = "True"
   Font-Name  = "Verdana"
   Font-Size  = "XX-Small"
   Runat      = "Server" 
/>

<asp:TextBox 
   SkinId     = "RequiredTextBox"  
   BackColor  = "Yellow" 
   ForeColor  = "DarkGray" 
   Font-Bold  = "True"
   Font-Name  = "Verdana"
   Font-Size  = "XX-Small"
   Runat      = "Server" 
/>

<asp:TextBox 
   SkinId     = "MultiLineTextBox"  
   BackColor  = "White" 
   ForeColor  = "Black" 
   Font-Bold  = "True"
   Font-Name  = "Verdana"
   Font-Size  = "XX-Small"
   Runat      = "Server" 
/>
Back to article


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.