Using XSL Stylesheets to Translate XML into HTML

By Arno Jansen

This is an explanation of using XSL stylesheets to translate XML into HTML. It is part of another article I wrote: Online Content Creation using ASP, XML and XSL. Here's the situation: I have an XML file and I want to represent the data from that file in two different ways in HTML. I use an ASP page that loads the XML file with either one of the stylesheets. As said, I created two stylesheets, one for presenting the XML data into a viewable HTML file and one to translate it to an HTML form to let surfers edit the contents.

- continued -

For this article I will use the memo-XML file. It has a memo structure which contains a FROM ,TO a SUBJECT line and the MESSAGE. The XML file for this structure looks like this:

<?xml version="1.0"?> <memo> <from>Arno Jansen</from> <to>XML developers</to> <subject>Small XML example</subject> <message> This is a small XML example on using ASP in combination with XML and XSL. </message> </memo>

Now that we know how the data is modelled, let's have a look at the XSL stylesheets. First the one for viewing the content. First of all a standard header to indicate that we are dealing with a stylesheet:

<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" xmlns="http://www.w3.org/TR/REC-html40" result-ns="">

This is just standard, but after this point we create our own stuff. When an XML document is parsed by an XML parser, its contents are put in a tree structure similar to that of a filesystem on a computer. In an XML tree there is a root element similar to the rootdirectory on a filesystem, which can be addressed by "/". The root element of an XML file is basically the file itself. To select this rootnode from the XML tree in a stylesheet we create a pattern to select the root node. We can do that by putting <xsl:template match="/"> in our stylesheet. Keep in mind that we need to close the tag also by putting </xsl:template> in the stylesheet.

Now that we have selected the root node we have can do something with it. I do not do anything special with it but processing all childnodes by putting <xsl:apply-templates/> between the opening and closing tag. So this is what the template for the rootnode looks like:

<xsl:template match="/"> <xsl:apply-templates /> </xsl:template>

The apply templates processes all childnodes and as we saw in the XML file the first childnode is the <MEMO> tag. Because we want HTML output, we can output HTML header information when we find this tag:

<xsl:template match="memo"> <html> <head> <title>XML/XSL memo example by Arno Jansen</title> </head> <body> <xsl:apply-templates /> </body> </html> </xsl:template>

In the template we set the title for the page and write the HTML page's header and footer. Between the <BODY> and </BODY> tag, we tell the stylesheet to process its childnodes again. The next tag the XML files shows us is the <FROM> tag, which indicates who the memo is coming from. If the tag is found we want to output the word from: in bold, followed by the value that is between the <FROM> and </FROM> tag. We accomplish that using this template:

<xsl:template match="from"> <B> From: </B> <xsl:value-of select="."/> <br/> </xsl:template>

A new tag is found in this template, the <xsl:value-of> tag. This tag selects the value of a node in the document tree. It uses the select attribute to indicate which nodevalue should be picked. In this case we want to get the value of the current node (the FROM tag) to be inserted, so we select the dot (.) to select the current node. Again, this is similar to a filesystem where the . in the DIR command indicates the current directory. (Similar to this, two dots (..) indicate an upper level in the tree structure). Because we know that the FROM tag has no sub tags (thus no child nodes), we do not have to add the <xsl:apply-templates/> tag to this template.

In Part 2 we'll look at creating the actual XSL stylesheet that will be responsible for rendering the HTML from the XML data!

Read Part 2