XSLT Transformation

Case Study: How to use XSLT to convert XML to XHTML.

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

Correct stylesheet declaration

The document should be declared as the root element of the XSL stylesheet with <xsl:stylesheet> or <xsl:transform>.

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

According to the W3C's 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 the elements, attributes, and properties of XSLT, 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".

Starting from an original XML document

Now we are going to convert the following XML document ("cdcatalog.xml") to 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>

View XML files in Internet Explorer and Firefox:

Open the XML file (usually by clicking on a link) - the XML document will be displayed in a color-coded code format showing the root element and its child elements. Clicking on the plus or minus sign on the left side of an element will expand or collapse its structure. To view the original XML source file (without plus and minus signs), please select 'View Page Source' in the browser menu.

View 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 be displayed with colored code showing the root element and its child elements.

View XML files in Opera 7:

Open the XML file, then right-click in the XML file and select "Frames"/"View Source". The XML document will be displayed as plain text.

View "cdcatalog.xml".

Create an XSL style sheet

Then create an XSL style sheet 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 align="left">Title</th>
      <th align="left">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 style sheet to the XML document

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

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<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 compatible with XSLT, it will smoothly convert your XML Convert To XHTML.

View Results.

We will explain the details of the examples above in the next section.