One method of manipulating and presenting XML data is to use XSL.
XSL consists of three parts:
This example will use XSLT to tranform XML documents into XHTML.
XSLT is the most important part of XSL.
XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element.
With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more.
XSLT uses XPath to find information in an XML document.
XPath is used to navigate through elements and attributes in XML documents.
Lets say we have some data on mobile phones in an XML file called phonecatalog.xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<phone>
<manufacturer>Motorola</manufacturer>
<model>RAZR V8</model>
<type>clamshell</type>
<camera>2MP</camera>
<memoryslot>No</memoryslot>
<wlan>No</wlan>
<bluetooth>Yes</bluetooth>
<infrared>No</infrared>
</phone>
<phone>
<manufacturer>Nokia</manufacturer>
<model>6500</model>
<type>slider</type>
<camera>3.2MP</camera>
<memoryslot>Micro SD</memoryslot>
<wlan>No</wlan>
<bluetooth>Yes</bluetooth>
<infrared>No</infrared>
</phone>
<phone>
<manufacturer>Sony Ericsson</manufacturer>
<model>W960</model>
<type>bar</type>
<camera>3.15MP</camera>
<memoryslot>Memory Stick</memoryslot>
<wlan>No</wlan>
<bluetooth>Yes</bluetooth>
<infrared>No</infrared>
</phone>
</catalog>
If we want to display this data in a presentable way on screen we must use XSLT to "Transform" the XML into XHTML.
We do this by creating an XSL style sheet (we'll call it phonecatalog.xsl) starting with the following "correct" declaration at the top of the file:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
...now we add some XPATH logic to this style sheet:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<body>
<h2>My favourite mobile phones</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Manufacturer</th>
<th align="left">Model</th>
</tr>
<xsl:for-each select="catalog/phone">
<tr>
<td><xsl:value-of select="manufacturer"/></td>
<td><xsl:value-of select="model"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The text in bold drills down into the catalog/phone nodes and extracts the values for manufacturer and model. For more information on XPATH click here.
Then we add the XSL style sheet reference (highlighted in blue) into our original XML document - phonecatalog.xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="phonecatalog.xsl"?>
<catalog>
<phone>
<manufacturer>Motorola</manufacturer>
<model>RAZR V8</model>
<type>clamshell</type>
<camera>2MP</camera>
<memoryslot>No</memoryslot>
<wlan>No</wlan>
<bluetooth>Yes</bluetooth>
<infrared>No</infrared>
</phone>
<phone>
<manufacturer>Nokia</manufacturer>
<model>6500</model>
<type>slider</type>
<camera>3.2MP</camera>
<memoryslot>Micro SD</memoryslot>
<wlan>No</wlan>
<bluetooth>Yes</bluetooth>
<infrared>No</infrared>
</phone>
<phone>
<manufacturer>Sony Ericsson</manufacturer>
<model>W960</model>
<type>bar</type>
<camera>3.2MP</camera>
<memoryslot>Memory Stick</memoryslot>
<wlan>No</wlan>
<bluetooth>Yes</bluetooth>
<infrared>No</infrared>
</phone>
</catalog>
If you have an XSLT compliant browser it will transform the XML into XHTML: See the result here
If you wish to extract PART of the data from the XML (say just the phones with a 3.2MP camera) this is what the XSL would look like:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<body>
<h2>My favourite mobile phones (with 3.2MP cameras)</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Manufacturer</th>
<th align="left">Model</th>
</tr>
<xsl:for-each select="catalog/phone[camera='3.2MP']">
<tr>
<td><xsl:value-of select="manufacturer"/></td>
<td><xsl:value-of select="model"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The text in bold is the additional filter applied to the XML: See the result here