|
Developing Skins for Web Pages
With ASP.Net 2 (Whidbey) you developers can create, use and deploy ‘skins’
Vinod Unny
Monday, April 05, 2004
Many applications have the ability to change their appearance by utilizing something called ‘skins’. For instance, Winamp, Windows Media Player and NeoPlanet all have skin support. Skinning lets a user use a different look and feel for the application easily. From a developer’s perspective, creating skins for most applications is usually quite simple. However, the Web has always been behind in this field. But now, as a developer you can create skins for your Web applications as well, using the upcoming ASP.Net 2.0 version. This version, for now codenamed Whidbey, allows developers to create and apply skins (actually themes) to their Web applications quite easily. Users have to select and apply a particular theme themselves. A skin in this context is just one part of an entire theme.
| Snapshot |
| Applies to |
.Net developers |
| Usp |
Create different looks for the same Web
application |
Creating and using skins is quite simple once you learn how. All you need is a special folder on your website or a virtual directory called ‘Themes’. Note that this name is reserved and has to be exactly this (but is not case-sensitive). Under this folder, you will need to create separate folders for each theme that you wish to have. In each such theme, multiple skin files and CSS (Cascading Style Sheet) files can be stored which define the characteristics of that theme. That is, for a virtual directory called ‘MyTest’ in your website, the directory structure will be as follows:
MyTest > Themes > MyTheme1 > *.skin, *.css
MyTest > Themes > MyTheme2 > *.skin, *.css
…
So, how does one create a skin file? Basically, a skin file is associated with a particular ASP.Net control on any page. For instance, a skin file called TextBox.skin will apply to the <asp:textbox /> controls on a page. For each control, a skin file will supply the formatting parameters for that control. A CSS file, which is optional, can supply high-level defaults to the site’s formatting. Let’s now look at a couple of different skin files and what goes into them.
The first skin file is for the ASP.Net textbox control. The contents of the file TextBox.skin looks like this:
<asp:textbox runat=“server” font-bold= “true” forecolor=“gold” backcolor=“lime” />
As you can see, this looks like a simply textbox control being defined on any ASPX page! The only difference here is that you cannot supply non-formatting parameters (such as value) as default in the skin.
Let’s also take a look at another skin for the label control. The contents of the file Label.skin in this case looks like this:
<asp:label skinid= “lbl-skin-01” runat=“server” font-size=“10pt” forecolor=“green” backcolor=“black” font-italic=“true” />
<asp:label skinid= “lbl-skin-02” runat=“server” font-size=“10pt” forecolor=“gold” backcolor=“black” />
 |
| The page using “BasicBlue” the default theme in Visual studio |
|
There’s a new attribute here called skinid. This skinid can be used to refer to the particular skin style you wish to use when being called in a page.
So, now let’s see how one can use these skins on ASPX pages. For this, a simple ASPX file can be created as follows:
<%@ page language=“VB” theme=“myTheme1” %>
<html><head runat=“server”><title>My Test Page</title></head>
<body><form runat=“server”>
<asp:label id=“lblName” skinid=“lbl-skin-02” runat=“server”>Name:</asp:label>
<asp:textbox id=“txtName” runat=“server” /><br/>
<asp:label id=“lblEmail” skinid=“lbl-skin-01” runat=“server”>Email:</asp:label>
<asp:textbox id=“txtEmail” runat=“server” /><br/>
</form></body></html>
The underlined sections mark the new attributes for skins. You can specify the theme to be used for a particular page by including the theme attribute in the page definition. The theme name, as mentioned before, is the name of the folder under the special Themes folder at your site.
The skinid attribute lets you define which skin style to use for each label on this page. However, the textboxes on the page automatically pick up the default style from its skin file since no skinid attribute was specified in either place. This means that you can have different styles for a particular control’s skin even within the same theme.
The code above shows how you can add a theme by declaring it at the top of the page. You can also have other options for supplying the theme name to be used for the pages in your site in other ways. In case you wish to set a default theme for the entire website, all you need to do is edit your website’s web.config file and add the following entry to it:
<pages theme=“CoolBlue” />
However, there might be times when you wish to change or set the theme prog—rammatically for a page or the site. This can be quite easily achieved by using the theme property of the Page object in the Page_PreInit event. To make sense of this, take a look at the code below:
<html><head runat=“server”><script runat=“server”>
Sub Page_PreInit(Byval sender as Object, Byval e as System.EventArgs)
Page.Theme = “FieryRed”
End Sub
</script></head>
…
The Page.Theme property can be set only in the Page PreInit event as it is required before the page is rendered.
If you want to let your visitors select themes, then all you need to do is link each of these themes to a separate button.
As you can see, adding themes and skinning your website in ASP.Net is quite simple as well as interesting. Adding themes and letting your users or developers select the skin they wish to apply to a page or the site makes the entire feel much more personal. So, don’t be restricted to skinning only your media players; go ahead and skin your website as well.
Vinod Unny
Enterprise InfoTech Page(s) 1
|
