Lab: Creating the Cookbook | MCAD(s)MCSD Self-Paced Training Kit(c) Developing Web Applications With Microsoft Visual Basic. Net and Microsoft V[. .. ]0-315

Lab: Creating the Cookbook

In this lab, you ll build a single Web form that uses a customized style sheet, provides an enlarged-type style sheet for visually impaired users, and uses XML with XSL transformations to format information. You ll also be encouraged to apply your knowledge of XML to real-world data you re already familiar with.

Estimated lesson time: 30 minutes

Exercise 1: Create and Attach a Style Sheet

Use the skills you learned in Lesson 1 to create your own style sheet based on the default style sheet Visual Studio .NET creates. Because style (and taste) are personal matters, you can make the changes suggested in the following steps, or you can develop your own unique look. When you have finished, your result might look similar to Figure 13-20.

figure 13-20 test web form with styles

Figure 13-20. Test Web form with styles

To create a custom style sheet and attach it to a Web form

Make the following suggested changes to the default style sheet (Styles.css), or choose your own changes:
- Change the default font for all headings to Comic Sans MS.
- Change the default font for body text to Lucida Sans-Serif.
- Add a background image to the page from within the style sheet.
- Change the color of the headings and rule lines to stand out against your chosen background image.

When you have finished modifying the style sheet, attach it to a Web form by adding a link element in the Web form s head element, as shown here in boldface:

<HEAD> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="CODE_LANGUAGE" content="Visual Basic 7.0"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema"  content="http://schemas.microsoft.com/intellisense/ie5">  <LINK REL="stylesheet" TYPE="text/css" HREF="Styles.css"></HEAD>

Add some sample text and headings to the Web form to test the appearance of your style sheet.
View the Web form in the browser, and adjust the style sheet until you re happy with the Web form s appearance.

Exercise 2: Provide Alternative Style Sheets

In this exercise, you ll create an alternative style sheet that displays headings and text in a larger font size, making your Web form readable for users with impaired vision. You ll also add a client-side control that enables the user to switch to the large-type style sheet at run time. When you have finished, your result should look similar to Figure 13-21.

figure 13-21 enlarged-type sample

Figure 13-21. Enlarged-type sample

To create the enlarged-type style sample

Add a new, empty style sheet to your project. Name the file BigType.css.
Cut and paste the contents of the default style sheet (Styles.css) into BigType.css. If you re using Visual C#, you ll have to get the default style sheet from a Visual Basic .NET project and add it to your Visual C# project.
In BigType.css, change the body element s font size to large.
On the Web form created in Exercise 1, add an ID and a media attribute to the link element that attaches the default style sheet to the Web form, as shown here in boldface:
```
<LINK  REL="stylesheet" TYPE="text/css" HREF="Styles.css" media="screen">
```
Add another link element to use the default style sheet for printing, as shown here:
```
<LINK  REL="stylesheet" TYPE="text/css" HREF="Styles.css" media="print">
```

Add a hyperlink with an onclick event to switch between the default style sheet and BigType.css, as shown here:

<a onclick="SwitchSheets()" href="#">Click here </a> to switch between the standard and the enlarged-type version.

Add the following client-side script to switch between style sheets:

VBScript

<script language="vbscript"> ' Switch between default and large-type style sheets. Sub SwitchSheets() If document.all("ScreenStyle").GetAttribute("HREF", 0) = "Styles.css" then document.all("ScreenStyle").SetAttribute "HREF", "BigType.css", 0 else document.all("ScreenStyle").SetAttribute "HREF", "Styles.css", 0 end if End Sub </script>

JScript

<script  language="jscript"> function SwitchSheets() { // Switch between default and large-type style sheets. if (document.all["ScreenStyle"].getAttribute("HREF") == "Styles.css") document.all["ScreenStyle"].setAttribute ("HREF",  "BigType.css", 0); else document.all["ScreenStyle"].setAttribute ("HREF",  "Styles.css", 0); } </script>

Display the Web form in the browser and test switching back and forth between the BigType.css and the default style sheets. Make adjustments to BigType.css to create the best appearance.

Exercise 3: Perform XSL Transformation

In this exercise, you ll add an XML server control to the Web form you created in Exercise 1 and modified in Exercise 2. You ll set the XML control s DocumentSource and TransformSource properties to the sample XML and XSL files used in Lesson 2, which are included on the companion CD. When you have finished, your result should appear as shown in Figure 13-22.

figure 13-22 the cookbook sample

Figure 13-22. The cookbook sample

To perform the sample XSL transformation

Using the same Web form from Exercises 1 and 2, delete the sample text you used to test style sheets. Retain the hyperlink and client-side script you created in Exercise 2.

Add an XML server control after the hyperlink, as shown in the following HTML:

<a onclick="SwitchSheets" href="#">Click here</a> to switch between the standard and the enlarged-type version. <asp:Xml  runat="server" DocumentSource="" TransformSource="" />

Copy the cook.xml and cook.xsl sample files to your project directory.
Set the XML control s DocumentSource property to cook.xml and TransformSource property to cook6.xsl.
Display the Web form in the browser to confirm that the XML transformation works correctly.

Exercise 4: On Your Own

Think about ways to apply XML with XSL transformations to data that you currently present on the Web with HTML. Using XML to label content is a much more conceptual task than using HTML directly to format content, and it takes some getting used to. Perhaps the best way to learn is to try it on your own, using real-world data that you re familiar with, as described in the following steps:

Choose a simple project, such as an order form or an address list, and then create a sample XML file based on that data.
Create an XSL file that contains templates to transform the XML file into HTML.
Create a Web form that uses an XML control to perform the transformation.
As you work, think about the following questions:
- How do you determine the node hierarchy?
- What are the advantages of creating collections within the hierarchy? For example:
```
 <items> <item>Item 1</item> <item>Item 2</item> </items>
```
- How does writing XML leverage your database and object-oriented programming skills?