Published: Sunday, August 13, 2000
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.
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
