Pages

Wednesday, April 1, 2009

Displaying XML Data Islands with JavaScript

Printed from http://www.devx.com/getHelpOn/10MinuteSolution/16482/1954

By 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.
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.


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 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 tag, and the dataFld attribute contains the name of the specific data field containing the element data. Note that you set the dataSrc attribute value to the 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 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.

Tom Duffy , DevX's new JavaScript Pro, is an Associate Professor at
Norwalk Community College, Norwalk, CT where he teaches Web Development and
Java. Tom is also the Manager of the NCC Ventures Lab, the College's
in-house Web design studio.

No comments: