ASP.NET 4 Unleased - p 30 docx

ptg
264
CHAPTER 5 Designing Websites with Master Pages
case “Dynamic2”:
Profile.MasterPageFile = “Dynamic2.master”;
break;
}
}
MasterPageFile = Profile.MasterPageFile;
}
</script>
<asp:Content
ID=”Content1”
ContentPlaceHolderID=”ContentPlaceHolder1”
Runat=”Server”>
Select a Master Page:
<ul class=”selectMaster”>
<li>
<a href=”DynamicContent.aspx?master=Dynamic1”>Dynamic Master 1</a>
</li>
<li>
<a href=”DynamicContent.aspx?master=Dynamic2”>Dynamic Master 2</a>
</li>
</ul>
</asp:Content>
The page in Listing 5.20 contains two links. Both links include a query string parameter
named master, which represents the name of a Master Page. When you click the first link,
the Dynamic1.master Master Page loads (see Figure 5.7) and when you click the second
link, the Dynamic2.master Master Page loads (see Figure 5.8).
The page in Listing 5.20 includes a Page_PreInit() event handler. This handler grabs the
value of the master query string parameter and assigns the value of this parameter to a

Profile property. Next, the value of the Profile property is assigned to the page’s
MasterPageFile property. Assigning a value to the MasterPageFile property causes a
Master Page to be dynamically loaded.
From the Library of Wow! eBook
ptg
265
Loading Master Pages Dynamically
5
FIGURE 5.7 Displaying the Dynamic1 Master Page.
FIGURE 5.8 Displaying the Dynamic2 Master Page.
From the Library of Wow! eBook
ptg
266
CHAPTER 5 Designing Websites with Master Pages
Because the name of the Master Page is assigned to a Profile property, the selected Master
Page loads for a user even if the user returns to the website many years in the future. The
Profile object automatically persists the values of its properties for a user across multiple
visits to a website. The Profile is defined in the web configuration file contained in
Listing 5.21.
LISTING 5.21 Web.Config
<?xml version=”1.0”?>
<configuration>
<system.web>
<profile>
<properties>
<add
name=”MasterPageFile”
defaultValue=”Dynamic1.master” />
</properties>
</profile>

</system.web>
</configuration>
Loading Master Pages Dynamically for Multiple Content Pages
In the previous section, you learned how to load a Master Page dynamically for a single
page in a website. However, what if you need to load a Master Page dynamically for every
content page in a website?
The easiest way to apply the same logic to multiple content pages is to create a new
base Page class. The file in Listing 5.22 contains a new base Page class named
DynamicMasterPage.
NOTE
Add the file in Listing 5.22 to your application’s App_Code folder.
LISTING 5.22 DynamicMasterPage.cs
using System;
using System.Web.UI;
using System.Web.Profile;
From the Library of Wow! eBook
ptg
267
Loading Master Pages Dynamically
5
public class DynamicMasterPage : Page
{
protected override void OnPreInit(EventArgs e)
{
this.MasterPageFile = (string)Context.Profile[“MasterPageFile”];
base.OnPreInit(e);
}
}
The class in Listing 5.22 inherits from the Page class. However, it overrides the base Page
class’s OnPreInit() method and adds the logic for loading a Master Page dynamically.

After you create a new base Page class, you need to register it in the web configuration file.
The web configuration file in Listing 5.23 contains the necessary settings.
LISTING 5.23 Web.config
<?xml version=”1.0”?>
<configuration>
<system.web>
<pages pageBaseType=”DynamicMasterPage” />
<profile>
<properties>
<add
name=”MasterPageFile”
defaultValue=”Dynamic1.master” />
</properties>
</profile>
</system.web>
</configuration>
After you register the DynamicMasterPage class as the base Page class, every page in your
application automatically inherits from the new base class. Every page inherits the new
OnPreInit() method, and every page loads a Master Page dynamically.
From the Library of Wow! eBook
ptg
268
CHAPTER 5 Designing Websites with Master Pages
Summary
In this chapter, you learned how to share the same content among multiple pages in an
application by taking advantage of Master Pages. In the first section, you learned how to
create a Master Page and apply it to multiple content pages. You also learned how to nest
Master Pages and how to register a Master Page in the web configuration file.
The next section explored various techniques of modifying a Master Page from a particular
content page. You learned how to use the Title attribute, use the Page.Header property,

expose properties in a Master Page, and use the FindControl() method.
Finally, you learned how you can dynamically load different Master Pages and associate a
particular Master Page with a particular content page at runtime. You learned how you can
save a user’s Master Page preference by using the Profile object.
From the Library of Wow! eBook
ptg
CHAPTER 6
Designing Websites
with Themes
IN THIS CHAPTER
. Creating Themes
. Adding Skins to Themes
. Adding Cascading Style Sheets
to Themes
. Creating Global Themes
. Applying Themes Dynamically
. Summary
An ASP.NET Theme enables you to apply a consistent style
to the pages in your website. You can use a Theme to
control the appearance of both the HTML elements and
ASP.NET controls that appear in a page.
Themes are different than Master Pages. A Master Page
enables you to share content across multiple pages in a
website. A Theme, on the other hand, enables you to
control the appearance of the content.
In this chapter, you learn how to create and apply ASP.NET
Themes. First, you learn how to create Skins, which enable
you to modify the properties of an ASP.NET control that
have an effect on its appearance. You learn how to create
both Default and Named Skins.

Next, you learn how to format both HTML elements and
ASP.NET controls by adding Cascading Style Sheets (CSS) to
a Theme, which enable you to control the appearance and
layout of pages in a website in a standards-compliant
manner.
You also learn how you can create Global Themes, which
can be used by multiple applications located on the same
server. You learn how to use Global Themes with both file
systems and HTTP-based websites.
Finally, you learn how to load Themes and Skins dynami-
cally at runtime. You build a page that each user of a
website can customize by skinning.
From the Library of Wow! eBook
ptg
270
CHAPTER 6 Designing Websites with Themes
Creating Themes
You create a Theme by adding a new folder to a special folder in your application named
App_Themes. Each folder that you add to the App_Themes folder represents a different
Theme.
If the App_Themes folder doesn’t exist in your application, you can create it. It must be
located in the root of your application.
VISUAL WEB DEVELOPER NOTE
When using Visual Web Developer, you can create a new Theme folder by right-clicking
the name of your project in the Solution Explorer window and selecting Add Folder,
Theme Folder.
A Theme folder can contain a variety of different types of files, including images and text
files. You also can organize the contents of a Theme folder by adding multiple subfolders
to a Theme folder.
Following are the most important types of files in a Theme folder:

. Skin Files
. Cascading Style Sheet Files
In the following sections, you learn how to add both Skin files and CSS files to a Theme.
WARNING
Be careful about how you name your Theme (the folder name). The contents of a
Theme folder are automatically compiled in the background into a new class. Don’t
name a Theme with a class name that conflicts with an existing class name in your
project.
Adding Skins to Themes
A Theme can contain one or more Skin files. A Skin enables you to modify any of the
properties of an ASP.NET control that have an effect on its appearance.
For example, imagine that you decide that you want every TextBox control in your web
application to appear with a yellow background color and a dotted border. If you add the
file in Listing 6.1 to the Simple Theme (the App_Themes\Simple folder), you can modify
the appearance of all TextBox controls in all pages that use the Simple Theme.
From the Library of Wow! eBook
ptg
271
Adding Skins to Themes
LISTING 6.1 Simple\TextBox.skin
<asp:TextBox
BackColor=”Yellow”
BorderStyle=”Dotted”
Runat=”Server” />
The Skin file in Listing 6.1 is named TextBox.skin. You can name a Skin file anything you
want. I recommend following a naming convention in which you name the Skin file after
the name of the control that the Skin modifies.
A Theme folder can contain a single Skin file that contains Skins for hundreds of controls.
Alternatively, a Theme can contain hundreds of Skin files, each of which contains a single
Skin. It doesn’t matter how you organize your Skins into files because everything in a

Theme folder eventually gets compiled into one Theme class.
The Skin file in Listing 6.1 contains a declaration of a TextBox control. The TextBox
control includes a BackColor property set to the value Yellow and a BorderStyle property
set to the value Dotted.
The TextBox control includes a Runat=”Server” attribute, but it does not include an ID
attribute. You must always include a Runat attribute, but you can never include the ID
attribute when declaring a control in a Skin.
NOTE
You can’t cr eate a Ski n tha t app lies to the proper tie s of a User Control. However, you
can skin the controls contained inside a User Control.
The Skin is applied to every page to which the Simple Theme is applied. For example, the
page in Listing 6.2 uses the Simple Theme.
LISTING 6.2 ShowSkin.aspx
<%@ Page Language=”C#” Theme=”Simple” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<html xmlns=” >
<head runat=”server”>
<title>Show Skin</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:TextBox
6
From the Library of Wow! eBook
ptg
272
CHAPTER 6 Designing Websites with Themes
Runat=”server” />

</div>
</form>
</body>
</html>
The page in Listing 6.2 includes a Theme attribute in its <%@ Page %> directive. This
attribute causes the Simple Theme to be applied to the page.
When you open the page in Listing 6.2, the Label control appears with a yellow back-
ground color and dotted border. This is the background color and border specified by the
Theme (see Figure 6.1).
Only certain control properties are “themeable.” In other words, you can create a Skin file
that modifies only certain properties of a control. In general, you can use a Skin to modify
properties that have an effect on a control’s appearance but not its behavior. For example,
you can modify the BackColor property of a TextBox control but not its AutoPostBack
property.
NOTE
By default, all control properties are themeable (can be modified in a Skin file).
However, certain control properties are decorated with the Themeable(False)
attribute, which disables theming.
FIGURE 6.1 Using a TextBox Skin.
From the Library of Wow! eBook
ptg
273
Adding Skins to Themes
6
Creating Named Skins
In the previous section, we created something called a Default Skin. A Default Skin is
applied to every instance of a control of a certain type. For example, a Default Skin is
applied to every instance of a TextBox control.
You also have the option of creating a Named Skin. When you create a Named Skin, you
can decide when you want to apply the Skin. For example, you might want required fields

in a form to appear with a red border. In that case, you can create a Named Skin and
apply the Skin to only particular TextBox controls.
The Skin in Listing 6.3 contains both a Default Skin and a Named Skin for a TextBox
control.
LISTING 6.3 Simple2\TextBox.skin
<asp:TextBox
SkinID=”DashedTextBox”
BorderStyle=”Dashed”
BorderWidth=”5px”
Runat=”Server” />
<asp:TextBox
BorderStyle=”Double”
BorderWidth=”5px”
Runat=”Server” />
The first TextBox in Listing 6.3 is an example of a Named Skin and includes a SkinID
property. The SkinID property represents the name of the Named Skin. You use the value
of this property when applying the Skin in a page.
The file in Listing 6.3 also includes a Default Skin for a TextBox control. The Default Skin
does not include a SkinID property. If a TextBox control in a page is not associated with a
Named Skin, the Default Skin is applied to the TextBox.
A Theme can contain only one Default Skin for each type of control. However, a Theme can
contain as many Named Skins as you want. Each Named Skin must have a unique name.
The page in Listing 6.4 contains two TextBox controls. The first TextBox control includes a
SkinID attribute. This attribute causes the Named Skin to be applied to the control. The
second TextBox, on the other hand, does not include a SkinID property. The Default Skin
is applied to the second TextBox control.
From the Library of Wow! eBook