XSLT: An Introduction to Styling XML

on Thu Dec 04 18:14:19 GMT 2008 in XML and viewed 4122 times

Another detailed explanation of XSLT, or eXtensible Stylesheet Language Transformations, or a styling language for XML.


In the first XML article we covered what XML articles are and how to construct them. But now that you have your XML document, what are you going to do with it? If you view it in a browser it’ll just appear as text, unless you use something that will give it a node based system. So now we need to display that document. There are a few ways of doing this, but for now, you’re going to learn how to display a document using XSLT, or Extensible Stylesheet Language Transformation. What you will do is create a .xslt document and link to it from an XML document, transforming it to be displayed with styles in browsers that are compatible.

Now at the moment only a few browsers are compatible with XSLT. These common browsers are: Firefox 1.0.2, Mozilla 1.7.8, Netscape 8, Opera 8, and IE6. There are more, but those are the most popular.

XSL is composed of three different things: XSLT, XPath, and XSL-FO. XSLT we already covered. XPath is the commands you use in XSLT to find different objects in the XML document. And XSL-FO is XML Formatting Objects, which you will use to format the documents.

To learn how to search the node-list for XML documents, you must first learn about XPath. Without XPath, you couldn’t search the document. It’s a very easy set of rules to learn.

Element name: Selects all children of that element. (article) /: Selects the root element (/article) //: Selects elements in the document no matter where they are. (//title) @: Selects attributes (/article[@lang=’eng’]/title will select all title elements within the article element with an attribute “lang” with a value of “eng”. You can use anything like @price > 4 or @id < 4, etc.)

So first we have to start with an easy XML document to style.


  <?xml version=”1.0”?>
  <articles>

  <article>
  <title>A test doc</title>
  <author>Ben</author>
  <content>A really long article</article>
  </article>

  <article>
  <title>Another article</title>
  <author>Still Ben</author>
  <content>Something else</content>

  </articles>

This is a very simple document and easy to style. To start the styling, we need the basic XSL document. This code can be saved as a dot xsl document.


  <?xml version=”1.0”?>

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

  <xsl:template match=”/”>
  <html>
  <head><title>Some articles</title></head>
  <body>
  <xsl:apply-templates />
  </body>
  </html>
  </xsl:template>

  <xsl:template match=”/articles”>
  <h1>Some articles</h1>

  <xsl:for-each select=”article”>
  <b><xsl:value-of select=”title” /></b>
  by <xsl:value-of select=”author” /><br /><br />
  <xsl:value-of select=”content” />
  </xsl:for-each>

  </xsl:template>

  </xsl:stylesheet>

As you can see, it’s a very easy document. At first we define it as an XML document and set up the main style sheet. The first thing we do after that is to start a first template with <xsl:template match=”/”>. Then it’s the basic html page with the html, head, title, and body elements. The <xsl:apply-templates /> is an easy way to separate the basics of the html page from the styling of the other XML document.

The next thing is to start the XML styling. First we use <xsl:template match=”/articles">. We use match=”/articles” to select the articles element. Then we have some basic styling, and then go into a loop. <xsl:for-each will loop through all the elements with the value you set. So when we’re looping, we’ve selected the article element. <xsl:value-of /> will display the values of the element. Use select=”title” to select the title element from the article element from the articles element. It’s pretty simple. Then since every XML document must close properly, use </xsl:for-each>, </xsl:templates>, and </xsl:stylesheet> to finish up the document.

The very last thing to do is link the XSL and the XML together. To do that, just include this line in your XML document: <?xml-stylesheet type="text/xsl" href="locationofxsl.xsl"?>.

And that’s it, you’ve learned the very basics of the Extensible Stylesheet Language.