Example 2: Creating a Table of Contents with XSLT - Page 10
November 4, 2002
In this example, we'll create a table of contents as a list of links to our
dinosaurs using XSLT, without changing the source XHTML page. This is an example
of generating new content automatically from existing content – and it's useful
for creating navigation, cross-references, summaries, and so on.
The benefits of doing this in XSLT are:
·
The table of contents will automatically update when the list
of dinosaurs changes. This wouldn't have been the case if we'd just used static
HTML.
·
The table of contents can easily be generated from existing
XHTML. If we were generating such an index with a scripting language like
ASP, we'd probably want to do this in a more complex way by pulling the information
out of a database or separate data file instead.
·
We gain even more bandwidth savings than in the last example.
With our header and footer example above, the header and footer data was only
downloaded once. This time, the HTML for the table of contents isn't downloaded
at all. Instead, the browser only needs to download the rules to create the
table.
·
As in the previous example, no server-side processing is required
to generate the table of contents, reducing load on the server.
How else could we do it?
·
By using a server-side scripting language (such as ASP, PHP,
or JSP) to generate the list of contents from a data source or by parsing
the existing HTML
·
By using JavaScript to manipulate the DOM client-side, and
using document.write to create HTML
Create a new copy of dinosaur_1.xml,
and call it dinosaur_2.xml (or find
it in the code download for this chapter). Change the first line of dinosaur_2.xml to reference
a new stylesheet:
<?xml-stylesheet type="text/xsl" href="contents_2.xsl"
?>
and create contents_2.xsl in the same
folder, using the code below (replacing the first line as described above,
if necessary):
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template
match="/">
<xsl:apply-templates
/>
</xsl:template>
<xsl:template
match="node()|@*">
<xsl:copy>
<xsl:apply-templates
select="node()|@*"/>
</xsl:copy>
</xsl:template>
<xsl:template
match="body">
<body>
<table style="border: solid
thin black">
<tr>
<td><a
href="mammoth.html">Visit the Mammoth zone!</a> - </td>
<td><a
href="play.html">Play Pteranodon Poker</a></td>
</tr>
</table>
<h2>Quick reference</h2>
<ul>
<xsl:for-each
select="h2">
<li>
<a>
<xsl:attribute
name="href">
#<xsl:value-of
select="text()"/>
</xsl:attribute>
<xsl:value-of
select="text()"/>
</a>
</li>
</xsl:for-each>
</ul>
<xsl:apply-templates
/>
<hr />
Copyright 2002 DinosaurOrg.
</body>
</xsl:template>
<xsl:template
match="h2">
<a>
<xsl:attribute
name="name"><xsl:value-of select="text()"/></xsl:attribute>
<h2><xsl:apply-templates/></h2>
</a>
</xsl:template>
</xsl:stylesheet>
Here's how dinosaur_2.xml
should look in a browser:
Specifying Stylesheets for Different Browsers - Page 9
Practical XML for the Web
Hunting for Dinosaurs with <xsl:for-each> - Page 11
|
