15 December 2006

Working with XML - Part 3 - Formatting XML using XSL

XSL is an language for transforming XML into different formats, written in XML using specific elements and attributes. To achieve the transform you simply load you XML and XSL into DOM objects then call transformNode on the XML document passing it your XSL document and it will return the transformed output.

XSL is effectively a procedural programming language. It has conditional and looping logic structures as well as variables and callable "functions". I'd recommend reading XSL @ W3SChools as this explains the basics well.

Recap

In parts one and two we looked at loading a sample bit of XML and how to select certain nodes from it using XPath.

<?xml version="1.0" ?>
<library>

  <authors>
     <author id="12345">
        <name>Charles Dickens</name>
     </author>
     <author id="23456">  
        <name>Rudyard Kipling</name>

     </author>        
  </authors>
  <books>
     <book>
        <title>Great Expectations</title>
        <author>12345</author>

     </book>
     <book>
        <title>The Jungle Book</title>
        <author>23456</author>
     </book>

  </books>
</library>

Using XSL we can convert this XML document into, for example, HTML to send to a web browser. We could also transform it into SQL INSERT statements for adding the data to a database.

HTML Output - Listing Data

Here's an example of how you could output the records from the sample XML:

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

<!-- more stuff to go here -->

</xsl:stylesheet>

We start with the stylesheet element which specifies the XML namespace "xsl" which is used as the prefix for all the special XSL elements.

<xsl:template match="/">
   <html>
      <head>
         <title>Library</title>
      </head>
      <body>
         <h1>Library</h1>
         <xsl:apply-templates select="authors/author" />
      </body>
   </html>
</xsl:template>

Next we have a template element with a match attribute equal to "/". This template matches the root of the XML document so the transform starts here outputting the contents of the element. The apply-templates element then tells the transform to apply the appropriate templates to the nodes returned by the value of the select attribute which you'll notice is XPath.

<xsl:template match="author">
   <h2><xsl:value-of select="name" /> (<xsl:value-of select="@id" />)</h2>
   <p>Books by this author:</p>
   <table>
      <tr>
        <th>Title</th>
      </tr>
      <xsl:apply-templates select="/library/books/book[author = current()/@id]" />
   </table>
</xsl:template>

This template will match the author nodes selected so output will pass here at this point - similar to a function call in a normal programming language. Here value-of elements output the value of the nodes identified in their select attributes, XPath again.

The next apply-templates element selects all the book elements with an author child element whose value is equal to the current author element's id attribute. It uses the current() XSL function to get at the element being tranformed by the template.

<xsl:template match="book">
   <tr>
      <td><xsl:value-of select="title" /></td>
   </tr>
</xsl:template>

Finally the titles of the books are writen out on table rows so what you end up with after calling transformNode is this:

<html>
  <head>
    <title>Library</title>
  </head>
  <body>
    <h1>Library</h2>
    <h2>Charles Dickens (12345)</h2>
    <p>Books by this author:</p>
    <table>
      <tr>
        <th>Title</th>
      </tr>
      <tr>
        <td>Great Expectations</td>
      </tr>
    </table>
    <h2>Rudyard Kipling (23456)</h2>
    <p>Books by this author:</p>
    <table>
      <tr>
        <th>Title</th>
      </tr>
      <tr>
        <td>The Jungle Book</td>
      </tr>
    </table>
  </body>
</html>

Using the output element

XHTML compliant output

XSL has an HTML output mode that you can specify by adding this to the top of your stylesheet, before any template elements:

<xsl:output mode="html" />

However the Microsoft.XMLDOM will mess around with your tags if you use this so if you want your output to be XHTML compliant you need to use the XML output mode instead thusly:

<xsl:output method="xml" omit-xml-declaration="yes" />

Outputting a DOCTYPE

If you want to output a DOCTYPE (which you need to get IE to obey the CSS box model properly) you add a few attributes to your output element:

<xsl:output 
   method="xml" 
   omit-xml-declaration="yes"
   doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
   doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
/>

which will produce:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For more info on the output element visit output @ W3Schools.

Useful XSL snipets

Alternating row classes on tables

<xsl:template match="book">
   <tr>
      <xsl:attribute name="class">
         <xsl:choose>
            <xsl:when test="(position() mod 2) = 0">even</xsl:when>
            <xsl:otherwise>odd</xsl:otherwise>
         </xsl:choose>
      </xsl:attribute>
      <td><xsl:value-of select="title" /></td>
   </tr>
</xsl:template>

Template applicability

You can make nodes of the same type product different output by changing the match attribute of your template:

<xsl:template match="book[author = 12345]">
   <tr>
      <td class="highlight"><xsl:value-of select="title" /></td>
   </tr>
</xsl:template>

<xsl:template match="book">
   <tr>
      <td><xsl:value-of select="title" /></td>
   </tr>
</xsl:template>

Here we're applying a highlight class to book rows by author 12345.

Links