XSLT Time #2: Baby steps, pupils…baby steps

Those are pretty basic elements, but you’ll find that they’ll be in nearly every single XSLT stylesheet you write. Indeed, two of them should probably just be immediately added from the very beginning. Let’s start there.

XSLT doctype and <xsl:stylesheet />

Just like with an XHTML or XML file the very first line you type indicates to the application that is reading the file just exactly what it is. Here’s what nearly every first couple of lines in an XSLT stylesheet are going to resemble:

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

Now, there’s more to this than the doctype. The first line is your basic, run-of-the-mill doctype declaration. It’s simply stating that we’re dealing with a version 1.0 XML file (remember XSLT is an XML vocabulary) and that it’s encoding is UTF-8. The second line is where we get specific with XSLT. Notice that in every XSLT element we’ll come across there are two pieces: the namespace (in this case “xsl”) and the actual element name (here we are dealing with “stylesheet”). They are separated with a colon. That’s what the second piece of the above <xsl:stylesheet /> node is outlining. The namespace (xmlns) is “xsl” and information detailing those elements can be found at the accompanying URI. Also, this is a version 1.0 XSLT sheet; 2.0 exists but is not as a concrete as 1.0.

Don’t get too bogged down with understanding this piece just yet. Namespaces are tricky and to be honest with you I don’t completely understand them. Just know that we need this piece above for any XSLT sheet to work.

<xsl:template />

The <xsl:template /> element is pretty important, and one whose logic is pretty central to understanding XSLT. Let’s add the rest of the code so we have something to look at:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">    
    <xsl:template match="system-index-block"> 
        <h1><xsl:value-of select="calling-page/system-page/title"/></h1>
        <xsl:copy-of select="calling-page/system-page/system-data-structure/story-content/node()"/>
    </xsl:template>
</xsl:stylesheet>

I’m using the XML from the previous entry as source XML, so take a look at it if you get confused as to where these values are coming from. As you can see, in addition to the aforementioned doctype and <xsl:stylesheet /> we have added <xsl:template /> and a few others. Let’s take a look at what <xsl:template /> accomplishes.

The best way I’ve found of describing the idea of templates within XSLT is to think of it as a container of output code; within a template you’ll find instructions of what to display to the reader. In this case we have a simple template but with an added attribute called “match”. In this case, we’re matching on the <system-index-block> node in our original XML. If you remember, this is also our “root node”. For all intents and purposes, this is our starting point for this document. Later, when we discuss XPath we can discuss other, more complicated uses of this match attribute. For now, just know that we’re starting here and then we’ll be stepping down the original XML structure.

<xsl:value-of /> and <xsl:copy-of />

Up until now, we haven’t discussed any elements that actually output code; we’ve just been setting up our framework. Most of the time, you’ll find yourself just spitting out this code or relying on your XSLT editor (Oxygen) to take care of this for you. Now let’s take a look at some output.

<xsl:value-of /> and <xsl:copy-of /> do almost the same exact thing. They both grab a node’s value from the original XML. Their difference is in how they output those values. <xsl:value-of /> simply outputs the value of the node selected. In this case whenever we put <h3><xsl:value-of select="calling-page/system-page/title"/></h3> we are outputting a simple Header 3 tag as well as the value of the <title> node in the source XML. Our transformed code would look like this:

<h3>This is a headline</h3>

Pretty simple, eh?

<xsl:copy-of /> will also output values from the original XML but when a node is selected it includes that node along with all subsequent child nodes in its output. For example if the code above was written <xsl:copy-of select="calling-page/system-page/system-data-structure/story-content"/> then our output would be:

<story-content>
    <p>Here is some page content.</p>
</story-content>

Now, obviously we are not in need of the <story-content> nodes in our output, but we do need those paragraph tags. We could use the <xsl:value-of /> with some paragraph tags around it to get the desired output, but a nice trick here is to use the node() function.

In a nutshell, functions allow for more robust output and filtering within the stylesheet. They act much like functions in JavaScript or PHP. We’ll get into more of those later, but for now just know that the node() function used with <xsl:copy-of /> works fantastically if you need to output XML that is already formatted as XHTML. In our case it’s perfect.

Instead of getting the extraneous code above, we get:

<p>Here is some page content.</p>

This is exactly what we wanted. So our full, final output, as viewed in a browser, would look like this:

This is a headline

Here is some page content.

We didn’t get to simple XPath syntax or apply-templates in this entry, but we will in the next two. So hold on to your hats, it gets harder from here.