| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Want to organize your cloud files? Sign up for a free webinar to see how Dokkio (a new product from PBworks) can help you find, organize, and collaborate on your Drive, Gmail, Dropbox, and Slack files: Weds, May 27 at 2PM Eastern / 11AM Pacific
View
 

Lecture - XML -  Displaying and XML Page with XSL

Page history last edited by Dr. Ron Eaglin 5 years, 3 months ago

 

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/ 

W3Schools web site for XSL - http://www.w3schools.com/xsl/ 

 

 

 

 

 

COP 4813 Lectures

Comments (0)

You don't have permission to comment on this page.