Getting Started with XSL(T)

In this tutorial, we will adventure into the world of XSL(T) and explain what it is, how to pull data from an XML document, basic iteration and basic login and conditional statements.

Tutorial Details

• Program: Any Text Editor
• Version: 1 of 1
• Difficulty: Medium
• Estimated Completion Time: 25min

Overview

Sometimes, you have huge datasets that are parsed out as XML that need to be formatted so that someone who doesn’t know how to read XML can read the data. In this tutorial, I will show you how that is done with the power of XSL(T).

What is XSL(T)?

XSL(T) is short for Extendable Stylesheet Language (Transformation). Even though it is a “stylesheet,” it has a different goal than CSS (Cascading Stylesheets). XSL(T) is not used for visual effect, but instead extracting data (or transforming) from XML and using the combination of HTML and CSS to format them. XSL(T) also has the dynamic properties in the sense that you can do iteration and conditional statements upon a static XML file.

XSL(T) is not used for visual effect, but instead extracting data (or transforming) from XML and using the combination of HTML and CSS to format them.

Why use XSL(T)?

XSL(T) can be used for organizing large trees of XML so that anyone can read it. For instance a Google Search Appliance serves up queries as XML. For that XML to be read by a general user some transformation has to occur. This is where XSL(T) plays a vital role. It could also be used to style an RSS feed page since the source is all in XML. It is also used as the main templating language for Autonomy’s Teamsite (EMS) and such open source CMSs as Symphony.

XSL(T) also cuts down on server load. Since XSLT can do the transformation on the client side, your server has to do less work, since you are not querying upon data in database. JavaScript and server-side functions can be setup to tell the document to use a specific XSL(T) template or you can source the template within the actual XML file. For this tutorial, we are simply going to source the XSL(T) template in the XML file.

Getting Started

Our goal is to create a listing of vacations that we want to go on, and perform some logic on the data to let us know what destinations are out of our price range. In this case our budget is $999 for our vacation and we are going to indicate when the price is over our budget. We will also be ordering them in descending order so we can see right away what trips are out of our budget.

First off you are going to need an XML file. Go ahead and open your favorite text editor and create a new file and call it trips.xml. I have provided a sample XML file you can download and use or you can copy and paste in the code below.

	<?xml version="1.0" encoding="ISO-8859-1"?>
	<vacation>
		<title>My Vacations</title>
		<trip date="03/01/10">
			<country>USA</country>
			<state>Florida</state>
			<city>Orlando</city>
			<price>1000</price>
		</trip>
		<trip date="04/01/10">
			<country>USA</country>
			<state>Michigan</state>
			<city>Detroit</city>
			<price>600</price>
		</trip>
		<trip date="02/03/2010">
			<country>Spain</country>
			<city>Madrid</city>
			<price>5000</price>
		</trip>
		<trip date="05/01/10">
			<country>USA</country>
			<state>California</state>
			<city>San Jose</city>
			<price>800</price>
		</trip>
	</vacation>

The first and only thing we will need to do to this document is to add a reference to where our .xsl file lives. In this instance we will be creating a stylesheet called trips.xsl.

		<?xml version="1.0" encoding="ISO-8859-1"?>
		<?xml-stylesheet type="text/xsl" href="trips.xsl"?>
		...
	

Beginning The Extendable Stylesheet

Start by creating a new document in your favorite text editor and saving it as trips.xsl. Next we can start the actual stylesheet .You will first need to specify the XML version and encoding for the template. If you are familiar with XML, it is the same version and encoding syntax

		<?xml version="1.0" encoding="utf-8"?>
		...
	

From here we can dive into writing some XSL. To start the stylesheet we must first let the browser know that we are using an XSL stylesheet and what version. This element must wrap all of your mark up and should be closed out at the end of the document otherwise the document will not transform.

			<?xml version="1.0" encoding="utf-8"?>
			<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
			
			<!-- More stuff to come -->
			
			</xsl:stylesheet>
			...
	

If we are going to want to validate the XHTML within our document against W3C standards we then will need to include a doctype to use upon transformation and render. Here we are going to use the XHTML Strict DTD. We do this by setting up a self closing element called xsl:output. With in that element we will call the doctype.

		<?xml version="1.0" encoding="utf-8"?>
		<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
		<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
		
		<!-- More stuff to come -->
		
		</xsl:stylesheet>
		...

Next, we will start the actual template. In between the template open and close tag is where all of out XHTML will go along any other XSL(T) elements. It is important to note that you have set a match for the template. This attribute basically says go to the root of the XML document.

		<?xml version="1.0" encoding="utf-8"?>
		<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
		<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
		
		<xsl:template match="/">
		
		<!-- More stuff to come -->
		
		</xsl:template>
		</xsl:stylesheet>

Transformation

First thing we need to do now is start up a basic XHTML layout and nest that within our xsl:template tags. I also have linked a css file to document to give the document some style but setting that up is beyond the scope of this tutorial.

	 
		...
		<xsl:template match="/">

		<html>
			<head>
				<title></title>
				<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
			</head>
			<body>
				
			</body>
		</html>
		
		</xsl:template>
		...

So our first goal is to take the title element from the XML document and place that data into the title of the html document.

Before we we start with the XSL it is important to note where within the XML tree “title” exist. In this case title is a direct descendant of the root element of vacation. We can now start to writing our XSL. To be able to tell the browser where a matched piece of data is going to live we use the xsl:value-of element.

We are in the root of document already through the xsl:template tag but we must dig deeper into the XML tree to select the data we want. In this case we are going to look in the document for a root element of vacation with child of title.

	...
	<head>
		<title><xsl:value-of select="vacation/title"/></title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
	</head>
	...

When we go to open our XML file (trips.xml) in the browser our result is the title element being displayed in title bar of the browser, where we would expect it to be in a normal XHMTL based site. Also notice we no longer see the XML tree structure, however when we view source we see that the source of the document is XML.

We can take it one step further to prove that the transformation from XML to XHTML has occurred in the browser by using a tool like FireBug or Safari Inspector.

To add some visual organization I am going to add some markup so that our data is a little bit more easily to look at.

	...
	</head>
	<body>
		<div id="wrapper">
			<div id="trips">
				<h1><xsl:value-of select="vacation/title"/></h1>
					<ul>
						<li></li>
					</ul>
			</div>
		</div>
	...

As you can see above, I have reused the title element once again but this time in the body of the document. This can be extremely useful in the re-use and repurposing of content.

Next, we are going to want to transform our “trips” into XHTML. Common sense says that we should just be able to call another xsl:value-of but this time calling upon the child node of “trip”. This would work if we only had one trip. However since we have multiple trips we need to do some iteration or looping through the XML document.

Iteration aka Looping

As in all programming languages there is iteration statements that loop through a specific dataset and performs some methods on them. XLS(T) has similar functionality in extracting data from an XML document.

	...
	<xsl:for-each select="vacation/trip">
	...
	</xsl:for-each>
	...

The snippet above does pretty much what you would expect it to do. It is saying xsl:for-each element select all that exists at the path vacation/tip.

However, to actually extract the data we need to do a little more work. Since our budget for the trips are $999 we are going to have to preform some logic on the data. But before we do that lets sort the data by price in descending order.

Sorting

	...
	<xsl:for-each select="vacation/trip">
		<xsl:sort select="price" data-type="number" order="descending"/>
		...
	</xsl:for-each>
	...

As you can see above sorting data by a specific node is fairly easy. Since the xsl:for-each statement selects the trip node and sets the scope we can simply tell xsl:sort to select the price node and look for the data-type number then set the order to descending. It is important to note that the xsl:sort statement is self-closing (< />).

Previewing

Well at this point you may be wondering what this vacation listing looks like. To preview what we have open trips.xml in your browser. Make sure you are not viewing the .xsl file.

You are probably scratching your head wondering why we don’t have any results. This is because we have not sourced what data to look at. The xsl:sort statement is not sourcing data it is simply a filter for when data is present.

Choosing and Testing

Since we want to give some indication for prices that are out of our budget we need to Test against some parameters. We do this with the combination of xsl:choose, xsl:when test=” and xsl:otherwise. If you have any programming experience you should recognize this concept of flow control of conditionals. If not it’s still pretty simple to follow.

		<xsl:for-each select="vacation/trip">
			<xsl:sort select="price" data-type="number" order="descending"/>
				<xsl:choose>
					<xsl:when test="price > 999">
					BLAH
					</xsl:when>
					<xsl:otherwise>
					BLIP
					</xsl:otherwise>
				</xsl:choose>
		</xsl:for-each>
	

We start the logic flow with xsl:choose, this is going to initialize the statement similar to if in languages like PHP. Directly after that we have our first test. We are telling XSL(T) to that when the price is greater-than(>) 999 do BLAH, otherwise do BLIP.

Next we need to replace BLAH and BLIP with hooks to our XML.

		...
		<xsl:choose>
			<xsl:when test="price > 999">
				<li class="too-much">$<xsl:value-of select="price"/> <xsl:value-of select="city"/>, <xsl:value-of select="state"/> <xsl:value-of select="country" /> <em><xsl:value-of select="@date"/></em> </li>
			</xsl:when>
			<xsl:otherwise>
				...
			</xsl:otherwise>
		</xsl:choose>
		...
	

In the above snippet we setup up our list item with a class of “too-much”. This class will color the trips that out of our budget in red. We then are using xsl:value-of to grab the price, city,state,country and date. It is important to note that the date can be access from the each “trip” node by using the @ symbol. These same type of statements were seen earlier when you got the title for our list. We have also added the dollar symbol ($) and comma ( ) to format the data correctly.

	<xsl:choose>
		<xsl:when test="price > 999">
			<li class="too-much">$<xsl:value-of select="price"/> <xsl:value-of select="city"/>, <xsl:value-of select="state"/> <xsl:value-of select="country" /> <em><xsl:value-of select="@date"/></em> </li>
		</xsl:when>
		<xsl:otherwise>
			<li>$<xsl:value-of select="price"/> <xsl:value-of select="city"/>, <xsl:value-of select="state"/> <xsl:value-of select="country" /> <em><xsl:value-of select="@date"/></em> </li>
		</xsl:otherwise>
	</xsl:choose>

We next have to state what we want to happen to the other items if they meet our constraint of under $999. In this case we are just going to print them out in a list item with no special class attached to them. We are going through and selecting all of the same nodes as we did for the too-much nodes (price, city,state,country and date).

Putting It All Togeather

	<?xml version="1.0" encoding="utf-8"?>

	<xsl:stylesheet version="1.0"
	                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

		<xsl:template match="/">
		<html>
			<head>
				<title><xsl:value-of select="vacation/title"/></title>
				<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
			</head>
			<body>
				<div id="wrapper">
					<div id="trips">
						<h1><xsl:value-of select="vacation/title"/></h1>
							<ul>
								<xsl:for-each select="vacation/trip">
									<xsl:sort select="price" data-type="number" order="descending"/>
										<xsl:choose>
											<xsl:when test="price > 999">
												<li class="too-much">$<xsl:value-of select="price"/> <xsl:value-of select="city"/>, <xsl:value-of select="state"/> <xsl:value-of select="country" /> <em><xsl:value-of select="@date"/></em> </li>
											</xsl:when>
											<xsl:otherwise>
												<li>$<xsl:value-of select="price"/> <xsl:value-of select="city"/>, <xsl:value-of select="state"/> <xsl:value-of select="country" /> <em><xsl:value-of select="@date"/></em> </li>
											</xsl:otherwise>
										</xsl:choose>
								</xsl:for-each>
							</ul>
					</div>
				</div>
			</body>
		</html>
		</xsl:template>
	</xsl:stylesheet>
	

By this time we should actually have something useful to look at in the browser.

Open up trips.xml like before. If all has gone well you should have something similar to what is shown above. XSL(T) is a very powerful language that allows you to drastically change how XML data is presented. Below are some resources to learn more about XSL(T).

• W3C Documentation
• W3C Schools XSL
• XSLT Wikipedia
• XSLT Second Edition by Doug Tidwell

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.