Home of Computer Education

XML

° XML (Extensible Markup Language)
TUTORIAL-----------------------------------------------------------------------------

XSL - Transformation

Example study: How to transform XML into HTML using XSL.The details of this example will be explained in the next chapter.

Start with your XML Document

First you start with the XML document that you want to transform into HTML:

<?xml version="1.0"?>
<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>

Create an XSL Style Sheet Document

Then you create an XSL Style Sheet with a transformation template:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
    <table border="2" bgcolor="yellow">
      <tr>
        <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>

Link the Style Sheet to the XML document

Then you add an XSL Style Sheet reference to your XML document:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="cd_catalog.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 you have an XSL compliant browser, like Internet Explorer 5.0 or later, your browser will nicely transform your XML into HTML.

XSL - Templates

XSL uses TEMPLATES to describe how to output XML.

CSS uses Rules

If you have studied our CSS School, you will know that CSS uses one or more rules to define the output of HTML elements. A selector is used to associate the rule with an HTML element.

The p selector in this CSS rule tells that a <p> element should be displayed using a font named arial:

p { font-family: arial }

XSL uses Templates

XSL uses one or more templates to define how to output XML elements. A match attribute is used to associate the template with an XML element. (The match attribute can also be used to define a template for a whole branch of the XML document).

Look at the following XSL Style Sheet that contains a template to output the XML CD Catalog from the previous chapter:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
   <table border="1">
     <tr>
       <th>Title</th>
       <th>Artist</th>
     </tr>
     <tr>
       <td>.</td>
       <td>.</td>
     </tr>
   </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Since the style sheet is an XML document itself, the document begins with an xml declaration: <?xml version='1.0'?>

The xsl:stylesheet tag in the second line defines the start of the stylesheet.

The xsl:template tag in the third line defines the start of a template. The template attribute match="/" associates (matches) the template to the root (/) of the XML source document.

The rest of the document contains the template itself, except for the last two lines that defines the end of the template and the end of the style sheet.

The result of the transformation will look (a little disappointing) like this:

Title	Artist
.	.

The <xsl:value-of> Element

The result from the previous sample was a little disappointing, because no data was copied from the XML document to the output.

The XSL <xsl:value-of> element can be used to select XML elements into the output stream of the XSL transformation:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
   <table border="1">
     <tr>
       <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>

Note: the syntax for the select attribute value is called an XSL Pattern. It works like navigating a file system where a forward slash (/) selects subdirectories.

The result of the transformation will look like this:

Title	Artist
Empire Burlesque	Bob Dylan

The <xsl:for-each> Element

The result from the previous sample was also a little disappointing, because only one line of data was copied from the XML document to the output.

The XSL <xsl:for-each> element can be used to select every XML element into the output stream of the XSL transformation:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
    <table border="1">
      <tr>
        <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>

The xsl:for-each element locates elements in the XML document and repeats a part of the template for each one.

The result of the transformation will look like this:

Title	Artist
Empire Burlesque	Bob Dylan
Hide your heart	Bonnie Tyler
Greatest Hits	Dolly Parton
Still got the blues	Gary More
Eros	Eros Ramazzotti
Black angel	Savage Rose
1999 Grammy Nominees	Many
For the good times	Kenny Rogers
Big Willie style	Will Smith
Tupelo Honey	Van Morrison
Unchain my heart	Joe Cocker

Back

NEXT Lesson»