XML Applications

This chapter demonstrates a small framework for an XML application.

Start with an XML document

First we start with a simple XML document.

Take a look at our original demonstration document, the CD catalog.

<?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>
.
.
... more ...
.

If you have Internet Explorer 5.0 or higher, see the full XML file.

Load the document into a Data Island

A Data Island can be used to access the XML file.

To get your XML document "inside" an HTML page, add an XML Data Island to the page.

<xml src="cd_catalog.xml" id="xmldso" async="false">
</xml>

With the example code above, the XML file "cd_catalog.xml" will be loaded into an "invisible" Data Island called "xmldso". The async="false" attribute is added to the Data Island to make sure that all the XML data is loaded before any other HTML processing takes place.

Bind the Data Island to an HTML Table

An HTML table can be used to display the XML data.

To make your XML data visible on your HTML page, you must "bind" your XML Data Island to an HTML element.

To bind your XML data to an HTML table, add a data source attribute to the table, and add data field attributes to <span> elements inside the table data:

<table datasrc="#xmldso" width="100%" border="1">

<thead>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
</thead>

<tr align="left">
<td><span datafld="TITLE"></span></td>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="YEAR"></span></td>
</tr>

</table>

If you have Internet Explorer 5.0 or higher: See how the XML data is displayed inside an HTML table.

Bind the Data Island to <span> or <div> elements

<span> or <div> elements can be used to display XML data.

You don't have to use a table to display your XML data. Data from a Data Island can be displayed anywhere on an HTML page.

All you have to do is to add some <span> or <div> elements to your page. Use the data source attribute to bind the elements to the Data Island, and the data field attribute to bind each element to an XML element, like this:

<br />Title:
<span datasrc="#xmldso" datafld="TITLE"></span>
<br />Artist:
<span datasrc="#xmldso" datafld="ARTIST"></span>
<br />Year:
<span datasrc="#xmldso" datafld="YEAR"></span>

or like this:

<br />Title:
<div datasrc="#xmldso" datafld="TITLE"></div>
<br />Artist:
<div datasrc="#xmldso" datafld="ARTIST"></div>
<br />Year:
<div datasrc="#xmldso" datafld="YEAR"></div>

If you have Internet Explorer 5.0 or higher: See how the XML data is displayed inside the HTML elements.

Note that if you use a <div> element, the data will be displayed on a new line.

With the examples above, you will only see one line of your XML data. To navigate to the next line of data, you have to add some scripting to your code. 

Add a Navigation Script to your XML

Navigation has to be performed by a script.

To add navigation to the XML Data Island, create a script that calls the movenext() and moveprevious() methods of the Data Island.

<script type="text/javascript">
function movenext()
{
x=xmldso.recordset
if (x.absoluteposition < x.recordcount)
	{
	x.movenext()
	}
}
function moveprevious()
{
x=xmldso.recordset
if (x.absoluteposition > 1)
	{
	x.moveprevious()
	}
}
</script>

If you have Internet Explorer 5.0 or higher: See how you can navigate through the XML records.

All Together Now

With a little creativity you can create a full application.

If you use what you have learned on this page, and a little imagination, you can easily develop this into a full application.

If you are running Internet Explorer 5.0 or higher: See how you can add a little fancy to this application.

Jump to: Top of Page or HOME or Printer friendly page

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

• Tell your newsgroup or mailing list
• Link to us from your pages
• Help us correct errors and broken links
• Help us with spelling and grammar
• Validate the XHTML code of this page

W3Schools is for training only. We do not warrant its correctness or its fitness for use. The risk of using it remains entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2002 by Refsnes Data. All Rights Reserved

How we converted to XHTML