It introduces XSLT, going through the basics of using it to transform XML on the client-side, by way of easy-to-follow tutorial examples (we have included the first three examples here). Chapter 6 of the book takes client-side XSLT to a more advanced level, and Chapters 8-11 include coverage of server-side XSLT usage.
This sample is taken from Chapter 5 "Introduction to XSLT"of the glasshaus title "Practical XML for the Web".
Starting from the top of our stylesheet:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
specifies two properties of the stylesheet:
· The version of XSLT that the stylesheet conforms to
· The XML namespace for any tags in the stylesheet that begin with "xsl:"
Note that the equivalent in XSL-WD (for IE 5 and 5.5) would
be:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
A browser will only attempt to apply a stylesheet if the header of the stylesheet declares that it uses a namespace that the browser understands. The namespace URL isn't actually loaded by your browser it's just a check to ensure that when you say xsl, you're referring to the same thing as the browser.
As we described earlier, IE 5.0 and 5.5 use XSL-WD, while IE 6.0, Mozilla, and Netscape 6+ use XSLT 1.0. Therefore, our stylesheet needs to specify which one it's using. Even though the templates that we're using will work in both XSL-WD and XSLT 1.0, there's no way to tell a browser this instead, we need to have two separate stylesheets if we want to support both situations.
IE 6.0 is a slight anomaly here it understands both XSL-WD and XSLT 1.0, and chooses which one to use based on the namespace supplied to it. It is better to use XSLT 1.0 if developing for IE 6 (it has a lot more functionality as we will see in the next chapter), but you might have to use XSL-WD for backwards compatibility.
For the moment, use whichever namespace is appropriate for the browser you're using. In a moment, we'll see how to automatically specify an appropriate stylesheet in the XML. Note that our stylesheet is itself an XML document, and must be well-formed.
The next three lines of our stylesheet also relate to IE 5 and IE 5.5. Because these browsers use XSL-WD rather than XSLT 1.0, they do not apply transformation templates by default. To put it another way, we could define all kinds of interesting transformations in our stylesheets, and IE 5 and 5.5 would happily ignore them. We need to tell IE 5 and IE 5.5 to look for template transformations, starting at the very root of our XML document structure, and apply any that they find:
<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>
Browsers that correctly support XSLT 1.0 do this by default as a built-in
rule, and so adding this code into our stylesheet ensures that both types
of browser perform XSLT transformations by default. You'll see these three
lines of code at the start of all stylesheets in this chapter to ensure compatibility
with IE 5 and IE 5.5. For more information on this and other built-in rules
in XSLT 1.0, see http://www.w3.org/TR/xslt#built-in-rule.
Now we've made sure that transformations will actually happen, we begin defining the transformations themselves. Further down the stylesheet are some lines that perform a template transformation on the <body> element of dinosaur_1.xml:
<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>
<xsl:apply-templates />
<hr/>
Copyright 2002 DinosaurOrg.
</body>
</xsl:template>
The first line of this section tells the XSLT processor to search through the XML document until it finds the opening tag of a <body> element, and then perform a transformation on the contents of this <body> element (everything from <body> to </body>). It's called xsl:template because its content defines a template for how to transform a <body> element.
The next seven lines are the start of this < body> element template. These lines of HTML are added in to the transformed page before the content of the original <body> element. The template does not do anything with the matched <body> tag itself, and so we insert a < body> tag ourselves in the template.
The start of dinosaur_1.xml is transformed from
<body>
...
to
<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>
...
Our header is successfully added!
George Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.
George is also the founder of Wappler.io - the most Advanced Web & App Builder
Comments
Be the first to write a comment
You must me logged in to write a comment.