XSLT - Transformation


Case Study: How to use XSLT to transform XML into XHTML.

We will explain the details of this example in the next chapter.


Correct stylesheet declaration

The root element that declares a document as an XSL stylesheet is <xsl:stylesheet> or <xsl:transform>.

Note:<xsl:stylesheet> and <xsl:transform> are completely synonymous, and both can be used!

According to the W3C XSLT standard, the correct way to declare an XSL stylesheet is:

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

Or:

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

To access XSLT elements, attributes, and features, we must declare the XSLT namespace at the top of the document.

xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. If you use this namespace, you must include the attribute version="1.0".


Start from an original XML document

We will now take the following XML document ("cdcatalog.xml")and transform itinto XHTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

Viewing XML files in Firefox and Internet Explorer:Open the XML file (usually by clicking a link) - The XML document will display the root element and child elements as color-coded code. Click the plus (+) or minus (-) signs to the left of elements to expand or collapse the element structure. To view the original XML source (without plus and minus 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 the XML file and select "View Page Source". The XML document will display the root element and child elements as color-coded code.

Viewing XML files in Opera 7:Open the XML file, then right-click in the XML file, and select "Frame" / "View Source". The XML document will be displayed as plain text.

View "cdcatalog.xml"


Create an XSL stylesheet

Then create an XSL stylesheet with a transformation template ("cdcatalog.xsl"):

<?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>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

View "cdcatalog.xsl"


Link the XSL stylesheet to the XML document

Add an XSL stylesheet reference to the XML document ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl.html"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

If your browser is XSLT-compatible, it will smoothlytransform your XMLinto XHTML.

View the result

We will explain the details of the above example in the next chapter.


Other Extensions