December 19, 2014
Hot Topics:

Learning XML : XSLT Sorting

  • February 21, 2001
  • By Richard G. Baldwin
  • Send Email »
  • More Articles »


Introduction

If you have been reading my earlier lessons, by now you should know quite a lot about how to use XSLT to transform XML documents into HTML documents for rendering in IE5. In this article, I am going to continue using the HTML table model that I introduced in earlier articles. In this article, I am going to show you how to sort XML data elements before inserting them into an HTML table.

A Sample Program

I will develop the XML code representing a small database of information on books.  The database will contain Title, Author, and Price information for each book. When you load the XML file into IE5, the XML data will be converted into an HTML table and displayed in the browser window. The HTML table will have three columns:

  • Title
  • Author
  • Price

The information for each book will occupy one row in the HTML table.  The books will be sorted into descending order on Price before being inserted into the rows of the HTML table. Alternately, you can load the XML file and the XSLT file into the XSL Debugger discussed in an earlier lesson and get essentially the same result.

This example is based on XSLT information available at the W3C and on IE5 information available at Microsoft

I will discuss the code in fragments.  Complete listings of the XML file, the XSLT file, and the HTML output are presented near the end of the lesson.

The XML File

The XML file is named XSL009.xml. This file is so similar to the files used in previous articles that I am going to show only one small fragment in this section.  That fragment is shown in the following listing:

<theData>
      <title>Java</title>
      <author>R.Baldwin</author>
      <price dataType:dt="number">9.95</price>
</theData>

For brevity, I deleted everything except one data element.  You can view the entire file in the XML listing near the end of the lesson. 

The above fragment illustrates how the data describing a book is stored in the XML file. Each book is described in an element named theData.  This can also be thought of as a node in the XML tree. Each data element (node) describing a book contains three elements (nodes) named title, author, and price. Although it isn't shown in the above fragment, each of the elements containing information about a book are children of the top-level node named top.

The XSLT File

The XSLT file is named XSL009.xsl. This file transforms a simple database of book information into an HTML table, causing the books that appear in the table to be sorted in descending order based on the price of the book. I will discuss this XSLT file in fragments.  A complete listing of the file is presented in near the end of the lesson.

I am going to skip over all of the preliminary stuff.  I will also skip over the code that creates the table and creates the first row in the table containing the literal text Title, Author, and Price. I discussed code similar to that in an earlier lesson and won't discuss it further here.

The following fragment contains the code that is the focus of this lesson, with the important new code highlighted in boldface.

<!-- Do a for-each loop. 
Sort descending by price.-->
<xsl:for-each select="top/theData" 
    order-by="-price">

This fragment begins by setting up a for-each loop to process each data element in the XML database. What is new is this lesson is the order-by="price" attribute of the xsl:for-each processing element. You can read some of what Microsoft has to say about the order-by attribute in the following sidebar:

What Microsoft says about order-by

When using the <xsl:for-each> element to display a repetitive data structure, the template within the <xsl:for-each> is normally processed for each selected item in the order that they appear in the source document. 

The order-by attribute allows you to sort the selected items before iterating over the templates.

The syntax of the order-by attribute is an XSL Pattern that points to a node in the source document that should be used as the sort key.

The explanation from Microsoft is generally self explanatory. The following sidebar contains additional information from Microsoft.

Additional information from Microsoft

The value of the node pointed to by the order-by pattern is sorted according to its data type.

If you examine the XML file near the end of the lesson, you will see that the price data is being treated as numeric data.  Therefore, the sort is a numeric sort. If you have done much sorting in the past, you will recall that sometimes we need an ascending sort, and sometimes we need a descending sort. In case you aren't familiar with this terminology, an ascending sort is one that goes from the smallest value to the largest value, such as:  1, 3, 8, 9. A descending sort goes from the largest to the smallest, such as:  9, 8, 3, 1.

You can use a minus sign to cause the data to be sorted in descending order.  The following sidebar contains some of what Microsoft has to say about the sorting order.

Information on the sorting order from Microsoft

A sort key can be preceded by a minus sign (-) to indicate that the sort should be in descending order.

Likewise, a plus sign (+) can optionally be used to indicate explicitly that the sort is in ascending order (the default).

If you examine the previous code fragment, you will see that in this sample program, the value of the order-by attribute is specified as follows:

order-by="-price"

The minus sign ahead of the name of the key node (price) causes the data to be sorted in descending order on the price value before being inserted into the HTML table.

If you have done much sorting, you also know that it is often desirable to be able to sort on multiple keys. If you are not familiar with the concept of sorting on multiple keys, then I will explain.  The second key is used as a tiebreaker for the first key, the third key is used as a tie breaker for the second key, etc. For example, there are many entries in the telephone directory where I live for people named Baldwin.  The first entry is listed as

Baldwin A

The last entry is listed as

Baldwin Woodrow.

(Note that our telephone book doesn't insert a comma between the last name and the first name.)

As you can see, the text following the name Baldwin is used to differentiate among many different people named Baldwin, and to sort those entries in ascending order.

What about the third key?  There are two Baldwins named Richard, and they are listed as follows:

Baldwin Richard


Baldwin Richard G

(The second one refers to me.)

On the basis of two keys alone, these two entries tie for a specific location in the telephone book.  Something is needed to break the tie. The text following Richard is a key that is used to break the tie and to determine which entry will appear first in the telephone book.

What Microsoft has to say about multiple keys

Multiple sort keys are specified by separating them by semicolons. If the first sort key does not unambiguously order an item, the next key is tested to resolve the conflict.

Finally, there is one other issue that we must mention. As of this writing, the methodology for sorting with XSL in IE5 does not match the W3C recommendation. The following sidebar is what Microsoft has to say about this.

A compatibility issue with sorting

Note The current W3C XSL Working Draft describes a different sorting syntax, using an <xsl:sort> element. Microsoft plans to adopt this syntax in future releases.

The following fragment shows the code that populates each of the cells in the HTML table with the appropriate value.  You have seen code like this in earlier lessons, so I won't discuss it further.

<!-- Create new table row -->
<tr>
  <!-- Create and populate table cells -->
  <td><xsl:value-of select="title"/></td>
  <td><xsl:value-of select="author"/></td>
  <td><xsl:value-of select="price"/></td>
</tr>

</xsl:for-each>

The remaining code in the XSLT file consists solely of end tags, so I won't show it here.

The Output

A listing of the output HTML produced by this program is shown near the end of the lesson.  I captured this HTML code using the Microsoft XSL Debugger discussed in an earlier lesson. If you load this XML file into your IE5 browser, you should see something very similar to the following in your browser window.
 
Title Author Price
XML R.Baldwin 19.60
Python R.Baldwin 15.42
Java R.Baldwin 9.95

The program output

As you can see, the data is sorted in descending order on the basis of the values in the Price column (the price at the top is the highest). If you examine the XML file near the end of the lesson, you will see that the price data is being treated as numeric data.  Therefore, the sort is a descending numeric sort. You will also see that I purposely arranged the data items in the XML file so that they would not be in descending order by price.  I did that to confirm that the sorting process actually had some work to do, and did it properly.

Summary

This lesson uses an XSLT file to transform the contents of a simple XML database into an HTML table. It uses the order-by attribute of the xsl:for-each processing element to cause the data items in the XML file to be selected in descending numeric order, on the basis of the value of the price element, for insertion into the rows of an HTML table.

Complete Program Listings

Complete listings of the XML file, the XSLT file, and the HTML output follow:

XML file (XSL009.xml)
 

<?xml version="1.0"?>

<!-- File XSL009.xml
Copyright 2000 R. G. Baldwin
Illustrates defining data as numeric data.  Also
illustrates sorting, descending using the IE5
approach, which doesn't match the W3C spec for
xsl:sort.
Works with IE5.0
-->

<?xml-stylesheet 
  type="text/xsl" 
  href="XSL009.xsl"?>
<top xmlns:dataType=
"urn:schemas-microsoft-com:datatypes">

<theData>
<title>Java</title>
<author>R.Baldwin</author>
<price dataType:dt="number">9.95</price>
</theData>

<theData>
<title>XML</title>
<author>R.Baldwin</author>
<price dataType:dt="number">19.60</price>
</theData>

<theData>
<title>Python</title>
<author>R.Baldwin</author>
<price dataType:dt="number">15.42</price>
</theData>
 

</top>

Listing 4

XSLT file (XSL009.xml)
 

<?xml version='1.0'?>
<!-- File XSL009.xsl
Copyright 2000 R. G. Baldwin
Illustrates defining data as numeric data.  Also
illustrates sorting, descending.
Works with IE5.0
-->
<xsl:stylesheet 
xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<HTML>
<BODY>

<table BORDER="2" 
CELLSPACING="5" 
CELLPADDING="5" 
WIDTH="399" 
BGCOLOR="#FFFF00">

<!-- Create table titles -->
<tr>
  <td><b>Title</b></td>
  <td><b>Author</b></td>
  <td><b>Price</b></td>
</tr>

<!-- Do a for-each loop. 
Sort descending by price.-->
<xsl:for-each select="top/theData" order-by="-price">

<!-- Create new table row -->
<tr>
<!-- Create and populate table cells -->
  <td><xsl:value-of select="title"/></td>
  <td><xsl:value-of select="author"/></td>
  <td><xsl:value-of select="price"/></td>
</tr>
 
 

</xsl:for-each>

</table>

</BODY>
</HTML>

</xsl:template>
</xsl:stylesheet>

Listing 5

Output HTML
 

<HTML><BODY>
<table BORDER="2" CELLSPACING="5" 
CELLPADDING="5" WIDTH="399" BGCOLOR="#FFFF00">

<tr>
<td><b>Title</b></td>
<td><b>Author</b></td>
<td><b>Price</b></td>
</tr>

<tr>
<td>XML</td>
<td>R.Baldwin</td>
<td>19.60</td>
</tr>

<tr>
<td>Python</td>
<td>R.Baldwin</td>
<td>15.42</td>
</tr>

<tr>
<td>Java</td>
<td>R.Baldwin</td>
<td>9.95</td>
</tr>

</table>
</BODY></HTML>

Listing 6


Copyright 2000, Richard G. Baldwin.  Reproduction in whole or in part in any form or medium without  express written permission from Richard Baldwin is prohibited.

About the author

Richard Baldwin (baldwin.richard@iname.com) is a college professor and private consultant whose primary focus is a combination of Java and XML. In addition to the many platform-independent benefits of Java applications, he believes that a combination of Java and XML will become the primary driving force in the delivery of structured information on the Web.

Richard has participated in numerous consulting projects involving Java, XML, or a combination of the two.  He frequently provides onsite Java and/or XML training at the high-tech companies located in and around Austin, Texas.  He is the author of Baldwin's Java Programming Tutorials, which has gained a worldwide following among experienced and aspiring Java programmers. He has also published articles on Java Programming in Java Pro magazine.

Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.






Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel