Next / Previous / Contents / TCC Help System / NM Tech homepage

2. A brief example

XSLT is not like a programming language: it is not sequentially executed. Instead, an XSLT script is a specification of how the output looks as a function of input. The basic unit is the template; a template usually defines how one particular type of XML tag is to be translated.

At the Tech Computer Center, we have installed a Unix program called xsltproc that will process an XSLT script, transforming a given XML file into an output file in either HTML or XML. See the section below on xsltproc.

Here is a small example XML file that describes hiking trails inside a park:

<!DOCTYPE park SYSTEM "trails.dtd">
<park name="Lincoln Natural Forest">
  <trail dist="3400" climb="medium">Canyon Trail</trail>
  <trail climb="easy" dist="1200">Pickle Madden Trail</trail>
</park>

The root element is <park>. It contains <trail> elements, each describing one hiking trail. We want to translate this to HTML that looks like this:

    <html>
      <head>
        <title>Local Hiking Trails</title>
      </head>
      <body>
        <ul>
          <li>Canyon Trail: 3400 feet, climb medium</li>
          <li>Pickle Madden Trail: 1200 feet, climb easy</li>
        </ul>
      </body>
    </html>

Here is an XSLT script that does it:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>

<!-- This template processes the root node ("/") -->
<xsl:template match="/">
  <!-- Tags with no xsl: prefix are copied to the output -->
  <html>
    <head>
      <title>Local Hiking Trails</title> 
    </head>
    <body>
      <ul>
        <!-- Tags that start with xsl: are instructions on how
         !   to translate the document.  This one says,
         !   translate all the <trail> elements using the
         !   appropriate template (below).
         !-->
        <xsl:apply-templates select="park/trail"/>
      </ul>
    </body>
  </html>
</xsl:template>
  
<!-- This template is used to translate the <trail> elements.
 !-->
<xsl:template match="trail">
  <li> <!-- Start a new list item -->
    <!-- Output the text inside the <trail> element-->
    <xsl:value-of select="."/>
    <!-- Output a colon and a space -->
    <xsl:text>: </xsl:text>
    <!-- The next tag outputs the value of the trail element's
     !   "dist=" attribute.
     !-->
    <xsl:value-of select="@dist"/>
    <xsl:text> feet, climb </xsl:text>
    <xsl:value-of select="@climb"/>
  </li> <!-- End of the list item -->
</xsl:template>

</xsl:stylesheet>

The first line identifies the file as XML:

    <?xml version="1.0"?>

The next tag identifies the file as an XSL stylesheet, and gives the URL of the XSLT standard:

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

The next line is an XSLT tag stating that the output should be expressed in HTML and not in XML:

    <xsl:output method="html"/>

The rest of the file consists of two templates. The first template has the attribute match="/", which means that the template applies to the root of the document. The "/" part is an expression in the XPath language, described in the XPath section below, that selects the root of the document.

The first thing inside this root template is a series of HTML tags like <html>, <head>, and so on. Because these tag names don't start with xsl:, they are copied directly to the HTML output file. Note the <ul> element that wraps the whole page content in a bullet list; the <li> elements inside it will be added elsewhere.

The body of the HTML page, inside the <body> element, is created by this line:

    <xsl:apply-templates select="park/trail"/>

This tag instructs the XSLT processor to go off and find a template that applies to the <trail> elements inside the <park> at the document's top level. The results of applying that template are inserted at this point in the output file.

After the remainder of the root template, we find the beginning of the second template. This template is used to translate <trail> elements:

    <xsl:template match="trail">

The match="trail" attribute uses XPath to select <trail> nodes. As with the other template, the tags inside this template that don't start with xsl: are copied to the HTML output file.

The first thing inside this template is the <li> opening tag that will surround the content for this line and make it a bullet in the <ul> bullet list.

The next thing we want to add to the HTML page is the name of the trail. In the XML input, the trail name is the text between the <trail> and </trail> tags. The XPath expression for the content of a node is ".", and the <xsl:value-of> tag is used to insert that content into the output file:

    <xsl:value-of select="."/>

The next XSLT element outputs a colon and a space to the HTML page we are building:

    <xsl:text>: </xsl:text>

To output the value of the dist="..." attribute, we again use <xsl:value-of>. This time the XPath expression selects an attribute of the context node (which is <trail> inside this template) by using the @ operator:

    <xsl:value-of select="@dist"/>

This example will give you the general flavor of XSLT. After covering the XPath expression language used in XSLT (and in other XML-based tools), we'll move on to the actual XSLT tags.