XSL Stands For Extensible Style Sheet Language
XSL Stands For Extensible Style Sheet Language
XSL Stands For Extensible Style Sheet Language
XSLT stands for XSL Transformations. In this tutorial you will learn how to use XSLT to transform XML documents into other formats, like XHTML.
You might remember from a previous lesson that we can use a language called Extensible Styles Language XSL to format our XML documents. XSL actually comes in two parts - a transformation language (XSLT) and a formatting language using formatting objects. This section of the XML tutorial covers XSLT. XSLT, which stands for Extensible Styles Language Transformations, enables you to transform XML documents into another form. For example, you can take your XML document, combine it with HTML/CSS, and it will look completely different when viewing it in your user agent/browser.
Processing a Transformation
A transformation can take place in one of three locations:
On the server On the client (for example, your web browser) With a standalone program
The examples in this tutorial will use the client for transforming the XML documents. All XSLT documents need to be well-formed and valid XML documents, so you need to follow the same syntax rules that apply to any other XML document. As well as ensuring that your XSLT documents are valid XML, you need to ensure they are valid XSLT documents. Here's what you need to remember when creating XSLT documents.
XML Version
XSL documents are also XML documents and so we should include the XML version in the document's prolog. We should also set the standalone attribute to "no" as we now rely on an external resource (i.e. the external XSL file).
(i.e. the whole XML document) with what I've written between the <xsl:template> tags. In this case, I have written the contents of an HTML document inside the <xsl:template> tags. When a user views any XML document that uses this XSL document, they will simply see the line "New content..." and the browser's title bar will read "My XSLT Example". <xsl:template match="tutorials"> <html> <head> <title>My XSLT Example</title> </head> <body> <p>New content...</p> </body> </html> </xsl:template>
<body>
<h2>Cool Tutorials</h2> <p>Hey, check out these tutorials!</p> <xsl:apply-templates /> </body> </html> </xsl:template> <xsl:template match="tutorial"> <span class="tutorial-name"> <xsl:value-of select="name" /> </span> <span class="tutorial-url"> <xsl:value-of select="url" /> </span> </xsl:template>
<xsl:sort> Example
Here, we use <xsl:for-each> to loop through each "tutorial" element, and <xsl:sort> to sort by the "name" node. We then use the <xsl:value-of> to extract data from the "name" node. <xsl:template match="tutorials"> <xsl:for-each select="tutorial"> <xsl:sort select="name"/> <xsl:value-of select="name"/><xsl:element name="br"/> </xsl:for-each> </xsl:template>
The Requirement
food.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml-stylesheet type="text/xsl" href="vegetable.xsl"?> <food_list> <food_item type="vegetable"> <name>Agar</name> <carbs_per_serving>81</carbs_per_serving> <fiber_per_serving>8</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>1280</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Asparagus</name> <carbs_per_serving>1</carbs_per_serving> <fiber_per_serving>1</fiber_per_serving> <fat_per_serving>0</fat_per_serving> <kj_per_serving>40</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Cabbage</name> <carbs_per_serving>0</carbs_per_serving> <fiber_per_serving>1</fiber_per_serving> <fat_per_serving>0</fat_per_serving> <kj_per_serving>14</kj_per_serving>
</food_item> <food_item type="vegetable"> <name>Potato</name> <carbs_per_serving>21.5</carbs_per_serving> <fiber_per_serving>2</fiber_per_serving> <fat_per_serving>1</fat_per_serving> <kj_per_serving>460</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Pumpkin</name> <carbs_per_serving>6</carbs_per_serving> <fiber_per_serving>1</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>150</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Yam</name> <carbs_per_serving>30.5</carbs_per_serving> <fiber_per_serving>2</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>550</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Zucchini</name> <carbs_per_serving>1.5</carbs_per_serving> <fiber_per_serving>1.5</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>55</kj_per_serving> </food_item> <food_item type="seafood"> <name>Abalone</name> <carbs_per_serving>0</carbs_per_serving> <fiber_per_serving>0</fiber_per_serving> <fat_per_serving>1</fat_per_serving> <kj_per_serving>400</kj_per_serving> </food_item> <food_item type="seafood"> <name>Barramundi</name> <carbs_per_serving>0</carbs_per_serving> <fiber_per_serving>0</fiber_per_serving>
<fat_per_serving>2</fat_per_serving> <kj_per_serving>390</kj_per_serving> </food_item> <food_item type="fruit"> <name>Apple</name> <carbs_per_serving>15</carbs_per_serving> <fiber_per_serving>2.5</fiber_per_serving> <fat_per_serving>0</fat_per_serving> <kj_per_serving>250</kj_per_serving> </food_item> <food_item type="fruit"> <name>Kiwi Fruit</name> <carbs_per_serving>7.5</carbs_per_serving> <fiber_per_serving>2.5</fiber_per_serving> <fat_per_serving>0</fat_per_serving> <kj_per_serving>150</kj_per_serving> </food_item> <food_item type="grain"> <name>Oatbran</name> <carbs_per_serving>62</carbs_per_serving> <fiber_per_serving>14</fiber_per_serving> <fat_per_serving>7</fat_per_serving> <kj_per_serving>1400</kj_per_serving> </food_item> <food_item type="grain"> <name>Wheatgerm</name> <carbs_per_serving>1.5</carbs_per_serving> <fiber_per_serving>1</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>70</kj_per_serving> </food_item> </food_list>
vegetable.xls
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:apply-templates/> </xsl:template> <xsl:template match="food_list"> <table border="1"> <tr style="background-color:#ccff00"> <th>Food Item</th> <th>Carbs (g)</th> <th>Fiber (g)</th> <th>Fat (g)</th> <th>Energy (kj)</th> </tr> <xsl:for-each select="food_item"> <xsl:if test="@type = 'vegetable'"> <tr style="background-color:#00cc00"> <td><xsl:value-of select="name"/></td> <td><xsl:value-of select="carbs_per_serving"/></td> <td><xsl:value-of select="fiber_per_serving"/></td> <td><xsl:value-of select="fat_per_serving"/></td> <td><xsl:value-of select="kj_per_serving"/></td> </tr> </xsl:if> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> Now, imagine we're only interested in the vegetables - we only want to display the food that have a type attribute of "vegetable". And, we also want to display it nicely formatted in an HTML table. Something like this:
XSLT - a language for transforming XML documents XPath - a language for navigating in XML documents XSL-FO - a language for formatting XML documents
XSLT is a language for transforming XML documents into XHTML documents or to other XML documents. XPath is a language for navigating in XML documents.
If you want to study these subjects first, find the tutorials on our Home page.
What is XSLT?
XSLT XSLT XSLT XSLT XSLT stands for XSL Transformations is the most important part of XSL transforms an XML document into another XML document uses XPath to navigate in XML documents is a W3C Recommendation
A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-tree.
. . </catalog>
Viewing XML Files in Firefox and Internet Explorer: Open the XML file (typically by clicking on a link) - The XML document will be displayed with color-coded root and child elements. A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the element structure. To view the raw XML source (without the + and - signs), select "View Page Source" or "View Source" from the browser menu. Viewing XML Files in Netscape 6: Open the XML file, then right-click in XML file and select "View Page Source". The XML document will then be displayed with color-coded root and child elements. Viewing XML Files in Opera 7: Open the XML file, then right-click in XML file and select "Frame" / "View Source". The XML document will be displayed as plain text. View "cdcatalog.xml"
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>
</tr> <tr> <td>.</td> <td>.</td> </tr> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Try it yourself
Example Explained
Since an XSL style sheet is an XML document, it always begins with the XML declaration: <?xml version="1.0" encoding="ISO-8859-1"?>. The next element, <xsl:stylesheet>, defines that this document is an XSLT style sheet document (along with the version number and XSLT namespace attributes). The <xsl:template> element defines a template. The match="/" attribute associates the template with the root of the XML source document. The content inside the <xsl:template> element defines some HTML to write to the output. The last two lines define the end of the template and the end of the style sheet. The result from this example was a little disappointing, because no data was copied from the XML document to the output. In the next chapter you will learn how to use the <xsl:value-of> element to select values from the XML elements.
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th>
<th>Artist</th> </tr> <tr> <td><xsl:value-of select="catalog/cd/title"/></td> <td><xsl:value-of select="catalog/cd/artist"/></td> </tr> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Try it yourself
Example Explained
Note: The select attribute in the example above, contains an XPath expression. An XPath expression works like navigating a file system; a forward slash (/) selects subdirectories. The result from the example above was a little disappointing; only one line of data was copied from the XML document to the output. In the next chapter you will learn how to use the <xsl:for-each> element to loop through the XML elements, and display all of the records.
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr>
Note: The value of the select attribute is an XPath expression. An XPath expression works like navigating a file system; where a forward slash (/) selects subdirectories.
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd[artist='Bob Dylan']"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template>
</xsl:stylesheet>
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:sort select="artist"/> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Try it yourself
Note: The select attribute indicates what XML element to sort on.
Syntax
<xsl:if test="expression"> ...some output if the expression is true... </xsl:if>
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:if test="price > 10"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:if> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Try it yourself
Note: The value of the required test attribute contains the expression to be evaluated. The code above will only output the title and artist elements of the CDs that has a price that is higher than 10