XML.Gov Demos: XHTML, XML and XSLT for Sorting of Brainstorming Ranking Data

Purpose: This complete example starts with an HTML table as input, converts to XHTML, devises a simple XML vocabulary (with DTD) to better describe the tabular data, converts the XHTML to custom XML using XSLT, and then uses several XSLT stylesheets to sort the XML data in different ways, displaying the results as HTML. This Brainstorming Ranking/Sorting demo illustrates both server-side and client-side transformation of XML data. The same XSLT stylesheets were used for both server-side and client-side transformations.

In the File column below, the term "server" means the file was (previously) transformed server-side (in this case by the Saxon XSLT processor). The transformed result is served to the browser as regular HTML. Results should be invariant across all browsers, including 3rd and 4th generation.

The term "client" means the file is sent directly as XML to the browser with an external reference (i.e., a Processing Instruction) to an XSLT stylesheet residing on the server. The XML file is therefore transformed client-side by the browser to HTML (or text). This approach only works in the latest generation of browsers and is more subject to browser differences.

The implementations shown here do not attempt to make use of reusability. A more modular XSLT solution would not be overly difficult.

Note: For client-side transformation, Internet Explorer 5.x or higher or Netscape 6.x are required. This is therefore not the recommended solution when your user base may favor older browsers.

File	Explanation
Original HTML Table (from XML.gov)	The original data (local copy) consists of 68 brainstorming ideas generated from past meetings of the CIO Council's XML Working Group. This HTML table presentation was created by Owen Ambur on August 30, 2002.
XHTML Conversion	HTML Tidy was used to convert HTML to XHTML 1.0. As viewed in browsers, this version is virtually identical to the original, although if you view source, you'll note the usual XHTML differences. This conversion was necessary to treat the data as well-formed XML (tabular data) as an input to the next phase. Actually, a slightly edited version of the XHTML was used to eliminate non-data rows in the table that caused problems that could have solved in XSLT, given more time.
XHTML to Custom XML	An XSLT stylesheet processes the <table> element of the XHTML file, transforming the rows and columns (<tr> and <td>) into a simple XML vocabularly more descriptive of the data, with element names such as <Idea>, <Description>, <Rankings>, and <Average>.
Generated Custom XML	This is the resultant XML created using the above stylesheet and the XHTML input table.
DTD	While a DTD isn't necessary for this application, it facilitates data entry in editors such as XML Spy. The generated XML instance in the previous row can be validated against this DTD, which was written before the xhtml2xml.xsl stylesheet. IE Users: Due to IE's tendency to peek inside of files instead of just honoring their MIME type, to view the DTD, use your right mouse button and do a Save Target As, and view in any text editor.
XSLT: XML to Default Table Default Table HTML (transformed server-side using Saxon) Client-side Default XML/XSLT	Another XSLT stylesheet converts the custom XML format back into HTML. While this contains no more data than the original HTML, it is highly structured. This table is sorted by Weighted Total Score, which is the default viewing order of the original HTML. All of the other sorts (Low, Medium, High, and Average) can be accessed from this default HTML version. Note the red rectangle around the column heading corresponding to the sort key. Also note that clicking on the column headings resultants in a new HTML table using the selected sort key. This is not sorting the data in place; no JavaScript is involved, but a new page must be fetched from the server for each link.
XSLT: XML to Low Ranking Low Table HTML Client-side Low Ranking XML/XSLT	Another XSLT stylesheet converts the custom XML format back into HTML. This table is sorted by Low ranking.
XSLT: XML to Medium Ranking Medium Table HTML Client-side Medium Ranking XML/XSLT	Another XSLT stylesheet converts the custom XML format back into HTML. This table is sorted by Medium ranking.
XSLT: XML to High Ranking High Table HTML Client-side High Ranking XML/XSLT	Another XSLT stylesheet converts the custom XML format back into HTML. This table is sorted by High ranking.
XSLT: XML to Average Average Table HTML Client-side Average Ranking XML/XSLT	Another XSLT stylesheet converts the custom XML format back into HTML. This table is sorted by Average (Weighted Total / Number of Voters).

Return to Demo Home

Last Updated: September 11, 2002 [We Remember]