Home of Computer Education

XML

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

XSL Sort

XSL can be used to sort an XML document.

Where to put the Sort Information

Take a new look at the XML document that you have seen in many chapters:

<?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>

To output this XML file as an ordinary HTML file, and sort it at the same time, simply add an order-by attribute to your for-each element in your XSL file like this:

<xsl:for-each select="CATALOG/CD" order-by="+ ARTIST">

The order-by attributes takes a plus (+) or minus (-) sign, to define an ascending or descending sort order, and an element name to define the sort element.

Now take a look at your slightly adjusted XSL stylesheet:

<?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"
       order-by="+ 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>

Transforming it in your Browser

Here is the simple source code needed to transform the XML file to HTML in your browser:

<html>
<body>
<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cd_catalog.xml")

// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cd_catalog_sort.xsl")

// Transform
document.write(xml.transformNode(xsl))
</script>

</body>
</html>

XSL Conditional IF

XSL can use an IF test to filter information from an XML document.

Where to put the IF condition

Take a new look at the XML document that you have see

To put a conditional if test against the content of the file, simply add an xsl:if element to your XSL document like this:

<xsl:if match=".[ARTIST='Bob Dylan']">
... some output ...
</xsl:if>

Now take a look at your slightly adjusted XSL stylesheet:

<?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">
      <xsl:if match=".[ARTIST='Bob Dylan']">
      <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>

Transforming it in your Browser

Here is the simple source code needed transform the XML file to HTML in your browser:

<html>
<body>
<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cd_catalog.xml")

// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cd_catalog_if.xsl")

// Transform
document.write(xml.transformNode(xsl))
</script>

</body>
</html>

Back

.:: FINISIED ::.