Displaying an XML Page with XSL

Prerequisites

Some basic HTML and Javascript knowledge, specifically Javascript functions

Summary

Topics Covered:

Displaying XML in a custom format

Using javascript to apply XML to the XSL

Video

http://online1.daytonastate.edu/player2.php?id=ac34ae1fda29b8fe781ac8d6d32a6bc7

Reference Materials

Note I have placed a fully commented code at CD Catalog Example Code

Using .NET control to do this is at http://www.codeproject.com/Articles/469723/Rendering-XML-Data-as-HTML-using-XSL-Transformatio

cdcatalog.xml

<?xml version="1.0" encoding="ISO-8859-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>
  <cd>
    <title>Nil Recurring</title>
    <artist>Porcupine Tree</artist>
    <country>UK</country>
    <company>KScope</company>
    <price>14.11</price>
    <year>2010</year>
  </cd>
  <cd>
    <title>Yum Yum Tree</title>
    <artist>Ozric Tentacles</artist>
    <country>UK</country>
    <company>Snapper UK</company>
    <price>16.18</price>
    <year>2009</year>
  </cd>
  <cd>
    <title>In the Court of the Crimson King</title>
    <artist>King Crimson</artist>
    <country>USA</country>
    <company>Discipline US</company>
    <price>12.66</price>
    <year>2004</year>
  </cd>
</catalog>

cdcatalog.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
      <td><xsl:value-of select="year"/></td>
      </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

cdcatalog.html

<html>
<head>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest(); // Everything but IE
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");  // IE Only
  }
xhttp.open("GET",dname,false);   // Open the file
xhttp.send("");
return xhttp.responseXML;
}
function displayResult(fname)
{
xml=loadXMLDoc(fname+".xml");
xsl=loadXMLDoc(fname+".xsl");
// code for IE
if (window.ActiveXObject)
  {
  ex=xml.transformNode(xsl);
  document.getElementById("example").innerHTML=ex;
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById("example").appendChild(resultDocument);
  }
}
</script>
</head>
<body onload="displayResult('cdcatalog')">
<div id="example" />
</body>
</html>

I had a request to put up the DTD for this XML –

cdcatalog.dtd

<!ELEMENT catalog(cd) >

<!ELEMENT cd (title, artist, country, company, price, year) >

<!ELEMENT title (#PCDATA) >

<!ELEMENT artist (#PCDATA) >

<!ELEMENT country (#PCDATA) >

<!ELEMENT company (#PCDATA) >

<!ELEMENT price (#PCDATA) >

<!ELEMENT year (#PCDATA) >

Additional Information

W3Schools web site for XML – http://www.w3schools.com/xml/

COP 4813 Lectures