HandsOn Creating a Generic Stylesheet to Transform an Attribute Centric XML File into HTML

1. Open Notepad and type the stylesheet code as shown below. <?xml version="L0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<title>Using Stylesheet to convert attribute based XML to HTML</title> <style type="text/css"> .myHSet { font-Family:verdana; font-Size: 9px; color:blue; } .myBSet { font-Family:Garamond; font-Size; 8px; } </style> </head>

<table width="100%" border="1">

<xsl:for-each select="xml/s:Schema/s:ElementType/s:AttributeType"> <th class="myHSet">

<xsl:value-of select="@name" /> </th> </xsl:for-each>

<xsl:for-each select="xml/rs:data/z:row"> <tr>

<td class="myBSet" valign="top"><xsl:value-of match="@*"/></td> </xsl:for-each> </tr>

</xsl:for-each> </table> </body> </html>

</xsl:template> </xsl:stylesheet>

The above stylesheet uses the feature known as Cascading Stylesheets (CSS) to format the HTML table. A style comprises different properties — bold, italic, font size and font weight, color, etc. — that you want to apply to a particular text (titles, headers, body, etc.) and assigns a common name to these properties. Thus, in the above stylesheet, two styles are defined. A style named myHSet is applied to the table headings, and a style named myBSet is used for formatting the text in the body of the table. Using styles is very convenient. If you don't like the formatting, you can simply change the style definition and get a new look in no time. Notice that to define a style, you must type a period and a class name. Using letters and numbers, you can define any name for your style class. After the class name, you need to type the definition for the class between curly brackets { }.

Taking Your VBA Programming Skills to the Web

<style type="text/css">

.myHSet { font-Family:Verdana; font-Size:9px; color:blue; } .myBSet { font-Family:Garamond; font-Size:8px; } </style>

Notice that the definition of the class includes the name of the property followed by a colon and the property value. Properties are separated by a semicolon. A semicolon is also placed before the ending curly bracket (}). A style class can be applied to any HTML tag.

The example stylesheet shown above uses template-based processing. The following instruction defines a template for the entire document:

<xsl:template match="/">

The code between the initial and closing tags will be processed for all tags whose names match the value of the attribute "match." In other words, you want the pattern matching that follows to be applied to the entire document (/).

Next, a loop is used to write out the column headings. To do this, you must move through all the AttributeType elements of the root element, outputting the name attribute's value like this:

<xsl:for-each select="xml/s:Schema/s:ElementType/s:AttributeType"> <th class="myHSet"> <xsl:value-of select="@name" /> </th>

An attribute's name is always preceded by @.

Next, another loop runs through all the <z:row> elements representing actual records:

<xsl:for-each select="xml/rs:data/z:row">

All the attributes of any <z:row> element are enumerated:

<td class="myBSet" valign="top"><xsl:value-of match="@*" /></td> </xsl:for-each>

The string @* denotes any attribute. For each attribute found under the <z:row> element, you need to match the attribute name with its corresponding value.

2. Save the above stylesheet as AttribToHTML.xsl. Be sure to type the .xsl extension so the file is not saved as text.

3. Close Notepad.

4. Open the AttribToHTML.xsl file in the browser to test whether it is well formed. If you made any errors while typing the stylesheet code, you must correct the problems before going on to the next section.

5. Close the browser.

Now that you are finished with the stylesheet, you need to link the XML and XSL files. You can do this by adding a reference to a stylesheet in your XML document as shown in Hands-On 29-17.

Part V

0 0

Post a comment