Quick and dirty XSLT tutorial

Posted at August 2, 2002

XSLT is a powerful way of getting data from an XML document into a HTML document, altough it is not the only use for it. This article will show you how to get started with XSLT using a simple example while explaining the basics of the language.

Explanation

The stylesheet above introduces many important concepts of XSLT and how it works. The first line is the XML declaration. The <xsl:stylesheet ...> and </xsl:stylesheet> marks the start and end of the stylesheet. Other than that there is for now no need to explain that further. Another thing that is important is that XSLT is XML. And thus needs to be wellformed. This means that all tags, whether HTML or XSLT, needs to be closed. This is done either by a start and end tag like <li>item</li> or by using a short form like <xsl:value-of select="title"/> (Note the forward slash in the end).

The stylesheet contain three templates, or rules. These match certain patterns like “item” or “news”. The first rule is special. It matches the root in the XML document. You can look at it as you are traversing a tree of nodes.

 root node (/)
     '- news
         +- source
         +- item
         |   +- title
         |   '- link
         '- item
             +- title
             '- link

The XSLT tag <xsl:apply-templates/> tell the processor to look at the XML and the template rules to find matches. So in the root node above we have <xsl:apply-templates select="news"/>. That tell the processor to look for news elements in the XML document.

Getting the information Four different ways of displaying information from the XML is used above. The normal way of getting the value of an XML tag is to use <xsl:value-of select="xml-node"/>. In the news template we use <xsl:value-of select="source"/> to get the value of “source” printed.

In the same template we also use a function to count the number of “item” found in the XML using the function count(). There are many such functions available in XSLT, for formatting, sorting, etc.

In the item template we want to create an html link using the value of the XML tag “link”. Since we cannot use <xsl:value-of ../> in html attributes, in this case HREF, we need to enclose the name of the node we want in curly braces {} and enter that as the value of HREF.

Last we want the value of the date. Date is an attribute of the XML tag “item”. To select the value of an attribute in the XML you put a @ in front of the name.

If you look at the tree above and think about the templates. I have used only the simple names of nodes to get their values. Since the XML really is a tree, like a directory structure, you can write full paths directly. Names are separated by forward slash. If you in the root node wanted the value of the XML tag “source” you could write the template like below.

<xsl:template match="/">
  <html>
  <head>
    <title>My news</title>
  </head>

  <body bgcolor="#ffffff">
    <xsl:value-of select="news/source"/>.
    <xsl:apply-templates select="news"/>
  </body>
  </html>
</xsl:template>

What is XSLT

Although people often only say XSL they usually refer to XSLT in conjunction with XPath. This tutorial won’t go into the details of these matters. Instead I will show you by example how to get started with XSLT to produce your HTML documents.

XSLT, however, stands for Extensible Stylesheet Language Transformation which was standardized by W3C in 1999. XSLT is a programming language and a stylesheet written in XSLT allow you to transform XML data into HTML or another text based format. Another way of looking at XSLT is that it is a way of extracting the information from XML data.

It is different than conventional languages in that XSLT is a rule driven language. You create template rules that match a certain pattern in XML data that is processed. Within the templates you define what output should be the result of the XML element.

A small example

Let us start with the XML document containing information and how we want that information displayed in a html document. Here is an XML document, more specifically a small list of news items.


<?xml version="1.0"?>
<news>
  <source>dotvoid.com</source>
  <item type="technology" date="20010323">
    <title>New tutorial</title>
    <link>http://www.dotvoid.com</link>
  </item>
  <item type="economy" date="20010322">
    <title>Nasdaq Hausse</title>
    <link>http://no.way.void</link>
  </item>
</news>

So we have a few news items which we now want to see nicely formatted on a web page. Lets begin with creating the end result of what we want. A simple but nicely formatted list of links to the news source.

<html>
  <head>
    <title>My news</title>
  </head>

  <body bgcolor="#ffffff">
    2 news items from dotvoid.com:

    <ul>
    <li><a HREF="http://www.dotvoid.com">New tutorial</a>
        (20010323)</li>
    <li><a HREF="http://no.way.void">Nasdaq Hausse</a>
        (20010333)</li>
    </ul>
  </body>
</html>

Creating the XSLT

The XSLT to create the web page above will then lool like this.

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

<xsl:template match="/">
  <html>
  <head>
    <title>My news</title>
  </head>

  <body bgcolor="#ffffff">
    <xsl:apply-templates select="news"/>
  </body>
  </html>
</xsl:template>

<xsl:template match="news">
  <xsl:value-of select="count(item)"/>
  news items from
  <xsl:value-of select="source"/>:

  <ul>
     <xsl:apply-templates select="item"/>
  </ul>
</xsl:template>

<xsl:template match="item">
  <li>
    <a href="{link}"><xsl:value-of select="title"/></a>
    (<xsl:value-of select="@date"/>)
  </li>
</xsl:template>
</xsl:stylesheet>

How to run the examples

There are many, both free and commercial, XSLT processors available. I mostly use Sablotron from Ginger Alliance. Mainly because that is the one used in the PHP scripting language. It comes with a simple command line interface and is available for Linux, NT/2000, Solaris along with a few more unices. You can read more about it and download it at www.gingerall.com.

To test the examples above you save the XSL and XML into two files. For example news.xml and mypage.xsl. Then run it using

sabcmd mypage.xsl news.xml

Rounding off

I hope this is a good starter on how you can use XSLT and XML. XSLT can at an easy way of separating content from design. It can also be utilized in building complex systems that produce content for a multitude of devices such as mobile phones and PDA’s. Using XML and XSLT you produce content once and apply different stylesheets for different devices.

If you want to ask questions or discuss this article do so in XML/XSLT forum here on dotvoid.

PHP

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Leave Comment

(required)

(required)