In the first article in this series I presented a brief introduction to the use of XSL as a means to display XML in HTML browsers. Before continuing, I’d like to clear up a few points which I believe may have been confusing, largely due to a lack of rigorous clarity on my part.
In the preceding article I mentioned that HTML browsers will ignore unrecognized tags and merely display the text content. What I failed to mention is that this is a function of HTML, not of the browsers themselves. In order to see what I was talking about, save the XML file as an HTML file and view it. (Additional weirdness: The most recent versions of IE, Navigator, and Opera will all display such a file as mentioned above, and their displays will be virtually identical; an older version of Navigator will probably display nothing at all.)
I also pointed out that the code examples I provide will not be displayed properly in older browsers. What I should have said is that this code (saved as XML documents) will only be displayed properly in an XML enabled browser, such as IE 5+ or Navigator 6+. As of the publication date of this article, Opera still ignores tags and displays the remainder as a few lines of plain text, and my Netscape Navigator 4.77 insists on using something called “iexplore.exe” to open an XML file.
Continuing where I left off last time, I was pointing out that the code I’d provided only produced a table with two rows. We can build upon that code by using some of the tools that XSLT provides. First of all, take a look at the source file of the complete XML document which contains the data we want to display, part of which is reproduced here:
<?xml version=”1.0″?>
<?xml-stylesheet type=”text/xsl”
href=”deadandgladaboutit.xsl”?>
<band>
<show>
<location>Way Big Stadium</location>
<date>
<year>1983</year>
<month>February</month>
<day>29</day>
</date>
<song>
<title>Sweet Willow</title>
<key>CM</key>
<time>5:47</time>
<coolness>Excellent harmonies</coolness>
</song>
.
.
.
</show>
<show>
.
.
.
</show>
</band>
Now take a look at its XSL companion:
<?xml version=’1.0′?>
<xsl:stylesheet xmlns:xsl=” “>
<xsl:template match=”/”>
<html>
<body>
<table border=”1″>
<xsl:for-each select=”band/show”>
<tr>
<td>
<table border=”1″>
<th><xsl:value-of select=”location”/></th>
<tr>
<td><xsl:value-of select=”date/year”/> –
<xsl:value-of select=”date/month”/>
<xsl:value-of select=”date/day”/></td>
</tr>
</table>
</td>
<td>
<table border=”1″>
<tr>
<th>Title</th>
<th>Key</th>
<th>Time</th>
<th>Really Cool Stuff About This Performance</th>
</tr>
<xsl:for-each select=”song”>
<tr>
<td><xsl:value-of select=”title”/></td>
<td><xsl:value-of select=”key”/></td>
<td><xsl:value-of select=”time”/></td>
<td><xsl:value-of select=”coolness”/></td>
</tr>
</xsl:for-each>
</table>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Comparing this document to the example provided in the previous article, you’ll notice an additional XSLT element being used, <xsl:for-each>. As you might have deduced, this is how XSL implements loops. In this case, due to the structure of the XML document, nested loops are required.
<Very_Important_Part>
In order for this XSL to work in your browser, it needs to refer to the correct XSLT version, which is done in the <xsl:stylesheet> element.
For IE 5+
<xsl:stylesheet xmlns:xsl=”http://www.w3.org/TR/WD-xsl”>
For Navigator 6+
<xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
</Very_Important_Part>
If you save your appropriately-modified file as deadandgladaboutit.xsl in the same directory as the source of the XML document, and view the XML through the proper browser, you should see one large table consisting of four cells, each of which contains another table. These are created by the XSL as it runs through its nested loops, extracting the values of each successive node in the XML. Time now, I think, for a blow-by-blow description of what’s really happening here.
The XSL document must follow the rules for all XML documents, so it begins with the standard XML declaration followed by the root element, in this case <xsl:stylesheet>. The <xsl:template> element uses the attribute-value pair <match=”/”> to define the root element of the XML document as the base from which all content presentation will be outlined within the XSL. I’ll just skip right over the basic HTML tags and move along to the next XSLT element.
<xsl:for-each> is a loop-controller, <select=”band/show”> defines the nodeset of each loop. In this case, <band> is the root element of the XML document and <show> is its only child element, but there are
two instances of <show>; this loop will process each of them successively.
<xsl:value-of> gets the value of a particular node and outputs it as directed. In this case the value of the <location> element is displayed as the header of a table, and the values of the three child elements of <date>
are concatenated and displayed in a cell of the table.
Following the code which displays the header row of the next table is another loop. Remember that we’re still within the first loop, which is using <select=”band/show”> to define its nodeset; so this new loop need only define its nodeset with <select=”song”>, rather than <select=”band/show/song”>. This loop produces a row in the table for each <song> element in the XML.
After running through all <song>s in the first <show>, this loop is terminated and the final touches are put on the first row of the main table. The next row is created by the next iteration of the first loop, which terminates when it has processed all of the <show>s.
So there you have it. As long as the XML document’s structure is preserved, you can add as much information to it (as many <show>s, as many <song>s) as you wish, and no changes to the XSL should be required.
Murdok provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.
