Home arrow XML arrow Page 4 - XSL Basics (part 1)

Test Drive - XML

With a sound foundation in XML theory behind you, it's now time to address the other half of the jigsaw - actually converting all that marked-up data into something useful. This first article in a two-part series examines the need, rationale and basic concepts of XSLT, the Extensible Stylesheet Language for Transformations, with sample code and examples.

  1. XSL Basics (part 1)
  2. A Quick History Lesson
  3. Up A Tree
  4. Test Drive
  5. An Evening At The Moulin Rouge
  6. Little Black Book
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 12
August 15, 2001

print this article


In order to see XSLT in action, let's build a simple XML file and combine it with an XSLT stylesheet to output some HTML.

Here's a simple XML document,

<?xml version="1.0"?> <me> <name>John Doe</name> <address>94, Main Street, Nowheresville 16463, XY</address> <tel>738 2838</tel> <email>johndoe@black.hole.com</email> <url>http://www.unknown_and_unsung.com/</url> </me>

which I would like to convert into the following HTML document.

<html> <head></head> <body> <h1>Contact information for <b>John Doe</b></h1> <h2>Mailing address</h2> 94, Main Street, Nowheresville 16463, XY <h2>Phone:</h2> 738 2838 <h2>Email adress:</h2> johndoe@black.hole.com <h2>Web site URL:</h2> http://www.unknown_and_unsung.com/ </body> </html>

Here's the stylesheet to accomplish the transformation:

<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> </head> <body> <h1>Contact information for <b><xsl:value-of select="me/name" /></b></h1> <h2>Mailing address:</h2> <xsl:value-of select="me/address" /> <h2>Phone:</h2> <xsl:value-of select="me/tel" /> <h2>Email address:</h2> <xsl:value-of select="me/email" /> <h2>Web site URL:</h2> <xsl:value-of select="me/url" /> </body> </html> </xsl:template> </xsl:stylesheet>

As you can see, an XSLT stylesheet is actually nothing more than a well-formed XML document. It even begins with the standard XML document prolog, which specifies the XML version and document character set.

<?xml version="1.0"?>

This is followed by the standard XSLT heading, which includes a namespace declaration.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

This namespace declaration tells the parser that elements specific to XSLT will be declared with the xsl: prefix; this is necessary both to avoid clashes with user-defined element names, and to allow the parser to distinguish between XSLT instructions and non-XSLT elements. Elements without the xsl: prefix will be treated as literal data and moved to the result tree as is.

An XSLT stylesheet may include or import other stylesheets; however, this inclusion must happen at the top level of the XSLT document itself, as demonstrated below:

<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:import href="beta.xsl" /> <xsl:include href="alpha.xsl" /> <xsl:template match="/"> ... </xsl:template> </xsl:stylesheet>

Note that while included template rules are treated as equivalent to the rules in the importing stylesheet, imported template rules are treated as having lower priority than the rules in the importing stylesheet. Imports must precede includes in the stylesheet definition.

Next comes the template rule, which first sets up the pattern to be matched (using an XPath expression),

<xsl:template match="/"> ... </xsl:template>

and then specifies the structure of the result tree when a match is found.

<xsl:template match="/"> <html> <head> </head> <body> <h1>Contact information for <b><xsl:value-of select="me/name" /></b></h1> <h2>Mailing address:</h2> <xsl:value-of select="me/address" /> <h2>Phone:</h2> <xsl:value-of select="me/tel" /> <h2>Email address:</h2> <xsl:value-of select="me/email" /> <h2>Web site URL:</h2> <xsl:value-of select="me/url" /> </body> </html> </xsl:template>


<xsl:value-of />

instruction is used to display the value of a particular element with the XML source tree, and is one of the most common XSLT instructions you'll see in a stylesheet.

It should be noted at this point that XSLT template rules rely heavily on XPath expressions and location paths to identify which areas of the document to match. In case you're not familiar with XPath, you should take a look at our XPath tutorial at http://www.devshed.com/Client_Side/XML/XPath/ before proceeding.

Once the stylesheet is ready, it needs to be hooked up with an XML document; this can be accomplished by adding a PI to the XML document which references the stylesheet, as follows:

<?xml:stylesheet type="text/xsl" href="mystyle.xsl"?>

Now that both data and stylesheet are ready, it's time to apply the transformation. A variety of tools are available to do this for you - my personal favourites are Sablotron, at http://www.gingerall.com/ and Saxon, at http://sourceforge.net/projects/saxon/, although you might also want to check out Xalan, at http://xml.apache.org/xalan-c/ or the software page at http://www.oasis-open.org/cover/xslSoftware.html. For those of you who don't like command-line tools, Microsoft Internet Explorer 5.5 comes with a built-in MSXML parser which can also handle stylesheet transformations - download the latest version from http://msdn.microsoft.com/xml/default.asp, and check out http://www.netcrucible.com/xslt/msxml-faq.htm if you have trouble getting it up and running.

Note that some XSLT processors, like Sablotron for Windows, balk at the

<?xml:stylesheet type="text/xsl" href="mystyle.xsl"?>

PI, and prefer that you specify the stylesheet on the command line itself.

Here's the result of the transformation:

<html><head></head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><body><h1>Contact information for <b>John Doe</b></h1><h2>Mailing address:</h2>94, Main Street, Nowheresville 16463, XY<h2>Phone:</h2>738 2838<h2>Email address:</h2>johndoe@black.hole.com<h2>Web site URL:</h2>http://www.unknown_and_unsung.com/</body></html>

>>> More XML Articles          >>> More By icarus, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates


Dev Shed Tutorial Topics: