Recently I worked on several projects related with XML and created several XSLT files to display the XML files. In this article I will summarize a variety of ways to render XML files using XSLT.
XSL stands for eXtensible Stylesheet Language, which includes 3 interrelated parts: XSLT, XPath, and XSL-FO. The reason W3C separated XSL to 3 parts is users can re-use some parts with other technologies. For example, XPath can work together with XPointer syntax, while XSLT can be used in Microsoft Office suite to represent data.
XSLT is XSL transformation, a language for transforming XML documents. In the transformation process, XSLT uses XPath to navigate through the XML files. So in order to write XSLT code, you have to know XPath syntax first.
This article will focus on how XSLT can help display XML files in browsers and other applications, and how XSLT can help display the XML files in a rich way.
Open XML files in Browsers directly
When you want to open a XML file in browsers directly, probably you just can view the tree structure of the XML file. However, if you add the following reference in the XML file, the XML file can use the test.xsl file to display itself.
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
You have to create your xslt file test.xsl to let browsers know how to present the xml data.
Open XML files in Microsoft Excel
When you open a XML file which doesn’t have a XSLT file related with in Microsoft Excel, Excel will pop up a dialog to provide 3 options to choose the way to open. In my case, all the 3 options are not good for me. I preferred to open the XML file with a XSLT file. When the above “xml-stylesheet” statement is added to the original XML file, Excel will pop up a dialog to ask if you want to open the XML file with the specified stylesheet. When you click “OK”, Excel can display the XML file in a way similarly with a browser.
You can add more than one “xml-stylesheet” statement in a XML file. When you do this, Excel will ask which XSLT file you will use while opening. You can create several XSLT files, and give users more options. In my case, I created one xslt file which can provide colourful layout, and another one which can separate the data to different tables.
Open XML files on the client
The previous examples use “xml-stylesheet” reference line to tell the applications where the xslt file is. It is applications that do the transformation, that is, browsers and Excel. The disadvantage of this approach is you have to add this reference line to the destination XML file by yourself. Another disadvantage is sometimes the application is non XSLT aware.
You can write some JavaScript code to do the transformation on the client. The following is a very simple test html file which can only be used for Microsoft IE. For other browsers, you can easily find some examples from internet.
<html>
<body>
<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("test.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("test.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>
Open XML files on the server
If you have experience working on server to send back HTML to client, you must know the famous Response.Write() function. In order to open XML files on the server, what you need to do is to write back the transformed XML file to client. The following is a simple example:
xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("test.xml"))
xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("test.xsl"))
Response.Write(xml.transformNode(xsl))
ASP.Net has a new class library to do the transformation, but it is very similar to this code.
Add styles to a XSLT file
Since a XSLT file transforms a XML file to a XHTML file, you can use any XHTML style in the XSLT file. The following is an example to display a XML file in a customized table and add color property to cells.
<table style="border: 1px solid #000000; font-family: Tahoma; font-size: 9pt; width: 100%">
<tr style="color:#333333;background-color:#cccccc;">
<td style="background-color:{Book[1]/@color}">
<xsl:value-of select="Book[1]"/>
</td>
</tr>
</table>
Other XSLT techniques
XSLT has a powerful function called document(), which can combine several documents together to display in one page. In my project, I used this function to display a tabbed page which had the paging feature. The layout is like the following:
Then you can switch among 4 views. The 4 views display different content from the same XML document. Within one view, users can navigate through all the pages. Of course if you are a JavaScript guru, you can construct more compelling layout and different paging style.
