y capitalizing on Internet Explorer's ability to embed XML data islands in Web pages you can create customized data-display pages with just a few lines of JavaScript



In today's IT world, Extensible Markup Language (XML) is fast becoming the language of choice for transportable data. XML's allure lies in its ability to present a structured environment for data from virtually any data source. Almost every data repository is now able to produce an XML view of its data either natively or through a parsing program.Unfortunately, Web browsers don't automatically display XML data in a form that users can interact with easily. What can you do to display XML data in a usable form?



Internet Explorer (IE) 5 lets you embed XML documents in HTML pages—a capability known as "data islands." One of the simplest solutions to the XML display problem is to bind objects on the page to the data using Microsoft's DSO (Data Source Object) binding technology. When your clients use IE5, all you need to do is create a data island, write some simple JavaScript, and you're home free! In this 10-Minute solution, you'll see how to consume data stored in an XML document using Internet Explorer 5 (IE5), some simple JavaScript, and an XML data island. Because data islands are proprietary, this solution is more appropriate for an intranet standardized on IE5 than for an Internet application.

Creating an XML Consumer
An XML consumer is any page that uses or "consumes" XML data. The process to create an XML consumer is straightforward:

1. Create (or obtain) the XML data source
2. Create the data island inside your Web page
3. Bind data fields to the data island
4. Create a mechanism for navigating through the records

Create the XML Data Source
The application you'll create is a simple employee directory. The XML data for the application is admittedly incomplete when compared to that typically received from a relational database (there's no primary key, for example) but it is sufficient for demonstration purposes. The cool part about the EmployeeDirectory application is that the application does not have to reside on a Web server—it works as a stand-alone client-side application. IE5 instantiates an XML Data Source Object (DSO) and lets you manipulate the data either as a DOM object or as an ADO recordset.

Open up your favorite text editor and create the following XML document:

 <?xml version="1.0"?>
<employees>
<employee>
<lastName>Smith</lastName>
<firstName>Jill</firstName>
<title>President</title>
<department>All</department>
<extension>160</extension>
</employee>
<employee>
<lastName>Roberts</lastName>
<firstName>William</firstName>
<title>Vice President</title>
<department>Marketing</department>
<extension>175</extension>
</employee>
<employee>
<lastName>Gonzalez</lastName>
<firstName>Alejandra</firstName>
<title>Vice President</title>
<department>Sales</department>
<extension>188</extension>
</employee>
<employee>
<lastName>Billiker</lastName>
<firstName>Brian</firstName>
<title>Senior Software Architect</title>
<department>Information Systems</department>
<extension>176</extension>
</employee>
<employee>
<lastName>Williamson</lastName>
<firstName>Tara</firstName>
<title>Account Manager</title>
<department>Sales</department>
<extension>196</extension>
</employee>
</employees>

Save the file as data.xml in a clean directory (all of the files for the Employee Directory application will reside in the same folder). That completes the first phase!

Create the Data Island in Your Web Page
Creating the data island is actually the easiest part of the application. Simply add an <xml> element to your page and set its src attribute to point to the XML file you just created:

 <xml id="data" src="data.xml"></xml>

Take note of the id attribute. IE5 uses that identifier for the XML DSO. From this point forward, you can refer to the DSO as "data" in script and you'll have access to all of the DOM and ADO properties of the DSO object. The <xml> element is an HTML element and requires a closing </xml> tag.

Alternatively, you can embed the data directly inside the <xml> element:

 <xml id="data">
<?xml version="1.0"?>
<!&#151;XML goes here -->
</xml>

I find it more palatable to separate the data from its presentation so I recommend using an external file—but either method works just fine. In either case, IE5 creates an instance of the Microsoft XML (MSXML) DOMDocument object and loads the XML data into the object.

Bind Data Fields to the Data Island
Binding data fields to the data island is also relatively simple. Binding is the term for creating an automatic connection between a data source and a data consumer. To bind the source to the consumer, you must specify the name of the source object and a column name. A bound data consumer's contents update automatically as you move through the source data. For this display-only application, span tags are appropriate. Just add two new attributes to the <span> element, for example:

 <span dataSrc="#data" dataFld="lastName"></span>

Figure 1. Binding Fields: The dataSrc and dataFld attributes in the span tags embedded in the table cells bind them to the individual fields in the XML document. When the page loads, IE parses the XML data, retrieves the field values from the first employee element, and fills the span tags with the values.

The dataSrc attribute indicates which data island contains the data for the <span> tag, and the dataFld attribute contains the name of the specific data field containing the <span> element data. Note that you set the dataSrc attribute value to the <xml> element's id attribute preceded by the pound (#) sign.

That's it! IE5 takes care of the internal plumbing required to synchronize the XML DSO and the <span> element. When the page loads, the text fields will display the indicated data field of the first record (node) in the XML data tree.

Here's the code that binds the fields of the data island in the Employee Directory (see Figure 1):

 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Strict//EN"
"DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>XML Data Binding Demo</title>
<script src="xmlNav.js">
</script>
</head>
<body>
<xml id="data" src="data.xml"></xml>
<h2 style="color: navy;
font-family:
Verdana,sans-serif">
Employee Directory
</h2>
<table border="0"
style="font: 10pt Verdana,sans-serif;
color: navy; background-color:
rgb(255,255,200)"
cellpadding="5">
<tr>
<td>Last Name </td>
<td>
<span style="background: white;
width:150; border: inset;
border-width:1" dataSrc="#data"
dataFld="lastName"></span>
</td>
<td>FirstName </td>
<td><span style="background: white;
width:150; border: inset;
border-width:1" dataSrc="#data"
dataFld="firstName"></span>
</td>
</tr>
<tr>
<td>Title </td>
<td><span style="background: white;
width:150; border: inset;
border-width:1" dataSrc="#data"
dataFld="title"></span>
</td>
<td>Department </td>
<td>
<span style="background: white;
width:150; border: inset;
border-width:1" dataSrc="#data"
dataFld="department"></span>
</td>
</tr>
<tr>
<td>Extension </td>
<td>
<span style="background: white;
width:150; border: inset;
border-width:1" dataSrc="#data"
dataFld="extension"></span>
</td>
<td>
<input type="button"
value="|<" onClick="first()">
</input>
<input type="button"
value="<" onClick="previous()">
</input>
<input type="button"
value=">" onClick="next()">
</input>
<input type="button"
value=">|" onClick="last()">
</input>
</td>
</tr>
</table>
</body>
</html>

Create The Navigation Mechanism
At this point, the Employee Directory isn't very useful. You can see only the first record of the data island. You can think of "flat" XML documents like this example, where the elements translate to rows and columns, as the equivalent of database tables. In fact, you can treat them as a set of scrollable records. Therefore, adding a navigation system is also rather simple. First, create an external JavaScript file in your favorite text editor, and then add the following code and save the file in the same directory as data.xml:

 function first(){
data.recordset.moveFirst();
}
function previous(){
if(data.recordset.absoluteposition>1)
data.recordset.movePrevious();
}
function next(){
if(data.recordset.absoluteposition <
data.recordset.recordcount)
data.recordset.moveNext();
}
function last(){
data.recordset.moveLast();
}

The four functions above represent movement through the records exposed by the data island. They encapsulate simple ADO record set commands and are virtually self-explanatory. Note that you refer to the data island in script by the same name as that specified in the id attribute of the <xml> element. By referring to the recordset sub-object, you can make use of all of the commands of an ADO record set. Now that's handy!

Add Navigation Buttons
There's not much left to do. You'll need to add a script tag to the HTML document that references xmlNav.js:

 <script src="xmlNav.js">
</script>

Finally, create the navigation buttons that use the xmlNav.js script:

 <input type="button" value="|<"
onClick="first()"></input>
<input type="button" value="<"
onClick="previous()"></input>
<input type="button" value=">"
onClick="next()"></input>
<input type="button" value=">|"
onClick="last()"></input>

As you've seen, creating and connecting to an XML data island is extremely simple. The results, however, are a powerful mechanism for data presentation. And that's the rub: the Employee Directory is a display-only mechanism. The data isn't updateable. However, this display-only solution is just the beginning. It's quite possible to create an application that lets viewers modify and save the XML data.

In next month's column, I'll discuss a mechanism to edit, add, and delete records by treating the data island as both an ADO record set and an XML DOM object. I'll also discuss a few ways you can save the updated data to a persistent store.