Tutorials » A Beginners Guide to Creating and Displaying Your First XML Document

Part 2: Displaying an XML Document Return to Part 1

The data in an XML document cannot be directly displayed on a browser. Therefore we must apply additional technology to create an HTML page that contains the XML data. We will discuss two ways to do this: data binding and XSL.

Essentially we will be using the XML document as a database and we will be able to access the values for any data field. Also, in the case of data binding, we will show how easy it is to navigate through the data. However, remember that the technologies in this tutorial are designed to be used on the client side only with Internet Explorer.

Displaying XML using Data Binding

Internet Explorer 4 and 5 contain a DSO (Data Source Object) that permits displaying the data in an XML document on an HTML page by using the technology of client-side data binding. This involves taking the XML data from the server-side, transferring the data to the client-side, caching the data on the client-side for future access, and binding the data to an HTML tag. The data is treated like a record set in ADO and the data can be manipulated by using the various methods and properties of the ADO Recordset object. In our example, we will use these features to navigate through our data. Once the data is bound to an HTML tag, it can be viewed on IE 4 or 5.

There are fifteen HTML tags that can be used for data binding:

a	iframe	object
applet	img	select
button	input	span
div	label	table
frame	marquee	textarea

These fifteen tags can use two special proprietary attributes, datasrc and datafld, that are only recognized on IE 4 and 5.

datasrc
The datasrc attribute allows the linking of the HTML tag to the XML data document.

datafld
The datafld attribute is used to name the XML data field that we wish to display.

These attributes are very easy to use and only require one line of code to access an XML data value. The pound sign # signifies a link. Note that this is a complete HTML element with both an opening and closing tag.

Code:
<span datasrc="#xmlStaff" datafld="name"></span>

Data Binding Example

For our data binding example, we will modify our DevGuru staff list XML document. For ease of understanding and to keep our example simple, we have removed the empID and age attributes (since handling attributes would add a layer of coding complexity to the data binding).

Here is the code for devguru_staff_list.xml:
<?xml version="1.0"?>
<devguru_staff>
   <programmer>
      <name>Bugs Bunny</name>
      <dob>03/21/1970</dob>
      <ssn>111-11-1111</ssn>
   </programmer>
   <programmer>
      <name>Daisy Duck</name>
      <dob>08/09/1949</dob>
      <ssn>222-22-2222</ssn>
   </programmer>
   <programmer>
      <name>Minnie Mouse</name>
      <dob>04/13/1977</dob>
      <ssn>333-33-3333</ssn>
   </programmer>
   <programmer>
      <name>Pluto</name>
      <dob>07/04/1979</dob>
      <ssn>444-44-4444</ssn>
   </programmer>
   <programmer>
      <name>Porky Pig</name>
      <dob>11/30/1956</dob>
      <ssn>555-55-5555</ssn>
   </programmer>
   <programmer>
      <name>Road Runner</name>
      <dob>01/19/1953</dob>
      <ssn>666-66-66661</ssn>
   </programmer>
</devguru_staff>

To view this XML document in a separate window, please click here.

Our goal is to create an HTML page that displays the XML data for the date of birth (dob), name (name), and social security number (ssn) for one staff member at a time. Further, we want to be able to scroll through the list of staff members using navigation buttons and see the data for any staff members.

To accomplish this, we will:

use the src attribute of an inline xml element to link our HTML page to the XML document.
use the HTML span tag for the data binding.
use the datasrc attribute to link the each span element to the xml element.
use the datafld attribute to bind the specified XML data value to the span element.
use previous and next input buttons to call data navigation functions.
use the MoveNext and MovePrevious ADO methods to navigate our data.
use the RecordCount and AbsolutePosition ADO properties to limit our data navigation so that we never go to BOF or EOF.

Here is the code for devguru_staff_list.html:
<html>
<title>Data Binding Example</title>
<body>




<xml id="xmlStaff" src="devguru_staff_list.xml">
</xml>

<b>Use the buttons to scroll up and down the DevGuru Staff List</b>
<br><br>





NAME: <span datasrc="#xmlStaff" datafld="name"></span>
<br>

DOB: <span datasrc="#xmlStaff" datafld="dob"></span>
<br>
SSN: <span datasrc="#xmlStaff" datafld="ssn"></span>
<br> <br>



<input type="button" value="Previous" onclick="Previous()">
<input type="button" value="Next" onclick="Next()">


<script type="text/javascript">
function Previous()
   {
   // MoveNext() and MovePrevious() are methods of the ADO Recordset object
   // RecordCount and AbsolutePosition are properties of the ADO Recordset object
   // we do not allow a move to before the first record
   if(xmlStaff.recordset.AbsolutePosition > 1)
      xmlStaff.recordset.movePrevious();
   }
function Next()
   {
   // we do not allow a move past the last record
   if(xmlStaff.recordset.AbsolutePosition < xmlStaff.recordset.RecordCount)
      xmlStaff.recordset.moveNext();
   }
</script>

</body>
</html>

To view the output in a separate window, Please click here.

Displaying XML Using XSL

XSL is the acronym for the Extensible Stylesheet Language which is an application of XML. XSL is a powerful styling language that uses special stylesheets to create templates to display the data contained in an XML page in a variety of ways. For our purposes, we will use XSL to transform an XML document into an HTML page that can be viewed on Internet Explorer. We do this by creating a separate XSL document that is linked to the XML document.

This technology can only be used with IE 5. Be aware that the Microsoft version of XSL does not fully support all of the recommendations set forth for this language by the World Wide Web Consortium (W3C). (However, XSL can be used on the server-side so that the output is browser independent.)

XSL is not a large language. It is composed of twenty basic tag-like elements and associated attribute-like methods. Like XML, all XSL elements must have an opening and closing tag. All XSL tags have the same namespace prefix, xsl:, to denote that this is an XSL element. Note the use of the colon. After the prefix, the suffix designates the tag's purpose.

For example:
<xsl:for-each select="aquarium">

In order to display our XML document, we only need three of the XSL elements.

xsl:template
The xsl:template element is used to define a template. It can also be used as a container element to declare the start and stop of an XSL coding sequence and we will use it in this manner in our examples. In order for this to work in IE 5, we must use the following code exactly:

<xsl:template xmlns:xsl="http://www.w3.org/TR/WD-xsl">

xsl:for-each
The xsl:for-each element is used to create a For ... Each loop which allows looping through all the values for an XML data field. We will use the select attribute to specify the name of the XML data element.

xsl:value-of
The xsl:value-of element is used to insert the value of the XML data field into the template. We will use the select attribute to specify the name of the XML data field. As you will see in the examples, the xsl:value-of element allows us to display the data value for an XML tag.

XSL Examples
Again we use our very simple aquarium example and again we need to make a change. We must add one line of code using the xml-stylesheet tag which links aquarium.xml to aquarium.xsl by using the href attribute and we also set the type attribute.

Here is the code for aquarium_two.xml:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="aquarium_two.xsl"?>
<aquarium>
   <fish>neon tetra</fish>
</aquarium>

Here is the code for aquarium_two.xsl:
<?xml version="1.0"?>

<xsl:template xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<html>
<body>


<xsl:for-each select="aquarium">
   <div>
   
   
   <xsl:value-of select="fish" />
   </div>

</xsl:for-each>
</body>
</html>

</xsl:template>

To see the aquarium_two.xsl file in a separate window, please click here.
To see an actual demonstration in a separate window, please click here.

Our first example was purposely kept very simple (an output of only one data value!). Next we will apply the same concepts to a larger XML document that contains more data values. As you review the second example, remember that we could just as easily apply this to a very large collection of data values.

For our second example, we use the same DevGuru staff list XML document that we used for the data binding example. As with our first XSL example, we also need to add the xml-stylesheet element to link devguru_staff_list_two.xml to devguru_staff_list_two.xsl.

The code for devguru_staff_list_two.xml:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="devguru_staff_list_two.xsl"?>
<devguru_staff>
   <programmer>
      <name>Bugs Bunny</name>
      <dob>03/21/1970</dob>
      <ssn>111-11-1111</ssn>
   </programmer>
   <programmer>
      <name>Daisy Duck</name>
      <dob>08/09/1949</dob>
      <ssn>222-22-2222</ssn>
   </programmer>
   <programmer>
      <name>Minnie Mouse</name>
      <dob>04/13/1977</dob>
      <ssn>333-33-3333</ssn>
   </programmer>
   <programmer>
      <name>Pluto</name>
      <dob>07/04/1979</dob>
      <ssn>444-44-4444</ssn>
   </programmer>
   <programmer>
      <name>Porky Pig</name>
      <dob>11/30/1956</dob>
      <ssn>555-55-5555</ssn>
   </programmer>
   <programmer>
      <name>Road Runner</name>
      <dob>01/19/1953</dob>
      <ssn>666-66-6666</ssn>
   </programmer>
</devguru_staff>

The corresponding XSL document is an extension of the first example, in that we display the name, date of birth, and the social security number for all staff members. We also add some text and HTML tags to create a layout appearance for our HTML page. Note that all HTML and XSL tags are closed.

Here is the code for devguru_staff_list_two.xsl:
<?xml version="1.0"?>
<xsl:template xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<html>
<body>
<xsl:for-each select="devguru_staff/programmer">
   <div>
   NAME: <xsl:value-of select="name" />
   <br />
   DOB: <xsl:value-of select="dob" />
   <br />
   SSN: <xsl:value-of select="ssn" />
   <hr />
   </div>
</xsl:for-each>
</body>
</html>
</xsl:template>

To see the devguru_staff_list_two.xsl file, please click here.
To see an actual demonstration, please click here.

Undoubtedly, XML will play an increasingly important role in web site development. The Guru hopes that you found this tutorial to be a good introduction to XML and urges you to learn more about this technology.

Return to Part 1

Print this Page

E-mail this Page