Visual CSharp 1002005 A Developers Notebook [Electronic resources] نسخه متنی

4.7. Let Users Personalize Your Site with Themes

Many users like to personalize their favorite web sites, by
setting the look and feel of the site's controls to
meet their own personal aesthetic. ASP.NET 2.0 provides support for
themes that enable you to offer that level of personalization to your
users.

Note: Themes allow your users to personalize the look and feel of
your site's controls.

4.7.1. How do I do that?

A
theme
is a collection of
skins.
A skin describes how a control should look. A
skin can define stylesheet attributes, images, colors, and so forth.

Having multiple themes allows your users to choose how they want your
site to look by switching from one set of skins to another at the
touch of a button. Combined with personalization, your site can
remember the look and feel your user prefers.

Themes come in two flavors. The first, called a stylesheet
theme, defines styles that the page or control
can override. These are, essentially, equivalent to CSS stylesheets.
The second type, called a customization
theme, cannot be overridden. You set a
stylesheet theme by adding the
StyleSheetTheme attribute to the page directive, and
similarly, you set a customization theme by setting the
Theme attribute in the page directive.

In any given page, the properties for the controls are set in this
order:

Properties are applied first from a stylesheet theme.

Properties are then overridden based on properties set in the control.

Properties are then overridden based on a customization theme.

Thus, the customization theme is guaranteed to have the final word in
determining the control's look and feel.

Skins also come in two flavors:
default skins and
explicitly named skins. Thus, you might
create a Labels skin file with this declaration:

  <asp:Label runat="server" 
ForeColor="Blue" Font-Size="Large" 
Font-Bold="True" Font-Italic="True" />

This is a default skin for all label controls. It
looks like the definition of an ASP:Label control,
but it is housed in a skin file and thus is used to define the look
and feel of all Label objects.

In addition, however, you might decide that some labels must be red.
To accomplish this, you create a second skin, but you assign this
skin a SkinID attribute:

  <asp:Label runat="server" SkinID="RedLabel"
ForeColor="Red" Font-Size="Large" 
Font-Bold="True" Font-Italic="True" />

Any label that does not have a
SkinID attribute will get the default skin,
and any label that sets SkinID ="Red" will get
your named skin.

Here are the steps to providing a personalized web site:

Create the test site.

Organize your themes and skins.

Enable themes and skins for your site.

Specify themes declaratively or programmatically.

4.7.1.1 Create the test site

To demonstrate the use of themes and skins, once again
we'll build on the personalization labs
we've been incrementally improving throughout this
chapter. Use the Copy Web Site page to create a new web site, and
name it ThemesandSkins.

Tip: If you are starting here without having done the previous labs,
create a new application named ThemesandSkins, and
download and copy in the source from the
ComplexPersonalization folder as a starting
point.

To begin your new application you'll need some
controls for which you can set the look and feel. Open
Default.aspx and add
controls to the page, using the code shown in Example 4-5.

Example 4-5. Controls for demonstrating skins

<table width ="100%">
<tr>
<td >
<asp:HyperLink ID="linkProfile" Runat="server" 
NavigateUrl="~/ProfileInfo.aspx">
Profile Info</asp:HyperLink>
</td>
<td >
<asp:ListBox ID="lbBooks" Runat="server" /> 
</td>
</tr>
<tr>
<td >
<asp:Label ID="lblListBox" Runat="server" Text="ListBox"/> 
</td>          
<td >        
<asp:ListBox ID="lbItems" Runat="server">
<asp:ListItem>First Item</asp:ListItem>
<asp:ListItem>Second Item</asp:ListItem>
<asp:ListItem>Third Item</asp:ListItem>
<asp:ListItem>Fourth Item</asp:ListItem>
</asp:ListBox>
</td>
<td >
<asp:Label ID="lblRadioButtonList" Runat="server" 
Text="Radio Button List"/> 
</td>          
<td >        
<asp:RadioButtonList ID="RadioButtonList1" Runat="server">
<asp:ListItem>Radio Button 1</asp:ListItem>
<asp:ListItem>Radio Button 2</asp:ListItem>
<asp:ListItem>Radio Button 3</asp:ListItem>
<asp:ListItem>Radio Button 4</asp:ListItem>
<asp:ListItem>Radio Button 5</asp:ListItem>
<asp:ListItem>Radio Button 6</asp:ListItem>
</asp:RadioButtonList><br />     
</td>
</tr>    
<tr>
<td>
<asp:Label ID="lblCalendar" Runat="server"
Text="Calendar"></asp:Label>
</td>
<td>
<asp:Calendar ID="Calendar1" Runat="server" />
</td>
<td>
<asp:Label ID="lblTextBox" Runat="server" 
Text="TextBox"/>
</td>
<td>
<asp:TextBox ID="TextBox1" Runat="server"/>
</td>
</tr>
</table>

Now you want to set skins that will change the look and feel of these
controls, and you want to organize those skins into
themes.

4.7.1.2 Organize site themes and skins

Themes are stored
in your project in a folder named App_Themes. To
create this folder, go to the Solution Explorer, right-click the
project folder, and choose Add Folder
Theme Folder. Name the
new folder Dark Blue. The
App_Themes folder will be created automatically,
with a theme folder named Dark Blue immediately
under it. Create a second theme folder, named
Psychedelic.

Right-click the Dark Blue theme folder and
choose Add New Item. From the template list choose Skin File and name
the file Button.skin (to hold all the button
skins for your Dark Blue theme), as shown in Figure 4-39.

Each skin file is just a text file that contains a definition for the
control type, but with no ID. Thus, for example, your
Label.skin file might look like this (for the
Dark Blue theme):

<asp:Label Runat="server" 
ForeColor="Blue" Font-Size="Large" 
Font-Bold="True" Font-Italic="True" />

Create skin files for each of the following types in both themes:

Button.skin

Calendar.skin

Label.skin

ListBox.skin

RadioButton.skin

Text.skin

At this point your solution should look more or less like Figure 4-40.

4.7.1.3 Enable themes and skins

To let your
users
choose the theme they like and have it stored in their profile, you
need to add a single line to the
<properties> element in the
<profile> element of
Web.config:

<add name="Theme" />

4.7.1.4 Specify themes

You can set the themes on
your page either declaratively or programmatically. To set a theme
declaratively, simply add the Theme attribute to
the Page directive:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="Default.aspx.cs" Inherits="Default_aspx" Theme="Dark Blue"%>

This will set the page's theme to the Dark Blue
theme you've created.

You can set the theme programmatically either by hardcoding it, or
(even better) by settng it from the user's profile.

You set StyleSheet themes by overriding the
StyleSheetTheme property for the page, as shown in
the following code snippet:

public override string StyleSheetTheme
{
get
{
if (Profile.IsAnonymous =  = false && Profile.Theme != null)
return Profile.Theme;
else
return "Dark Blue";
}
set
{
Profile.Theme = value;
}
}

If you are going to set a
customization theme
programmatically, however, you must do so from the new
PreInit event handler for the page because you
must set the theme before the controls are created:

public void Page_PreInit(object sender, EventArgs e)
{
if ( Profile.IsAnonymous =  = false )
{
Page.Theme = Profile.Theme;
}
}

This presents a bit of difficulty when you want to allow the user to
change the theme at runtime. If you create a control that posts the
page back with a new theme, the pre-init code runs
before the event handler for your button that
changes the theme, so by the time the theme is changed the buttons
have already been drawn.

To overcome this you must, unfortunately, refresh the page again (an
alternative is to post to another page). For this lab
we'll add two buttons to the
ProfileInfo.aspx page:

<tr>
<td>
<asp:Button ID="ThemeBlue" Text="Dark Blue" 
Runat="server" OnClick="Set_Theme" />
</td>
<td>
<asp:Button ID="ThemePsych" Text="Psychedelic" 
Runat="server" OnClick="Set_Theme" />
</td>
</tr>

Notice that the two buttons share a single Click
event handler:

void Set_Theme(object sender, EventArgs e)
{
Button btn = sender as Button;
if (btn.Text =  = "Psychedelic")
{
Profile.Theme = "Psychedelic";
}
else
{
Profile.Theme = "Dark Blue";
}
}

When the user is not logged on, the page's default
theme will be used. Once the user sets a theme in the profile, that
theme will be used. Create skins for your two themes and then run the
application to see the effect of applying the themes.

4.7.2. What about...

....overriding themes?

You can
override
the theme for particular controls by using named skins.

For instance, you can set the lblRadioButtonList
label to be red even in the Deep Blue theme by using a named skin. To
accomplish this, create two Label skins in the
Label.skin file within the Deep
Blue folder:

<asp:Label Runat="server" 
ForeColor="Blue" Font-Size="Large" 
Font-Bold="True" Font-Italic="True" />
<asp:Label Runat="server" SkinID="Red"
ForeColor="Red" Font-Size="Large" 
Font-Bold="True" Font-Italic="True" />

The first skin is the default, and the second skin is a named skin
because it has a SkinID property set to
Red. Open the source for
Default.aspx, find the label you want to make
red, and add the SkinID="Red" attribute, as shown
in the following code snippet:

<asp:Label ID="lblRadioButtonList" 
Runat="server" Text="Radio Button List" 
SkinID="Red"/>

When you log in and set your theme to Dark Blue,
you'll find that the label for the Radio Button List
is red, as shown in Figure 4-41 (really, it is red;
I swear).

4.7.3. Where can I learn more?

For more information, see
my article "Skins
and Themes" on ONDotnet.com (http://www.ondotnet.com). In addition, the
CodeGuru
web site (http://www.codeguru.com) contains an article
by Bill Evjen
titled "Skins and Themes," and the
15 Seconds web site (http://www.15seconds.com) has an article by
Thiru Thangarathinam titled
"Code in Style with ASP.NET
Themes." Microsoft also provides a QuickStart
tutorial on themes and skins at http://beta.asp.net/quickstart/aspnet/.