Basic Tutorials
xsl– Conversion
This section will give an example of how to convert XML into HTML using XSL. The details of this example will be explained in the next section.
Starting from an XML document
Start with an XML document that you intend to convert to 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>
If you are using Internet Explorer 5.0 or later, you can view the display results of this XML file.
Create an XSL style sheet document
Now use the transform template to create an XSL stylesheet:
<?xml version= ' 1.0 '?>
<xsl:stylesheet xmlns:xsl= "Http://www.w3.org/TR/WD-xsl" >
<xsl:template match= "/" >
<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>
</xsl:template>
</xsl:stylesheet>
If you are using Internet Explorer 5.0 or later, you can view the display results of this XSL file.
To connect a style sheet to an XML document
Now add an XSL style sheet reference to the 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>
.
.
.
If you have an XSL-compliant browser, such as Internet Explorer 5.0 or later, you can easily convert XML to HTML. Click here to view the results.
XSL templates
XSL uses templates to describe how to output XML.
Rules for using CSS
If you have learned CSS knowledge, we will know that CSS is to use one or more rules to define the output of HTML elements, with a selector to the rule with an HTML element. For example, the P selector in the following CSS rule should display a <p> element in a font called Arial:
p {font-family:arial}
XSL usage template
XSL uses one or more templates to define how to output XML elements, to associate a template with an XML element with a matching attribute, and to define a template for a full branch of an XML document with matching attributes.
Consider the following XSL style sheet, which contains a template to output the XML CD directory in the previous section:
<?xml version= ' 1.0 '?>
<xsl:stylesheet xmlns:xsl= "Http://www.w3.org/TR/WD-xsl" >
<xsl:template match= "/" >
<body>
<table border= "1" >
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
</table>
</body>
</xsl:template>
</xsl:stylesheet>
Because the stylesheet itself is an XML document, the document starts with an XML declaration: <?xml version= ' 1.0 '?>. The Xsl:stylesheet tag in the second line defines the beginning of the style sheet. The xsl:template tag in the third line defines the beginning of a template. Template Properties Match= "/" Contact the template with the root (/) of the XML source document (match). The other part of the document contains the template itself, and the last two lines define the end of the template and the end of the style sheet.
Use Internet Explorer 5来 to look at XML files, XSL files, and results.
<xsl:value-of> elements
The results of the previous example were somewhat disappointing because the data was not copied from the XML document to the output. The <xsl:value-of> elements of the XSL can be used to select XML elements that enter 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= "/" >
<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>
</xsl:template>
</xsl:stylesheet>
Note: The syntax used to select attribute values is called XSL mode. It works like sailing in a file system, where a forward slash (/) is used to select a subdirectory.
Use Internet Explorer 5来 to look at XML files, XSL files, and results.
<xsl:for-each> elements
The results in the previous example are somewhat unsatisfactory because only one row of data is copied from the XML document to the output. The <xsl:for-each> elements of the XSL can be used to select each 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= "/" >
<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>
</xsl:template>
</xsl:stylesheet>
The Xsl:for-each element finds elements in an XML document, and then repeats a portion of the template for each element.
Use Internet Explorer 5来 to look at XML files, XSL files, and results.