Section 4.7. Let Users Personalize Your Site with Themes
4.7. Let Users Personalize Your Site with ThemesMany 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:
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" Skin 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:
4.7.1.1 Create the test siteTo 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 Runat="server" NavigateUrl="~/ProfileInfo.aspx"> Profile Info</asp:HyperLink> </td> <td > <asp:ListBox Runat="server" /> </td> </tr> <tr> <td > <asp:Label Runat="server" Text="ListBox"/> </td> <td > <asp:ListBox 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 Runat="server" Text="Radio Button List"/> </td> <td > <asp:RadioButtonList 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 Runat="server" Text="Calendar"></asp:Label> </td> <td> <asp:Calendar Runat="server" /> </td> <td> <asp:Label Runat="server" Text="TextBox"/> </td> <td> <asp:TextBox 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 skinsThemes 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 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. Figure 4-39. Creating the skin file 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:
At this point your solution should look more or less like Figure 4-40. Figure 4-40. Themes and skins in your project 4.7.1.3 Enable themes and skinsTo 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 themesYou 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 Text="Dark Blue" Runat="server" OnClick="Set_Theme" /> </td> <td> <asp:Button 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" Skin 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 Skin attribute, as shown in the following code snippet: <asp:Label Runat="server" Text="Radio Button List" Skin/> 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). Figure 4-41. A red Radio Button List label 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/. |
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.
EAN: 2147483647
Pages: 95