XSL – On the Client
In the previous chapter I explained how XSL can be used to transform a document from XML to HTML. The trick was to add an XSL stylesheet information to the XML file, and to let the browser do the transformation.
Even if this works fine, it is not always desirable to include a stylesheet reference in the XML file, and the solution will not work in a non XML aware browser.
- Using different style sheets according to browser and/or user
That’s the beauty of XSL. One of the design goals for XSL was to make it possible to transform data from one format to another, supporting different browsers and different user needs.
XSL transformation on the client side is bound to be a major part of the browsers work tasks in the future, as we will se a growth in the specialized browser marked (think: Braille, Speaking Web, Web Printers, Handheld PCs, Mobile Phones …..).
The XML file and the XSL file
Take a new look at the XML document that you saw in the previous chapter (or open it with IE5):
<?xml version="1.0" encoding="ISO8859-1" ?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD>
And at the companying XSL stylesheet (or open it with IE5):
<?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>
The syntax of the above XSL document was explained in the previous chapter, so it will not be explained here. But be sure to notice that the XML file does not have a reference to the XSL file, and the XSL file does not have a reference to the XML file.
IMPORTANT: The above sentence indicates that an XML file could be transformed using many different XSL files.
Transforming XML to HTML on the client
Here is the simple source code needed transform the XML file to HTML on the client (try it yourself):
The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML document into memory. The second block of code creates another instance of the parser and loads the XSL document into memory. The last line of code transforms the XML document using the XSL document, and writes the result to the HTML document.
Nice and simple.