TUTORIALS
C, C++
Win32
Java
Visual Basic
MFC
DCOM
Networking
C#
Perl
HTML
XML
ASP
PHP
Javascript
Other

DOWNLOADS
ITCLib
SourceVizor meets the notification, reporting, and admin needs of teams using Microsoft Visual SourceSafe.
Free 30-day trial!

by Jeff Volkheimer

Comment on this article

Most downloads under 500KB

In short, XSL (Extensible Stylesheet Language) and XSLT (Extensible Stylesheet Language Transformations) are used to transform an XML document into another XML document, such as transforming an XML document into an HTML document.

One major difference between the two is that XSLT is designed to be used as part of XSL, but may be used independently. From the W3C working draft, “XSL specifies the styling of an XML document by using XSLT to describe how the document is transformed into another XML document that uses the formatting vocabulary.” The easiest way to think about the difference between XSL and XSLT is the following: XSL specifies the styling (i.e. how the data is actually displayed) and representation (i.e. is the data changed?) of the actual data contained within the XML document, while XSLT transforms that data tree, which in essence means changing one XML tree to another. Our examples will focus primarily on XSLT, since it is the easiest to pick up and most commonly used.

The general term “XSL” is usually used to mean a Stylesheet language that is essentially composed of (or “uses”) three separate languages: XSLT, XPath, and XSL Formatting Objects. XSL and XSLT work by applying transformations to parts of the XML matching the XPath definition, if they exist. XSL Formatting Objects is then used to format the XSLT output in a way that is suitable for display. Due to the introductory nature of this article, we will not be covering XPath or XSL Formatting Objects.

Transformations are usually applied to XML documents in one of three ways. First, the transformation may take place client-side, whereby both the XML document to be transformed and the template doing the transforming are sent to the client. The client then applies the template and displays the resultant Stylesheet. Next, the transformation may take place server-side, whereby the template is applied before the data is sent to the client and only the resultant Stylesheet is sent and displayed. Finally, some third party software transforms the XML and both client and server only see the transformed document.

All of the following examples do not necessarily conform to the W3C standards. Not many browsers are XSL compatible, so we are using IE 5.0 as our base browser. Some of the following examples may not appear as they should if used in a different browser…to apply these examples in the browser of choice, check the homepage of your browser to determine what XML and Stylesheet features your browser supports.

So, you have all your data in a nice, neat, and sensible XML format. Perhaps you’ve exported your address book into XML…but what do you do with it? Well, one option is to display it on the web so you can access your address book from your homepage. How do you get that XML data into HTML without breaking your hand off cutting and pasting? XSLT of course! Let’s use the following XML as our “address book”:

<?xml version=”1.0”?>
<?xml-stylesheet type="text/xsl" href="addressbook.xsl"?>

<ADDRESSBOOK>
   <FRIEND>
      <NAME>Jones, Joe</NAME>
      <ADDRESS>123 Oak St</ADDRESS>
      <PHONE>555-1234</PHONE>
      <NOTE>High School Buddy</NOTE>
   </FRIEND>
   <FRIEND>
      <NAME>Smith, Sally</NAME>
      <ADDRESS>321 Elm Rd</ADDRESS>
      <PHONE>555-4321</PHONE>
      <NOTE>College Girlfriend</NOTE>
   </FRIEND>
   <FRIEND>
      <NAME>Doe, John</NAME>
      <ADDRESS>999 Corporate Place</ADDRESS>
      <PHONE>555-9876</PHONE>
      <NOTE>Work Buddy</NOTE>
   </FRIEND>
</ADDRESSBOOK>

If you are familiar with XML, the only thing that may look unusual is line two. In this line, we are linking our XML document to a XSL template for transformation. We create an XSL Stylesheet using a template:

<?xml version=”1.0”?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">

<html>
   <body>
      <table border=”1”>
         <tr>
            <td>Name</td>
            <td>Address</td>
            <td>Phone #</td>
            <td>Note</td>
         </tr>
         <xsl:for-each select=”ADDRESSBOOK/FRIEND”>
         <tr>
            <td><xsl:value-of select=”NAME”/></td>
            <td><xsl:value-of select=”ADDRESS”/></td>
            <td><xsl:value-of select=”PHONE”/></td>
            <td><xsl:value-of select=”NOTE”/></td>
         </tr>
         </xsl:for-each>
      </table>
   </body>
</html>

</xsl:template>
</xsl:stylesheet>

The first thing we notice is that we open with the xsl:stylesheet tag, specifying our namespace as the W3C working draft, which is supported by IE 5.0. The true standard declaration should include the namespace officially adopted by the W3C (http://www.w3.org/1999/XSL/Transform) but IE does currently not support this.

Line three contains the tag that officially starts our template. The match=”/” statement matches the template to the root of the XML document we are transforming.

From then on, things look like a normal HTML document, until you reach the following line:

<xsl:for-each select=”ADDRESSBOOK/FRIEND”>

<xsl:for-each select=”ADDRESSBOOK”>
   <xsl:for-each select=”FRIEND”>
      ...
   </xsl:for-each>
</xsl:for-each>

We enclose our elements in a table so they look neat, but we actually extract the desired data using value-of tag. This tag extracts the data specified by the Select attribute from the current element.

We close our remaining tags and we are done! Our output looks something like this:

Fortunately, we are not limited to simply outputting XML data as-is. We have many options available regarding how we display our data in our HTML document. For example, suppose we wish to sort our data based upon last name. This is a snap, as all we have to do is add one quick attribute to one of our tags:

<xsl:for-each select=”ADDRESSBOOK/FRIEND” order-by=”+ NAME”>

When our data gets outputted to the table, it will now be sorted in ascending alphabetical order by name. We use plus and minus to indicate ascending or descending order and follow it by the element which we wish to sort by.

Assuming sorting by name isn’t enough, we may want to be able to actually highlight certain people in our list, say, our college girlfriends. We do this using a conditional choose statement. It is probably best illustrated by example:

<xsl:for-each select=”ADDRESSBOOK/FRIEND”>
   <tr>
      <xsl:choose>
      <xsl:when match=”.[NOTE=’College Girlfriend’]”>
         <td bgcolor=”#FF6666”>
            <xsl:value-of select=”NAME”/>
         </td>
         <td bgcolor=”#FF6666”>
            <xsl:value-of select=”ADDRESS”/>
         </td>
         <td bgcolor=”#FF6666”>
            <xsl:value-of select=”PHONE”/>
         </td>
         <td bgcolor=”#FF6666”>
            <xsl:value-of select=”NOTE”/>
         </td>
      </xsl:when>
      <xsl:otherwise>
         <td><xsl:value-of select=”NAME”/></td>
         <td><xsl:value-of select=”ADDRESS”/></td>
         <td><xsl:value-of select=”PHONE”/></td>
         <td><xsl:value-of select=”NOTE”/></td>
      </xsl:otherwise>
      </xsl:choose>
   </tr>
</xsl:for-each>

We begin our conditional with the choose tag. We specify our condition with the when tag, using the match attribute to actually denote what element must match what value. Each NOTE element matching the when condition will cause the entire table row containing the information to appear pink. Using the otherwise tag allows us to specify an else condition that causes any other data not matching NOTE to display normally. In a vein similar to the choose tag, there also exists an if tag that is used in the same way as the when tag above.

Here is the output:

Finally, it is also simple to apply a filter to your data. To get a list containing ONLY college girlfriends, we would do the following:

<xsl:for-each select=”ADDRESSBOOK/FRIEND[NOTE=’College Girlfriend’]”>

With XML rapidly establishing itself as the data exchange standard, more and more users need to change the data contained in XML documents into different formats. This need is fulfilled using XSL and XSLT, which provide the powerful set of tools necessary to perform the tasks at hand. Though still in its infancy, XSL part of tomorrow’s technology and cannot be ignored.

XSL and XSLT FAQ, maintained by D. Pawson. An excellent source:

XML Spy…a good XML editor, validator, and more!

The W3C Version 1.0 of XSL Transformations:

The W3C Version 1.0 of XPath:

The W3C Version 1.0 of XSL: