My aim with this tutorial series is to shed some light on why I think XSL is so great and I hope that who ever reads this will get a more pleasant future (web development-wise that is).

I would like to make a note: I will not go through the fundamentals of XSL and XML here. I presume that some knowledge and preconception of programming and structure of XML already is at hand.

The X in XSL

As you already know, or have come to understand, XSL is used for styling or formatting, or parsing if you like, XML. XML is beautiful in that way that it is platform and device independent, standardized and read by virtually any programming language. XML data can be parsed, styled, used, displayed and so on in virtually any way and by any technique you can imagine.

So if any programming language can parse XML why do we need XSL? Well, the answer is quite simple: What if you by any reason have to implement your solution in a different programming language? You would have to rewrite everything and that’s not to fun. If you use XSL you can, as long as the language your moving to have an XSLT engine. So you could say that your solution becomes far more portable if it’s utilizing XSL.

Let’s begin with some code

Enough with the b s. In the first few examples we will use no programming language, the XSL transformation will be handled by an ordinary web browser. Both Gecko-based browsers (Mozilla*) and Internet Explorer handles client side XSL transformation. So we will only need an XML document and an XSL style sheet.

The XML

Here comes the XML we will start off with. I’ll use the classic discography example:

  
    Dream Theater
    USA
    

      1992
8
    
    

      1995
11
    
  
  
    Dave Matthews Band
    USA
    

      1994
11
    
    

      1996
12
    
  

Okey, there’s nothing strange about this. We have a structure with a depth of three nodes: discography --> artist --> album.

The XSL

First lets build an XSL skeleton. This is how we’ll start every XSL document:

Every XSL shall contain the xsl:stylesheet definition. The xmlns:xsl defines what name space we’ll be using, in this case the official one from W3C. We also say that we’ll be using version 1 of XSL transform.

This won’t do much for us. Let’s pop some more stuff in there. You can transform an XML document into a variety of other document formats; HTML, XML, Text and so on. Which format to output is done with the top level instruction xsl:output. Since this will be our main template we also need to write an instruction that will match the root node of our XML document (that is the discography node). To match a node we use xsl:template with the attribute match.

  
  

  
  
    
Code goes here

  

Before we do an initial test we need to assign the XSL to the XML. This is done in a similar way as assigning a CSS to an HTML document ( ). To assign an XSL to an XML we need to “import” the XSL in the XML:

Okey, so lets save the XML as discography.xml and the XSL as discography.xsl in a folder and load the XML in our browser. The result should look something like below:

Game, set xsl:template match

Okey, the first output here is not that exciting, so lets move on to some more interesting code. Let us put some HTML in our XSL template so we can see the basic structure:

  
  

  
  
    
      

      
      
My CD Collection

        
      
    
  

Except for the basic HTML here the one interesting thing to note here is the instruction xsl:apply-templates. In a way we’re gonna loop (not in the way as ordinary loops in regular programming languages, although you can do that too in XSL, but that I’ll leave for now) through the XML document and you can say that xsl:apply-templates just passes on the XML data to the next matching rule. Remember: we have xsl:template match="/" which matches the root of our XML document. Now we’re gonna write some more xsl:template match="..." instructions that will match the root’s child nodes.

We have the following structure: discography --> artist --> album. So we’ll write one xsl:template match="..." for each one of them. I’ll leave out the XSL skeleton now just for space reasons:

  




    
     
    
  






    
     
    ()
    

     tracks
  

So what’s happening here is that we first match the discography node and just continue applying templates. It may seem unnecessary to have this template since all we do is continue applying templates but if we had left this template out the discography node from the XML document would be output in our resulting HTML document. (There’s other ways to handle this but that’s out of the scope for now).

The xsl:apply-templates in the discography template will move us on to the artist template. The artist node have a child node named name. The value of this node we output with .

To output whitespace in XSL we use and that’s what we’re doing to get a space between the value of the name node and the value of the country node. Now we’re done with the artist node so let’s move on to the album node by xsl:apply-templates. Note that I’ve added select="album" in the xsl:apply-templates here. The reason for this that when ever XSL find nodes it can not find a template for it just outputs that node into the result. If you remove the select="album" you’ll see that the artist name and country will be output twice. To prevent this we specify that we want to apply-templates for the artist node and thus we catch that node there and we’ll be fine. There are several ways to fix this but that’s a more advanced action so I leave that out for now.

There’s nothing new in the album template so we need no further explanation there.

The entire XSL

  
  

  
  
    
      

      
      
My CD Collection

        
      
    
  

  
    
  

  

      
        
      
     


  

  

      
        
      ()
      

       tracks
    

  

The result of this should look something like below:

And that’s that for this time…