Using the XML Data Source Object

So far in this chapter, we have used the XML document as a source of data, but we did it by loading the document into the processor, walking the document tree, and working with the data one node at a time. This technique has demonstrated how you can work with XML in much the same way as you would work with records in a database. However, there is another way to work with XML data. Using the XML DSO, you can bind data to controls on an HTML page. This lets you work with the data one node at a time, if you want, but you can also work with the data in "chunks," or multiple nodes at a time, without having to walk the document tree.

NOTE
The XML DSO is supported by Microsoft Internet Explorer versions 4 and later.

Working with One Record at a Time

Using the XML DSO and the object model, you can continue to walk an XML document tree in much the same way as you have been doing. The significant difference, though, is that the data is bound to specific controls on the page and the controls are automatically populated with data from the DSO. Let's look at how this works in Code Listing 6-5 (Chap06\Lst6_5.htm on the companion CD).

NOTE
Code Listing 6-5 uses a modified version of Lst6_1.xml, named Lst6_1a.xml, that does not include any data types from the datatypes namespace. As of this writing (using the beta version of Msxml), the DSO does not support namespaces. It is expected that namespaces will be supported in the released version.

Code Listing 6-5.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>

  <HEAD>
    <SCRIPT FOR="window" EVENT="onload">
      var xmlDso = xmldso.XMLDocument;
      xmlDso.load("Lst6_1a.xml");
    </SCRIPT>

    <TITLE>Code Listing 6_5</TITLE>
  </HEAD>

  <BODY>
    <OBJECT WIDTH="0" HEIGHT="0"
      CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
      ID="xmldso">
    </OBJECT>

    <DIV ID="catalog">
      <SPAN STYLE="font-weight:bold">Common Name: </SPAN>
      <SPAN ID="common" DATASRC=#xmldso
        DATAFLD="COMMON" STYLE="color:blue">
      </SPAN>
      <BR>

      <SPAN STYLE="font-weight:bold">Botanical Name: </SPAN>
      <SPAN ID="botan" DATASRC=#xmldso
        DATAFLD="BOTANICAL" STYLE="color:blue">
      </SPAN>
      <BR>

      <SPAN STYLE="font-weight:bold">Zone: </SPAN>
      <SPAN ID="zone" DATASRC=#xmldso
        DATAFLD="ZONE" STYLE="color:blue">
      </SPAN>
      <BR>


      <SPAN STYLE="font-weight:bold">Light Needs: </SPAN>
      <SPAN ID="light" DATASRC=#xmldso
        DATAFLD="LIGHT" STYLE="color:blue">
      </SPAN>
      <BR>

      <SPAN STYLE="font-weight:bold">Price: </SPAN>
      <SPAN ID="price" DATASRC=#xmldso
        DATAFLD="PRICE" STYLE="color:blue">
      </SPAN>
      <BR>
    </DIV>

    <P>
      <INPUT TYPE=button VALUE="Previous Plant"
        ONCLICK="xmldso.recordset.moveprevious()">
      <INPUT TYPE=button VALUE="Next Plant"
        ONCLICK="xmldso.recordset.movenext()">

  </BODY>
</HTML>

Code Listing 6-5 loads the document Lst6_1a.xml into the XML DSO and binds various data elements to Span elements in the HTML page. Notice that a Span element appears for every element we want to display that corresponds to an element in the XML document. For example, the code below binds the Price element from the DSO to the Span element named price in the HTML page:

<SPAN ID="price" DATASRC=#xmldso
  DATAFLD="PRICE" STYLE="color:blue">
</SPAN>

The DATASRC attribute specifies the DSO to use (a pound sign followed by the name of the data source object), and the DATAFLD attribute specifies the element that is supplying the data. By this method, data is bound to some control or HTML element. The resulting display is as shown in Figure 6-1.

Single-Value Elements

In our example, only one recordset, or set of element data, is in use at any given time. This is due to the characteristics of the HTML element to which the data is bound. Most elements, like Span elements, are single-value elements; that is, only one piece of data can be bound to the element at any given time. Because only one piece of data can be used at a time, the data that is in use is considered the current recordset. You might also notice from Code Listing 6-5 that a separate Span element is needed for each value in the recordset.

Figure 6-1. Using the XML DSO to display XML data on an HTML page.

Moving Through the Recordsets

As you can see in Figure 6-1, the HTML page contains two buttons that the user can click to essentially walk the document. The buttons are tied to methods in the DSO that move forward or backward through the data: the recordset.moveprevious method moves to the recordset immediately preceding the current recordset in the data source, and the recordset.movenext method moves to the recordset immediately following the current recordset. You might notice that using the DSO lets us get a lot of functionality with only a little script code.

Viewing All the Data in a Data Source Document

You can use the XML DSO to view all the data in a source document without walking the document tree and pulling the data out. You use the same data-binding technique just discussed, but this time the data is bound to a multiple-value element rather than several single-value elements. Currently, the only multiple-value element in HTML is the Table element. Code Listing 6-6 (Chap06\Lst6_6.htm on the companion CD) shows how data can be bound to a table to view the entire contents of our XML document.

Code Listing 6-6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>

  <HEAD>
    <SCRIPT FOR="window" EVENT="onload">
      var xmlDso = xmldso.XMLDocument;

      xmlDso.load("Lst6_1a.xml");
    </SCRIPT>

    <TITLE>Code Listing 6_6</TITLE>
  </HEAD>

  <BODY>
    <OBJECT WIDTH="0" HEIGHT="0"
      CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
      ID="xmldso">
    </OBJECT>

    <TABLE DATASRC=#xmldso BORDER="1"
      CELLSPACING="5" CELLPADDING="2">

      <THEAD>
        <TH>Common Name</TH>
        <TH>Botanical Name</TH>
        <TH>Zone</TH>
        <TH>Light</TH>
        <TH>Price</TH>
        <TH>Availability</TH>
      </THEAD>

      <TR ALIGN="center">
        <TD><DIV DATAFLD="COMMON"></TD>
        <TD><DIV DATAFLD="BOTANICAL"></TD>
        <TD><DIV DATAFLD="ZONE"></TD>
        <TD><DIV DATAFLD="LIGHT"></TD>
        <TD><DIV DATAFLD="PRICE"></TD>
        <TD><DIV DATAFLD="AVAILABILITY"></TD>
      </TR>

    </TABLE>
  </BODY>

</HTML>

In this example, data is bound to cells of the table. Because the Table element is a multiple-value element, the table is built on the fly, based on the amount of data available. The result is a fully populated table that contains all the data in the document, as shown in Figure 6-2.

NOTE
The table is built asynchronously for performance reasons. Rendering an entire table in memory before displaying it could cause a long delay if the dataset is large.

Figure 6-2. Using the XML DSO and an HTML Table element to display XML data.

Using Hierarchical Data in XML

One of the big advantages to using XML as a data source is that, unlike many standard Web-based data sources, XML allows you to use hierarchical data. So, instead of being able to work with only columns and rows, you can work with the complete XML document tree. To demonstrate this, we'll reorganize our wildflower document, as shown in Code Listing 6-7 (Chap06\Lst6_7.xml on the companion CD).

Code Listing 6-7.

<CATALOG>
  <REGION>
    <ZONE>3</ZONE>

    <PLANT>
      <COMMON>Columbine</COMMON>
      <BOTANICAL>Aquilegia canadensis</BOTANICAL>
      <LIGHT>Mostly Shady</LIGHT>
    </PLANT>

    <PLANT>
      <COMMON>Dutchman's-Breeches</COMMON>
      <BOTANICAL>Diecentra cucullaria</BOTANICAL>
      <LIGHT>Mostly Shady</LIGHT>
    </PLANT>


    <PLANT>
      <COMMON>Ginger, Wild</COMMON>
      <BOTANICAL>Asarum canadense</BOTANICAL>
      <LIGHT>Mostly Shady</LIGHT>
    </PLANT>
  </REGION>

  <REGION>
    <ZONE>4</ZONE>

    <PLANT>
      <COMMON>Bloodroot</COMMON>
      <BOTANICAL>Sanguinaria canadensis</BOTANICAL>
      <LIGHT>Mostly Shady</LIGHT>
    </PLANT>

    <PLANT>
      <COMMON>Marsh Marigold</COMMON>
      <BOTANICAL>Caltha palustris</BOTANICAL>
      <LIGHT>Mostly Sunny</LIGHT>
    </PLANT>  

    <PLANT>
      <COMMON>Cowslip</COMMON>
      <BOTANICAL>Caltha palustris</BOTANICAL>
      <LIGHT>Mostly Shady</LIGHT>
    </PLANT>
  </REGION>  
</CATALOG>

Notice in this code listing that the plants are organized by region, thus adding another "level" to the document tree. The XML DSO allows us to bind data from any level of the tree, resulting in highly complex views of the data. To display the data in Code Listing 6-7, we will create an HTML page that contains three nested tables, each one bound to a different level of the document tree. The HTML code is shown in Code Listing 6-8 (Chap06\Lst6_8.htm on the companion CD).

Code Listing 6-8.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>

  <HEAD>
    <SCRIPT FOR="window" EVENT="onload">
      var xmlDso = xmldso.XMLDocument;

      xmlDso.load("Lst6_7.xml");
    </SCRIPT>

    <TITLE>Code Listing 6-8</TITLE>
  </HEAD>

  <BODY>
    <OBJECT WIDTH="0" HEIGHT="0"
      CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
      ID="xmldso">
    </OBJECT>

    <TABLE CELLSPACING="6" ID="catalog">
      <TR>
        <TD>
          <TABLE BORDER="2" DATASRC=#xmldso>
            <TR>
              <TD STYLE="font-size:18; font-weight:bold">
                <SPAN>Zone: </SPAN><SPAN DATAFLD="ZONE"></SPAN>
              </TD>
            </TR>

            <TR>
              <TD>
                <TABLE DATASRC=#xmldso DATAFLD="PLANT">
                  <THEAD ALIGN="left">
                    <TH>Common Name</TH>
                    <TH>Botanical Name</TH>
                    <TH>Light Requirement</TH>
                  </THEAD>

                  <TR>
                    <TD><DIV DATAFLD="COMMON"></TD>
                    <TD><DIV DATAFLD="BOTANICAL"></TD>
                    <TD><DIV DATAFLD="LIGHT"></TD>
                  </TR>

                </TABLE>
              </TD>            
            </TR>
          </TABLE>
        </TD>
      </TR>
    </TABLE>

  </BODY>
</HTML>

Notice that for each level of the hierarchy that we want to traverse, we insert a DATASRC attribute. When we want to pull out data, we use a DATAFLD attribute. The result is a set of nested tables that automatically display the hierarchical data, as shown in Figure 6-3.

Figure 6-3. A set of nested tables bound to XML data.