Transforming Attribute Based XML Data into an HTML Table

As you've seen in earlier examples, after creating an XML file from the ADO Recordset, the generated output is quite far from what you'd like to present to users. How about converting this output directly to an HTML table? You can create a generic XSL stylesheet that draws out a simple table for the users when they open the file in their browser. Before we get started, open the Products.xml file in your browser and print it out. Keep the copy handy as we analyze the code of the stylesheet.

The following exercise demonstrates how to create a stylesheet to transform an attribute-based XML document into HTML.

1. Open Notepad and type the following code for the stylesheet.

2. Save the file as AttribToHTML.xsl.

3. Close Notepad.

4. Open the AttribToHTML.xsl file in the browser to test whether it is well-formed.

5. Close the browser. <?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" xmlns:html="http://www.w3.org/TR/REC-html40" >

<xsl:template match="/"> <html> <head>

<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: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, font weight, color, etc.—that you want to apply to a particular text (titles, headers, body, etc.) and assigns to these properties a common name. Thus, in the above stylesheet, two styles are defined. A style named myHSet is applied to the table headings, and the 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 type a period and a class name. Using letters and numbers, you can define any name for your style class. After the class name, type the definition for the class between curly brackets { }. 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 } bracket. A style class can be applied to any HTML tag. The following code fragment defines the style:

<style type="text/css">

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

The example stylesheet AttribToHML.xsl uses a template-based processing. We begin by matching on the root document:

<xsl:template match="/">

The code between the initial and the 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 out-putting the value of the name attribute:

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

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

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.

Now that you are finished with the stylesheet, you need to establish a link between the XML and XSL files. Recall that you've already learned how to do this in the exercise on how to add a reference to a stylesheet in your XML document. Continue with the following steps to finish off this exercise:

6. Save the Products.xml file as ProductsTable.xml (do not use the original file, as it will be used in other examples).

7. Open the ProductsTable.xml file with Notepad.

8. Type the following definition in the first line of this file: <?xml-stylesheet type="text/xsl" href="AttribToHTML.xsl"?>

9. Save the changes made to the file and close Notepad.

10. Open the ProductsTable.xml file in your browser. You should see the data formatted in a table.

3 LTsirq 'J Ivlerheel to o

Edi View Favoiics Toot Hcf left attribute b-ssed XML to III ML - MicroioW Internet Liplmer

ProduttlU PicductNjn

¡SuppfctilD C-ate*ciYlU LIuantttrPeitfiHt |uni«^ntt UnrtsInVfcock ;unitsOnOi4ei |ntonlefL«tl Uiicwrtiiwcd

Edi View Favoiics Toot Hcf

ProduttlU PicductNjn

¡SuppfctilD C-ate*ciYlU LIuantttrPeitfiHt |uni«^ntt UnrtsInVfcock ;unitsOnOi4ei |ntonlefL«tl Uiicwrtiiwcd

r r

|b4gi

IB

so

D

10

Fil»

\2 ICbiiç

[>

¿<-15 oi brttlej

19

17

40

35

FIIM

2 jfsiliïIO'i î^fjp

1

3

3-550 nil

10

13

70

35

Fibc

¡4 IduifArrtMiiCijun

r

2

22

il

0

U

5 IChef Ant-rfli j G'anto |mli

:

2

26 bom

3135

)

D

D TM

¡6 Giui'liiu:

r

'2

13 - 3 or j as

35

130 |C

35 Fila

I? IUjcU HobS Oijpmir

r

f

12 -1 lb Php

»

u j.

ICtlSlfceäj'SlU«

1

3

t3-13 KSiiB

40

le

D Fils:

If KisluKobii Kiii'ü

p.

6

-8.5C0si.ijjs.

«

39

0

3

¡TSHÙ

|lû |rhu=,

G

l2-20Djni j in

33

D

a K.iv

Il iqhkio CAtile

|s

4

lkBfkB-

33

ÏO

Ï0 Fil»

12 Q"K:O >3 uulKgo L i ||Pss»na

j*

.0 - 5C0 g jigs.

*

86

e

D Fibs

¡13 |K.™bu

kg box

i

¿4

D

S i'J„

14

N

4O-JC0aP*as

3Î25

55

D

D Fil«

Figure 17-29:

You can apply a generic stylesheet to an XML document generated by the ADO to display the data in a simple HTML table.

0 0

Post a comment