spacer
Home Events News Links People Catalog Admin
spacer
activepages
spacer
other active pages

Questions or
comments:
webmaster


Updated:
2003-06-13

XSLT Primer

A good example of XSLT is in providing XML to HTML translation services when you want to specify how to present an XML document within an HTML presentation (and thus readily presentable by a Web browser). The examples in the book are thorough but I decided to continue with our lightning strike example here so you would have another realistic example of using XSLT. XSLT includes elements you can use to sort, filter, and loop through an XML document. So, in order to show a more robust example, I changed the XML document to include a new strike element so we can include multiple strikes in the same XML document. Note the strike element is an immediate child of the lightning_strike element (the root element). Before, we imagined the lightning strike XML documents were created for each strike. Now, we imagine the documents are created every minute and include all strikes across the country during that minute. The example below includes four strikes that occurred at 2:46 EST on April 26th. Notice again how repetitive XML becomes when we include multiple strike elements (like the animal elements in the book) in the same document. Now, continue below after you've noticed the simple change to our XML document.

The XML Document

<?xml version="1.0" standalone="no"?>

<lightning_strike
   xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
      targetNamespace="http://www.oworld.org/498/xml/ls.xsd" version="1.0">

  <strike>
    <date>2002-04-26</date>
    <time>14:26:33.775</time>
    <location>
       <northing format="UTM">5526631</northing>
       <easting format="UTM">223944</easting>
       <UTM_tile hemisphere="N">7</UTM_tile>
    </location>
    <detail>
       <intensity>8354</intensity>
       <picture filename="04262002_7.jpg"/> 
    </detail>
  </strike>
  <strike>
    <date>2002-04-26</date>
    <time>14:26:39.357</time>
    <location>
       <northing format="UTM">5260434</northing>
       <easting format="UTM">128454</easting>
       <UTM_tile hemisphere="N">7</UTM_tile>
    </location>
    <detail>
       <intensity>7746</intensity>
    </detail>
  </strike>
  <strike>
    <date>2002-04-26</date>
    <time>14:26:14.069</time>
    <location>
       <northing format="UTM">5390434</northing>
       <easting format="UTM">435663</easting>
       <UTM_tile hemisphere="N">8</UTM_tile>
    </location>
    <detail>
       <intensity>1666</intensity>
    </detail>
  </strike>
  <strike>
    <date>2002-04-26</date>
    <time>14:26:55.445</time>
    <location>
       <northing format="UTM">5526437</northing>
       <easting format="UTM">728964</easting>
       <UTM_tile hemisphere="N">9</UTM_tile>
    </location>
    <detail>
       <intensity>6246</intensity>
    </detail>
  </strike>
</lightning_strike>     
You name your XSLT document files with a .xls or .xlst extension. XSLT documents need to be run through an XLST processor (software) in order to generate the HTML file. I made some mistakes putting this example together and the processor provided me with debugging error statements. I'll continue talking about the XLST processor after we've considered the XLST document example that follows here. Note that like XML Schema, XLST follows the rules for XML syntax. You provide the usual XML processing instruction as the first line. You then create an xsl:stylesheet element to validate your XSLT with a valid XML namespace.

You can present any portion of your XML document in an HTML format. If you want to present information from the whole document, you set your xsl:template match attribute to the root "/", otherwise you set the value to the point in your document hierarchy you wish to use. After you start a template, you can start to inject your HTML tags in the flow of the HTML document you wish to generate. When you want to mix in data from your XML document, you use xsl:value-of elements, pointing to the data items you want to present using the hierarchy relative to your template match (in the case of date, the hierarchy refers to the root element, lightning_strike, then its child element (strike), then its child element (date). The date comes from the first strike element found in the document (which is fine since date is the same for all strikes.

Make sure you understand how you can reference an attribute as well using the xsl:attribute element. If you want to reference an attribute in a hierarchy, preface the attribute name with an at-symbol (@). Make sure you look at how the xsl:for-each element lets you loop through the strikes and how the xsl:sort element lets you sort the data as you wish before presenting it in the HTML (in the example, we sort by the lightning strike's intensity). Note which tags require closing tags and which just close with />. Ask questions in class if you don't understand this example. We will review it in class in detail on Monday. Now, after reading the XSLT document, look below it to see how the transform process works.

The XSLT Document

<?xml version="1.0"?>

<!-- Need to use an XSLT processor like
http://users.iclway.co.uk/mhkay/saxon/instant.html -->

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

<xsl:template match="/">
<html><head>
<title>This Hour's Lightning Strikes</title>
</head><body>
<h3>Latest Strike Info for <xsl:value-of 
select="lightning_strike/strike/date"/></h3>

<center>
<img>
<xsl:attribute name="src">
<xsl:value-of select="lightning_strike/strike/detail/picture/@filename"/>
</xsl:attribute>
</img>
</center>

<xsl:for-each select="lightning_strike/strike">
<xsl:sort select="lightning_strike/strike/detail/intensity"
data-type="number"/>

<p>A lightning strike of <xsl:value-of 
select="detail/intensity"/>
joules occured at <xsl:value-of 
select="time"/>.</p>

</xsl:for-each>

</body></html>

</xsl:template>
</xsl:stylesheet>
Supposedly there are lots of XSLT processors out there, but I had a fine experience with the SAXON XLST processor that Elizabeth recommends in the book. If you want to try processing your own XML documents, I recommend you use version 6.2.2 from http://users.iclway.co.uk/mhkay/saxon/instant.html. You download the instant SAXON archive and expand it into the same directory where you have saved your .xslt file. Then, you open up a command prompt in windows (you'll need to find a different processor for the Mac or UNIX) and move to the directory where your project is (on my hard drive, I put it in the C:\bdc\ie498 directory (folder)).

Before you create your HTML document, you should check for any errors in your XML or XSLT by running the processor with output to your command prompt window. To do that, you just run the saxon program with the names of your xml and xslt files (as I did below). Then, when you are happy with the output to the screen, run the saxon command again with the -o switch (and the name of your desired .html file right after the -o).

The Tranform In Action (using SAXON)

C:>cd bdc\ie498
C:\bdc\ie498>saxon ls.xml ls.xslt

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <title>This Hour's Lightning Strikes</title>
   </head>
   <body>
      <h3>Latest Strike Info for 2002-04-26</h3>
      <center><img src="04262002_7.jpg"></center>
      <p>A lightning strike of 8354
         joules occured at 14:26:33.775.
      </p>
      <p>A lightning strike of 7746
         joules occured at 14:26:39.357.
      </p>
      <p>A lightning strike of 6246
         joules occured at 14:26:55.445.
      </p>
      <p>A lightning strike of 1666
         joules occured at 14:26:14.069.
      </p>
   </body>
</html>

C:\bdc\ie498>saxon -o ls.html ls.xml ls.xslt

C:\bdc\ie498>
The created ls.html document is here in case you don't want to create it yourself (the creation is busy work as long as you understand why it is necessary to do so).