I’m a lucky bastard! At work we use the beautiful Roxen CMS which utilize XSL for the entire templating system. I was a little bit familiar with XSL before we got Roxen CMS but I hadn’t really understood the power of it. It didn’t take long before I really started to love XSL.
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.
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.
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.
Here comes the XML we will start off with. I’ll use the classic discography example:
Okey, there’s nothing strange about this. We have a structure with a depth of three nodes:
discography --> artist --> album.
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.
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:
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:
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:
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).
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 result of this should look something like below:
And that’s that for this time…