Microsoft ASP Net 3.5 Step By Step (phần 8) ppt

Chapter 8 A Consistent Look and Feel 181 Master Pages offer signifi cant improvements over earlier versions of classic ASP and ASP.NET for developing a common look and feel among all the pages in your application. Of course, you may use multiple Master Pages in a project, and you may also nest them. A second way to help manage the look and feel of your application is ASP.NET Themes. Themes Master Pages control the general layout of a series of pages within an application. However, there are other elements (those that are subject to change between pages) that you might like to have remain constant. Themes provide a means of applying common styles to the elements on each page in your site. If you’re familiar with Cascading Style Sheets (CSS), you will feel very at home with Themes. The two techniques are similar because through both techniques you may defi ne the visual styles for your Web pages. Themes go a step beyond CSS. You may use Themes to specify styles, graphics, and even CSS fi les within the pages of your applications. When available, you may apply ASP.NET Themes at the application, page, or server control level. Themes are represented as text-based style defi nitions in ASP.NET. ASP.NET already includes a number of Themes straight out of the box. You’ll fi nd these Themes located at C:\WINDOWS\ Microsoft.NET\Framework\vxxxxx\ASP.NETClientFiles\Themes. ASP.NET includes some pre- defi ned Themes (note the “vxxxxx” indicates the current version of the .NET Framework you’re using, most likely “v3.5” at the time this was written). In addition, you may defi ne and use your own Themes. The following exercise shows how to create and use a Theme. Creating and using a Theme 1. Add a new form to the MasterPagesSite project. Name the page UseThemes.aspx. Turn off the Select Master Page check box if it happens to be turned on before you commit to creating the page. 2. Add a Theme folder to your project. Highlight the Web site node in the Solution Explorer. Click the right mouse button and select Add ASP.NET Folder. Select Theme. This will create an App_Themes directory for you. 3. Create a Default Themes folder under the App_Themes folder. Click the right mouse button on the App_Themes folder. Select Add Folder, and then select Theme Folder from the menu. Rename the folder from Theme1 to Default. 4. Add a new style sheet to the Theme1 folder. Click the right mouse button on the Theme1 folder and select Add New Item. Select the Style Sheet template. Name the Style sheet Default.css. 182 Part II Advanced Features 5. Build the style sheet. The default style sheet includes only a body tag. When the style sheet is open in Visual Studio, select Add Style Rule from the Styles menu. You may click the right mouse button on the Elements node to modify the style for the node. For example, if you want to change the style of the <h1> tag, you would click the right mouse button on the Elements node and select Add Style Rule. To add a style for the <h1> tag, select it from the list of elements and move it into the Style Rule Hierarchy by clicking the > button, as shown here. Then click OK. To modify the style, click on the H1 node in the CSS outline page and select Style in the Properties window. Click the “ ” button to activate the Modify Style dialog box: Chapter 8 A Consistent Look and Feel 183 The sample application included with the CD sets the font to Arial Black with an underscore. 6. Now test the Theme by declaring it in the page and by typing a heading with <h1> tags, like so: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UseThemes.aspx.cs" "Theme=Default" trace="false" Inherits="UseThemes" %> <%@ Register Src="Banner.ascx" TagName="Banner" TagPrefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <h1> How does this look? </h1> </div> </form> </body> </html> Here’s how the themed page appears in the browser with the new theme (the <h1> tag set to the new font and set to use the underline in this example): 184 Part II Advanced Features 7. Add another Theme to the project. Name the Theme SeeingRed. That is, create a new Theme folder and add a new style sheet of the same name. Make the <h1> tag use a red color font this time. Then change the Theme used by the page to SeeingRed (you can also set the theme in the Properties window in Visual Studio): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UseThemes.aspx.cs" Theme="SeeingRed" trace="false" Inherits="UseThemes" %> Surf to the page to see the <h1> tag printed in red. This is just a taste of the kinds of things you can do by providing Themes for a page. Once a Theme is defi ned, you may apply it by declaring it as part of the Page declaration or by inter- cepting the PreInit event and changing the Theme property in the page to a valid Theme. Going hand in hand with Themes are Skins. Let’s look at those. Chapter 8 A Consistent Look and Feel 185 Skins Skins complement Master Pages and Themes as a way to manage the style of your Web site. Using Skins is almost like combining WebControl-based controls with CSS. Another way to think of Skins is as a way to set certain properties of a control as a group. For example, you may want to defi ne different coloring schemes for a control such as the TextBox control. The Calendar control is also a good example because it’s so rich. By providing Skins for controls, you can have a number of different appearance options for various controls at your disposal without having to go into detail and manage the control properties one by one. You have actually used Skins already. Many server-side controls already support style templates. For example, when working with the TreeView earlier, you saw that you could apply one of several styles to it. Earlier in this chapter, we looked at applying a set of color attributes to the Menu control when we chose the “classic” style from the AutoFormat control option menu. In this section, we’ll see how Skins work and how to apply them. Skin fi les defi ne specifi c controls and the attributes that apply to them. That is, a .skin fi le contains server-side control declarations. The Skin fi le’s job is to preset the style properties for the control. Skin fi les reside in named Theme folders for an application, accompanied by any necessary CSS fi les. The following exercise illustrates how to create Skins for some controls on your Web site. Create a Skin 1. Create a Skin fi le by clicking the right mouse button on the SeeingRed folder in the App_Theme node on the Solution Explorer and selecting Add New Item. Choose Skin File from the templates. Name the fi le SeeingRed.skin. 2. In the SeeingRed.skin fi le, pre-declare some controls for which you’d like to have default property values set. For example, the following SeeingRed.skin fi le declares default properties for some controls. These controls have their various colors defaulting to assorted shades of red. <asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font-Names="Verdana" /> <asp:button runat="server" borderstyle="Solid" borderwidth="2px" bordercolor="#ff0000" backcolor="#cc0000"/> <asp:CheckBoxList runat=server ForeColor="#ff0000" /> <asp:RadioButtonList runat=server ForeColor="#ff9999" /> 186 Part II Advanced Features 3. Now add those controls for which you’ve pre-declared attributes in the Skin fi le onto the UseThemes.aspx page to see how the SeeingRed.skin fi le applies. The effect in the following graphic shows the red colored controls as a lighter gray. You will no doubt see the effect when running the sample application. The SeeingRed.skin fi le will automatically be applied by declaring the SeeingRed Theme within the page. You may also prescribe different Skins at runtime within the page’s PreInit handler, and you can apply separate Skins to each control. Summary One of the most often requested features for ASP.NET has been to support a common look and feel for a site. The Master Pages feature within ASP.NET pushes this capability to the forefront and makes developing a set of pages with similar aspects a very doable proposition. In addition to Master Pages, ASP.NET Themes represent a way to apply global style attributes to all the pages in your application. ASP.NET also supports specifying default values for specifi c server-side controls through a Skin fi le. Skins offer a fi ner-grained approach to applying styles in a control-centric manner. Chapter 8 A Consistent Look and Feel 187 Chapter 8 Quick Reference To Do This Defi ne a page that will represent the consistent look and feel of a series of pages in a Web site Add a Master Page to the site. Create a page based on the Master Page Check the Select Master Page check box when creating forms for a site. Add elements to the Master Page that will show up in pages based on the Master Page Place elements outside the area represented by the content pane. Add individual elements to content pages Add elements within the content page shown on the page. Create a Theme for a page Add a new Theme folder to the App_Themes folder within your application. Use a Cascading Style Sheet (CSS) to defi ne styles and classes for the Theme. Apply a Theme to a page Set the Theme property within the Page Directive OR Set the Theme property within the page during the page’s PreInit event. Create a Skin Create a text fi le within a Theme folder. Simply make the fi le have a .skin extension. Add control declarations with their properties set to default values. To Do Th i s [...]... which point ASP. NET would cough up a cryptic error message Chapter 9 Configuration 195 Managing Configuration in Later Versions of ASP. NET ASP. NET 2.0 introduced some major improvements to the process of managing ASP. NET applications, and these improvements carry through to the current version of ASP. NET Although you can still type configuration information into the web.config file manually, ASP. NET 2.0 and... Features ASP. NET also supports another way to manage Application Settings It’s the ASP. NET configuration tab for your site when it’s hosted in IIS Configuring ASP. NET from IIS If your site is running from within a virtual directory (through IIS), you may use the features view within IIS to edit configuration information To use this, you need to have your site managed by IIS Although configuring ASP. NET this... Chapter 14—for now it’s a good example to illustrate some of the parameters ASP. NET configuration manages You can see from this example that configuring ASP. NET relies on the ability of the runtime to understand some keywords In this case, the keywords authentication, mode, and Forms tell ASP. NET how to manage authentication ASP. NET must correctly interpret sessionState, mode, SQLServer, cookieless, UseURI,... from the computer hosting the site, it is much more extensive in its ability to manage your ASP. NET application Here’s an exercise to familiarize yourself with the ASP. NET configuration tab in IIS Use IIS to configure ASP. NET 1 Begin by creating a new Web site Call it ConfigORamaIIS Make it an HTTP site managed by IIS (that is, select HTTP in the Location combo box on the page) Run it from your own computer... web.config file directly (as you had to do in the days of ASP. NET 1.x) However, ASP. NET 2.0 and later versions include new configuration tools that make configuring your site a very straightforward proposition We’ll encounter ASP. NET configuration many more times in forthcoming chapters In fact, we’ll visit configuration heavily in the next chapter on ASP. NET security Chapter 9 Quick Reference To Do This View... authenticate Fortunately, ASP. NET includes Forms Authentication, a straightforward means of authenticating clients The Forms Authentication subsystem in ASP. NET 1.0 and 1.1 was a huge improvement from having to write your own authentication subsystem Later versions of ASP. NET include and improve on the Forms Authentication model by adding an Authorization subsystem as well Let’s start by taking a look at... other icons in the ASP. NET Configuration Settings featured in IIS We’ll encounter many of these settings as we go through ASP. NET in the coming chapters The Authentication page is for setting up users and assigning them roles within your application The NET Globalization page manages localization issues The Session State management feature is for managing session state You can tell ASP. NET to store session... HttpHandlers/HttpModules Summary In this chapter, we saw how to manage configuration for a specific ASP. NET application The configuration defaults are found within machine.config and web.config (as stored in the main NET Framework directory) When it comes time for the ASP. NET runtime to apply configuration settings to a specific application, ASP. NET looks for overridden configuration settings within the XML-based web.config The... your various ASP. NET applications, the machine.config comments should be the first place you look for information Configuration Section Handlers At the top of machine.config you’ll see a number of Configuration Section Handlers Each of these handlers understands a specific vocabulary for configuring NET (and ultimately ASP NET) While machine.config controls the settings for the entire machine, ASP. NET applications... chapter on ASP. NET security Chapter 9 Quick Reference To Do This View global configuration files Look in the Windows directory under Microsoft. NET\ Framework\vxxxxx\ config, where “vxxxxx” is the version of NET your ASP. NET site is using Change configuration settings in a specific ASP. NET application Place a web.config file in the application’s directory and modify the settings Change configuration settings for . in ASP. NET. ASP. NET already includes a number of Themes straight out of the box. You’ll fi nd these Themes located at C:WINDOWS Microsoft. NET Frameworkvxxxxx ASP. NETClientFilesThemes. ASP. NET. Understand the way .NET handles confi guration  Apply confi guration settings to ASP. NET applications  Manage ASP. NET confi guration using the ASP. NET Administration tool  Manage ASP. NET confi guration. introduces how ASP. NET manages its confi guration information. It gives a taste of how ASP. NET confi guration works. We’ll revisit ASP. NET confi guration in later chapters. ASP. NET is a feature-rich