Themes in ASP.NET 2.0 — Part 2

Note that at the time of writing this article, I am still using the beta 1 build of Visual Studio .NET 2005. So the steps that I explain here will be quite different from the builds that you use especially if you are using the latest builds for Beta 2. There are some changes in the way of coding in ASP.NET 2.0.

We will see the various methods of creating themes and also the various steps to customize the themes according to our requirements. For this we will create a simple data entry form. But this form will not have any code behind to save the data.

Start Visual Studio .NET 2005 Beta (whatever build you have at present). Most of the steps wil be familiar as before. We will create a website using the file system since we need not have to configure IIS any more. Note that when you have to configure IIS and create websites using IIS it means that you will need to have administrative privileges on the workstation and it could lead to develop your applications with "over the limit" privileges defeating the purpose of "least privileges".

Click on New | Web Site and choose the file system. Choose a path for the site to be saved. And then choose VB.NET as your language. Of course you can choose C# if you wish. This wont make any difference to the development of the application. After a little while, the website is created and the default page opens in design mode in Visual Studio .NET 2005.

We will create a simple form that accepts the name, country, date of birth, date of completing college. We will show how global themes can over ride the settings of the controls and how we can override the global theme to customize some of the controls on the page.

Design the page as shown in Figure 1. Do not do any "auto formatting" for any of the controls.

Now to implement themes this is what you will have to do. Create a theme and save it in a predefined folder as specified. This is a new functionality of ASP.NET. Remember in the previous section we saw that the default path is \Themes\. Let us create a folder called Themes in the root folder. On careful observation it is seen that the folder has an icon of a paint brush on it and it is clear that it is a system folder. See Figure 3.

Now there are 2 ways of adding themes. One is the familiar method which we are all known to use i.e. CSS files and the other is new in ASP.nET 2.0 and it is a skin file. We will focus on the skin part since we are all familiar how CSS files work.

Right click on the folder Themes and create a new folder MyThemes. This will enable us to organize the themes in a single folder. Right click on the folder and then add a new text file and name it to MyTheme.skin. Note that the extension is new in ASP.NET 2.0.

Now let us open the MyTheme.skin file and see what is needed to implement it. On opening it we see that it is an empty file. So what do we do now.

Add the following lines of code. Note that it is similar to the code in the designer except that we are laying emphasis on the layout of the control plus the look and feel of the control.

Add the following lines of code.

<

<asp:buttonrunat="server"borderstyle="Solid"borderwidth="2px"bordercolor="red"backcolor="lightblue"/>

<asp:CalendarRunat="server"BorderColor="Red"BorderWidth="4px"BackColor="Cyan"CellSpacing="8"Font-Names="Verdana"Font-Size="8pt">

<SelectedDayStyleForeColor="Yellow"BackColor="Red">SelectedDayStyle>

<TodayDayStyleBackColor="Blue">TodayDayStyle>

asp:Calendar>

That is all we need to create the look and feel of the application. Now let us see how to call this file in the application.

Switch back to the form that we created just now and switch to the Source View. Now place the cursor in the <%@Page %> declarative tag and then scroll to the end of the line. Press the space bar so that Intellisense is enabled and scroll down the list. We see that there is a new attribute called Theme. Select this and then assign the value "MyTheme". This is the name of the skin file that we created just now. See Figure 5 and Figure 6 to see how this is done.

It is seen from Intellisense that there are 2 other themes that we didn't create. They are "BasicBlue" and "SmokeAndGlass". These are the default themes provided with ASP.NET 2.0.

Now let us run this application and see what happens. Wow the application got decorated with all the attributes as we defined in the skin file. It was so simple to just write code for the various controls and then the controls in the page automatically picked up the definitions from the skin file. This is much simpler than using CSS files because CSS files have different style of naming the attributes. See Figure 7 for the outcome.

That is all is needed to implement themes.

Now let us examine another scenario where we might not want the theme to be applied to the entire page but to some of the controls. Let us examine this concept to the page that we created just now. We see that both the calendars have the same look and feel. Wouldn't it be great if we could specify different colours for both the calendars so that they would stand out.

Now open the page in Source View. Select the second calendar and copy the style that we used in the skin file but modify it to use different colours so that the 2 calendars will stand out.

The code for the 2^nd calendar is shown below.

<

<SelectedDayStyleForeColor="Yellow"BackColor="Red">SelectedDayStyle>

<TodayDayStyleBackColor="White">TodayDayStyle>

asp:Calendar>

Now let us run the page and see if the style is applied to the page. Alas it isnt applied and we still see the settings as described earlier. Definitely there must be some settings to allow this new setting to be applied, overriding the settings of the skin file. If you had read the earlier article we had seen that there is a new property called StyleSheetTheme and the difference with a StyleSheetTheme is that any attributes local to the page or a control will take precedence over the same attributes listed in the skin file.

Now go back to the top of the page and then change the phrase Theme to StyleSheetTheme. Leave the value to MyTheme since this is the only theme available in the application. Now let us run the application again to see the outcome.

Wow the settings for the second calendar has been applied and both the calendars are now having different colours. What a powerful functionality the StyleSheetTheme attribute has made to ASP.NET 2.0.

The outcome of the application is seen in Figure 8.

Clearly we have seen a lot how themes have been created for ASP.NET 2.0 and how powerful they have been developed to give flexibility to the user as well as the developer.