Design Techniques

XSL: Extensible Stylesheet Language

Building a site using XML and XSL

The Other Templates

Now that we've got the main template sorted out we need to get the content into it and set rules for how that content will be handled. Note: This part can get a little hairy but once you've got it you'll wonder why you ever built individual HTML pages. It is worth the effort.

Our XML files has elements called 'firstparagraph', 'paragraph', 'heading2' and 'image' that all need to be defined in the XSL. Each of these will have it's own template that defines the XHTML for it. The first template we will look at is the 'content' template which, if you remember, we have applied in the main (or root) template.

But first a quick look at how templates work. There are basically two things required for a template to work:

The template needs to be applied using <xsl:apply-templates />
The template needs to be matched using <xsl:template match="">

We have already called the 'content' template from the main template using <xsl:apply-templates select="//content" /> so now we need to create a template that matches the 'content' element in the XML. This is done by adding the following under the main template:

<xsl:template match="//content"> <div class="content"> <xsl:apply-templates select="firstparagraph" /> <xsl:apply-templates select="heading2|paragraph" /> </div> </xsl:template>

You'll notice that this template has some CSS information in there and applies a couple more templates. It applies the 'firstparagraph' template first and then applies both the 'heading 2' and 'paragraph' templates. This is because we want 'firstparagraph' to appear before any other paragraphs or headings. If we didn't have 'firstparagraph' then we would simply use <xsl:apply-templates /> to apply all templates inside the 'content' XML tag.

Now we simply work through all the templates we need to define all the elements in the XML file. The next one is 'firstparagraph' which looks like this:

<xsl:template match="firstparagraph"> <div class="firstpara"> <h1><xsl:apply-templates select="//heading/></h1> <p><xsl:value-of select="." /></p> </div> </xsl:template>

This template, again, has some CSS information for laying out the first paragraph and applys another template for the main heading. There is a new tag in there though, the value-of tag, which is another key XSL tag that you will use regularly. It is basically saying "Get all the content that appears between the 'firstparagraph' tag in the XML file and put it here". The "." that appears after the select is the part that specifies that 'all the content' between the tag is included.

The next two templates are very similar to this:

<xsl:template match="heading2"> <h2><xsl:value-of select="." /></h2> </xsl:template> <xsl:template match="paragraph"> <p><xsl:value-of select="." /></p> </xsl:template>

The final template in this example is a little different however. You might remember that in the XML for the image we used attributes to define the 'class', 'src' and 'alt' tags and these need to be handled a little differently in the XSL. We are trying to create the following XHTML for the image tag:

To do this in the XSL we need to let it know that the attributes used in the XML are actually XHTML attributes for the <img>. As luck would have it XSL has an attribute tag for just such an occassion. Here's the XSL for the image template:

<xsl:template match="image"> <img> <xsl:attribute name="class"><xsl:value-of select="@class" /></xsl:attribute> <xsl:attribute name="src"><xsl:value-of select="@src" /></xsl:attribute> <xsl:attribute name="alt"><xsl:value-of select="@alt" /></xsl:attribute> </img> </xsl:template>

This will write out an <img> tag and then add the attributes 'class=""', 'src=""' and 'alt=""' into it. These attributes will then be populated (using those xsl:value-of tags) by whatever is in the respective XML attribute (selected here by the @ sign. eg. @class is the 'class' attribute in the XML).

The final part of the XSL is to close off the stylesheet tag we opened right at the start:

</stylesheet>

Now we need to put the XML and XSL together to generate the XHTML file.