18.3.5- Databinding

by NT Community Manager.
Last Updated by NT Community Manager.

Public Categorized as 18. An Introduction to XML.

Not tagged.

<< 18.3.4- Creating XML from a Relational Database

Databinding

Another way of exposing XML in web pages is using an XML Data Island. They were introduced in IE5 and use the XML Data Source Object (DSO), which is made available to IE5 using the <XML> tag. Using the XML DSO we can bind HTML elements to an XML data set, so we can use a table to display the data and move between the records in the XML file.

Embedding an XML data island into an HTML page is easy, we just add an <XML> tag and give a name for our data island using the id attribute, like so:

This creates a data island we can refer to through the name xmldata. It is actually a COM object, but we do not need to use the CreateObject method, because of this new <XML> tag.

Note that this is an HTML element and not an XML element, so it must have a separate closing tag-you can't use <XML ID="XMLData" />.

So, we now have our data island — which exposes the DSO — but, as yet, it has no content. There are two ways of providing this content. The first and simplest is to simply place the XML content within the boundaries of the <XML> tag:

<books>

<book>

<title>XML Applications</title>

</book>

<book>

<title>IE5 XML Programmer's Reference</title>

</book>

<books>

</XML>

Note that the top-level tag <books> is analogous to a recordset. It contains, in this example, two 'rows', named book, and each of these 'rows' contains three columns, named title, quantity and ISBN respectively. Directly listing XML content in a data island is a simple yet effective approach for small quantities of data.

The other technique for populating the data island with XML, which we will use shortly, is to specify an external source for the content through the src attribute of the <XML> tag. This external source need not necessarily be an XML file, it just needs to be a file that will provide the data island with XML (we could, for example, use an ASP page that creates XML).

Before we get down to using a data island, we need to discuss the XML Data Source Object in a little more detail.

The XML Data Source Object

Microsoft Data Access Components (also referred to as Universal Data Access) are a set of COM interfaces, designed to replace ODBC. Rather than merely putting a component wrapper around relational data access, a new layer of abstraction was introduced. Their aim is to provide one single approach to accessing any body of persistent data that can be expressed in terms of rows and columns (comma delimited text, XML, Excel Spreadsheets, relational databases, etc.). This family of interfaces collectively take the name Microsoft Data Access Components (MDAC), providing robust data access services to COM-aware applications.

Although comparatively new, MDAC are the designated successor to ODBC. Although MDAC provides a driver for ODBC sources, database vendors are beginning to provide native OLE-DB drivers in order to support MDAC. We have already met ADO (ActiveX Data Objects) earlier in the book. They provide the client side of MDAC. Data binding, which has been used in Microsoft Foundation Classes for a long time, and more recently a feature of Microsoft's implementation of Dynamic HTML (or DHTML), is a popular technique now built on top of MDAC.

One of the key ideas behind Microsoft's Universal Data Access strategy is the ability to provide access to data without respect to their underlying native storage format. The XML Data Source Object is an ideal demonstration of this. In the earliest implementation of XML support in Windows, XML DSO was a Java applet. In the latest version, however, the DSO is a COM object closely integrated with Internet Explorer. The DSO exposes XML-encoded text as both data rowsets (as if they were from a relational database), and also as XML DOM parse trees. The choice of which to use is ours; we are able to use whichever model best suits our programming needs. We shall start off by embedding an XML data island into our page, because XML data islands actually expose the XML DSO.

OK, let's use the XML DSO to create a table that allows users to scroll through books, their ISBNs and the quantity available.

These are the steps we shall take:

Create an XML data source
Embed a data island into an HTML page
Link the data island our XML data source
Link HTML <INPUT> tags into the DSO
Provide buttons for navigating through the XML

Try It Out - Navigating Through an XML Data Source from an HTML page

1. Fire up your favourite text editor; the first thing we are going to do is create our XML document. Type in the following code:

<books>

<book>

<title>XML Applications</title>

</book>

<book>

<title>IE5 XML Programmer's Reference</title>

</book>

<book>

<title>Designing Distributed Applications</title>

</book>

<book>

<title>XML Design and Implementation</title>

</book>

</books>

2. Save the file with the name booklist.xml, in your XMLFiles folder. We have now created our XML source file. We now want to populate a data island with XML from this source.

3. We need to create an HTML page that incorporates a data island, using the HTML <XML> tag. In your text editor, create a new file called databinding.html (again, save it in the XMLFiles folder). Type in the following code:

<HTML>

<HEAD>

<TITLE>Data Binding Sample 1</TITLE>

</HEAD>

<BODY>

We have now created our data island, which exposes the DSO. We access our XML source file via the DSO interfaces, using <input> tags in our HTML page.

4. At the bottom of your databinding.html file, add the following:

<h1>Navigating the BookList XML file</h1>

<TD><FONT color="maroon" size="2">Title</FONT></TD>

<TD>

<INPUT dataFld="title" datasrc="#xmlData" style="HEIGHT: 22px; WIDTH:

286px">

</TD>

</TR>

<TD><FONT color="darkred" size="2">Quantity</FONT></TD>

<TD>

<INPUT dataFld="quantity" datasrc="#xmlData" style="HEIGHT: 22px; WIDTH:

286px">

</TD>

</TR>

<TD>

<INPUT dataFld="ISBN" datasrc="#xmlData"

style="HEIGHT: 22px; WIDTH: 286px">

</TD>

</TR>

</TABLE>

5. Our last task is to add some buttons to our page to navigate through the data island (and thus the data in our XML page). Add the following HTML to the bottom of the databinding.html page:

<INPUT id="button1" name="button1" onclick="xmlData.recordset.moveFirst()"

type="button" value="First">

<INPUT id="button2" name="button2" type="button" value="<" onClick="if

(xmlData.recordset.absoluteposition > 1)

xmlData.recordset.movePrevious()">

<INPUT id="button3" name="button3" type="button" value=">" onClick="if

(xmlData.recordset.absoluteposition <

xmlData.recordset.recordcount)

xmlData.recordset.moveNext()">

<INPUT id="button4" name="button4" type="button" value="Last"

onClick="xmlData.recordset.moveLast()">

</BODY>

</HTML>

6. Save your databinding.html file, open up your browser and navigate it. You should be able to scroll through the records, checking the stock levels of the books, just as if the data were coming from a relational database:

Chapter18_image020

How It Works

The first thing we did was to create the XML file, booklist.xml, which will be our data source:

<books>

<book>

<title>XML Applications</title>

</book>

...

The top-level tag <books> is analogous to a recordset. Underneath it is the first 'row', identified by the <book> tag. This 'row' contains three columns, named title, quantity and ISBN respectively. The books 'recordset' contains three other book rows, each containing three columns that describe a particular book. This is the source file that will feed our data island.

Creating the Data Island

The next thing we did was to start to construct an HTML page that incorporated a data island, using the <XML> tag:

<HTML>

<HEAD>

<TITLE>Data Binding Sample 1</TITLE>

</HEAD>

<BODY>

Thus we have created a data island called xmlData and thus have exposed the DSO. We used the src attribute of the <XML> tag to define our booklist.xml file as the data source.

When the page is loaded, Internet Explorer will read the data from booklist.xml file. When a data island is loaded with a page, Internet Explorer transparently loads the data into a parse tree and offers several COM interfaces (exposing methods and properties) for our use. The standard DSO interfaces allow XML elements to participate in data binding as if the data were coming from a database. In addition, the familiar XML DOM interfaces are available as well. This is not surprising, as MSXML is the component that implements the XML DSO. The DSO parses the XML content and keeps bound elements synchronized with the content. As the user navigates through the rowset, the DSO will navigate through the parse tree, exposing each top-level child in turn as a 'row' of data.

We already have our XML data island, which exposes the XML DSO. Once the page is loaded we can either access the XML file through the standard DOM interfaces or through the COM interfaces supplied by the XML DSO (whichever you prefer to program in).

Displaying the Data

We display our book data by binding the XML DSO to HTML <INPUT> elements, allowing us to navigate the data as if it were coming from a relational database.

We simply link the <INPUT> elements in our page to the XML DSO by adding two attributes:

dataSrc
dataFld

The dataSrc attribute value is the name of the DSO with the prefix #. Remember, in this example, we called our data island xmlData, so we use datasrc="#xmlData".

The dataFld attribute specifies which column of the rowset provided by the DSO should be bound to the page element. So, in this example, our first <INPUT> element displays the title of the book, so we need to link to the <title> element of our XML file.

<h1>Navigating the BookList XML file</h1>

<TD><FONT color="maroon" size="2">Title</FONT></TD>

<TD>

<INPUT dataFld="title" datasrc="#xmlData" style="HEIGHT: 22px; WIDTH:

286px">

</TD>

</TR>

We specify dataFld and dataSrc attributes for each of the other INPUT elements in the same manner:

<TD><FONT color="darkred" size="2">Quantity</FONT></TD>

<TD>

<INPUT dataFld="quantity" datasrc="#xmlData" style="HEIGHT: 22px; WIDTH:

286px">

</TD>

</TR>

<TD>

<INPUT dataFld="ISBN" datasrc="#xmlData"

style="HEIGHT: 22px; WIDTH: 286px">

</TD>

</TR>

</TABLE>

That will bind the user interface elements to the XML data. But, when we first view the page it will display the first <title> element from our XML file - which was XML Applications. So, we need to give the users some way of looking at the details of the other books.

Navigating through the Data Island

There are a number of ways we could move between the data in the XML file. In this example we use a recordset property. All the properties and methods of an ADO recordset are accessible through the data island's recordset property. In our example, we would move the internal cursor of the DSO to the next row of the recordset like so:

XMLdata.Recordset.MoveNext()

This is what we use to allow the users to move between the books in stock on our page. This is just how we can manipulate data from a database using the ADO recordset property.

<INPUT id="button1" name="button1" onclick="xmlData.recordset.moveFirst()"

type="button" value="First">

<INPUT id="button2" name="button2" type="button" value="<" onClick="if

(xmlData.recordset.absoluteposition > 1)

xmlData.recordset.movePrevious()">

<INPUT id="button3" name="button3" type="button" value=">" onClick="if

(xmlData.recordset.absoluteposition <

xmlData.recordset.recordcount)

xmlData.recordset.moveNext()">

<INPUT id="button4" name="button4" type="button" value="Last"

onClick="xmlData.recordset.moveLast()">

The key is in the inline fragments we provide to handle the onClick event. For example, look at the handler for moving ahead one row:

If (xmlData.recordset.absoluteposition < xmlData.recordset.recordcount)

xmlData.recordset.moveNext()

The ADO recordset object is a child of the data island, and the absoluteposition property tells us what row the cursor is on. In this handler, if the cursor isn't on the last row of the recordset, we tell it to advance to the next row. When this happens, the DSO keeps the <INPUT> elements synchronized with the recordset, and the user sees the values for the next <book> element. Then simply add the following to end the page.

</BODY>

</HTML>

That's it! We can now scroll through the records, checking the stock levels of books. It's as simple as that, we don't need manipulation scripts since we have the data exposed by the XML DSO as if it were coming from a relational database.

<< 18.3.4- Creating XML from a Relational Database

Chapter18

18.4.0- Summary >>