HTML Source Of a Page pot

displayed. In the case of many events, this page will be the same as the one that issued the original request. However, the Web server also needs to know what other data the user has entered on the page so that when it generates the HTML response, it can preserve these values in the display. (If the Web server only sent back the HTML that composed the original page, any data entered by the user would disappear.) If you look at the HTML source of a page generated by a Web form, you will notice a hidden input field in the form. The example shown previously had this hidden field: <input type="hidden" name="__VIEWSTATE" value="/WEPdDwxNDk0MzA1NzE0O3Q8O2w8aTwxPjs+O2w8bDxpPDE3PjtpPDE5 PjtpP DIxPjtpPDI3PjtpPDMzPjs+O2w8dDxwPHA8bDxDaGVja2VkOz47bDxvPH Q+Oz4+Oz 47Oz47dDxwPHA8bDxDaGVja2VkOz47bDxvPGY+Oz4+Oz47Oz47dDxw PHA8bDxDaGVja2 VkOz47bDxvPGY+Oz4+Oz47Oz47dDx0PDt0PGk8Mz47QDxBbm FseXN0O0Rlc2lnbmVyO0 RldmVsb3Blcjs+O0A8QW5hbHlzdDtEZXNpZ25lcjtE ZXZlbG9wZXI7Pj47Pjs7Pj t0PHA8cDxsPFRleHQ7PjtsPFxlOz4+Oz47Oz47Pj 47Pj47bDxQZW9uQnV0dG9uO1BIQ kJ1dHRvbjtQSEJCdXR0b247VlBCdXR0b247 VlBCdXR0b247UHJlc2lkZW50QnV0dG9uO 1ByZXNpZGVudEJ1dHRvbjs+Pg==" /> This information is the content of the controls, or view state, in an encoded form. It is sent to the Web server whenever any event causes a postback. The Web server will use this information to repopulate the fields on the page when the HTML response is generated. All of this data has an impact on scalability. The more controls you have on a form, the more state information has to be passed between the browser and Web server during the postback processing, and the more events you use, the more frequently this will happen. In general, to reduce network overhead, you should keep your Web forms relatively simple and avoid excessive use of server events, and be selective with view state to avoid sending unnecessary information across the network. You can disable the view state for a control by setting the EnableViewState property of the control to False (the default setting is True). Creating and Using a Theme When you first created the Web site, you defined a style for the form. This style determined the default font and color for controls on the form, and could also be used to specify default values for other attributes, such as the way in which lists are formatted and numbered (click the Lists tab in the Style Builder dialog box if you want to experiment with list formatting). However, a style defined in this way only applies to a single form. Commercial Web sites typically contains tens, or maybe hundreds of forms. Keeping all of these forms consistently formatted can be a time-consuming task (imagine if the company you work for decided to change the font on all of its Web pages, how many forms would you need to update and rebuild). This is where Themes can be very useful. A Theme is a set of properties, styles, and images that you can apply to the controls on a page, or globally across all pages in a Web site. NOTE If you are familiar with cascading style sheets (.css files), then the concept of Themes might be familiar to you. However, there are some differences between cascading style sheets and Themes. In particular, Themes do not cascade in the same way as cascading style sheets, and properties defined in a Theme applied to a control always override any local property values defined for the control. Defining a Theme A Theme comprises a set of skin files located in a named subfolder in the App_Themes folder for a Web site. A skin file is a text file that has the file extension “.skin”. Each skin file specifies the default properties for a particular type of control using syntax very similar to that which is displayed when you view a Web form in the Source View window. For example, the following skin file specifies the default properties for TextBox and Label controls: <asp:TextBox BackColor="Blue" ForeColor="White" Runat="Server" /> <asp:Label BackColor="White" ForeColor="Blue" Runat="Server" Font-Bold="True" /> You can specify many properties of a control in a skin file, but not all of them. For example, you cannot specify a value for the AutoPostBack property. Additionally, you cannot create skin files for every type of control, but most commonly used controls can be configured in this way. Applying a Theme After you have created a set of skin files for a Theme, you can apply the Theme to a page by modifying the @Page attribute that occurs at the start of the page when displayed in the Source View window. For example, if the skin files for a Theme are located in the App_Themes\BlueTheme folder under the Web site, you can apply the Theme to a page like this: <%@Page Theme="BlueTheme" %> If you want to apply the Theme to all pages in the Web site, you can modify the Web.config file and specify the Theme in the pages element, like this: <configuration> <system.web> <pages theme="BlueTheme" /> </system.web> </configuration> If you modify the definition of a Theme, all controls and pages that use the Theme will pick up the changes automatically when they are next displayed. In the final set of exercises in this chapter, you will create a Theme for the Honest John Web site, and apply this Theme to all pages in the Web site. Create a new theme 1. In the Visual Studio 2005 programming environment, open the Honest John Web site if it is not already open. 2. In the Solution Explorer, right-click the Honest John project folder. Point to Add ASP.NET Folder, and then click Theme. A new folder called App_Themes is added to the project, and a sub-folder is created called Theme1. 3. Change the name of the Theme1 folder to HJTheme. 4. In the Solution Explorer, right-click the HJTheme folder and then click Add New Item. The Add New Item dialog box appears displaying the types of file that can be stored in a Themes folder. 5. Click the Skin File template, and type HJ.skin for the name. Click Add. The skin file HJ.skin is added to the HJTheme folder, and the file is displayed in the Code and Text Editor window. 6. Add the following lines to the end of the HJ.skin file in the Code and Text Editor window (this file contains a comment with some very brief instructions): 7. <asp:TextBox BackColor="Red" ForeColor="White" Runat="Server" /> 8. <asp:Label BackColor="White" ForeColor="Red" Runat="Server" Font- Bold="True" /> 9. <asp:RadioButton BackColor="White" ForeColor="Red" Runat="Server"/> 10. <asp:Button BackColor="Red" ForeColor="White" Runat="Server" Font- Bold="True"/> <asp:DropDownList BackColor="Red" ForeColor="White" Runat="Server"/> This simple set of properties displays TextBox, Button, and DropDownListBox controls as white text on a red background, and Label and RadioButton controls as red text on a white background. The text on Label and Button controls is displayed using the bold font version of the current font. IMPORTANT The skin file editor is very basic and does not provide any Intellisense to help you. If you make a mistake in this file, the application will run, but entries in this file might be ignored. When you run the application later, if any of the controls do not appear as expected, ensure you have not mistyped anything in this file. As mentioned previously, there are at least two ways you can apply a Theme to a web form: you can set the @Page attribute for each page, or you can specify the Theme globally across all pages by using an Web configuration file. You are going to use the latter approach in the next exercise. Using this mechanism will cause all new pages that you add to the site to automatically apply the same Theme. Create a Web configuration file and apply the theme 1. In the Solution Explorer, right-click the Honest John project and click Add New Item. The Add New Item dialog box appears displaying the types of file that you can add to a Web site. 2. Click the Web Configuration File template, ensure the name is set to Web.config, and click Add. The file Web.config is added to the project and appears in the Code and Text Editor window. 3. Scroll to the end of the Web.config file, and insert a new line immediately above the </system.web> line. Type the following entry in this new line: <pages theme="HJTheme" /> 4. On the Debug menu, click Start Without Debugging. TIP If Internet Explorer displays a list of files rather than the Web form, close Internet Explorer and return to Visual Studio 2005. In the Solution Explorer, right-click EmployeeForm.aspx and click Set As Start Page. Then run the Web application again. 5. Internet Explorer appears displaying the Web form. Verify that the style of the controls on the form have changed as expected, although any text in the text boxes might be a little hard to read (you will fix this shortly). Close Internet Explorer when you have finished. 6. In Visual Studio 2005, display the HJ.skin file in the Code and Text Editor window. Modify the element defining the appearance of TextBox and DropDownList controls, as follows: 7. <asp:TextBox BackColor="White" ForeColor="Red" Font-Bold="True" Runat="Server" /> 8. <asp:DropDownList BackColor="White" ForeColor="Red" Runat="Server" /> 9. Run the form again. Notice how the style of all the TextBox controls (First Name, Last Name, and Employee Id) and the DropDownList (Role) has changed, and is easier to read. Close Internet Explorer when you have finished. • If you want to continue to the next chapter Keep Visual Studio 2005 running and turn to Chapter 26. • If you want to exit Visual Studio 2005 for now On the File menu, click Exit. If you see a Save dialog box, click Yes.  . controls can be configured in this way. Applying a Theme After you have created a set of skin files for a Theme, you can apply the Theme to a page by modifying the @Page attribute that occurs at. between cascading style sheets and Themes. In particular, Themes do not cascade in the same way as cascading style sheets, and properties defined in a Theme applied to a control always override any. fields on the page when the HTML response is generated. All of this data has an impact on scalability. The more controls you have on a form, the more state information has to be passed between