Binding Data to HTML Elements | Real World XML (2nd Edition)

Quite a few elements in Internet Explorer support data properties that you can use to bind them to DSO. To connect to those properties, you use the DATASRC and DATAFLD attributes in those elements. You set the DATASRC attribute to the name of a DSO, and you set the DATAFLD attribute to the name of the data field that you want to bind the element to. The element then displays the data in the current record in the DSO. You can use the moveFirst , moveLast , moveNext , and movePrevious methods to make other records the current record, and the data in the bound elements is updated automatically.

For example, if you've bound a text field control to the dsoCustomer DSO and to the NAME field in the DSO's records, that control will display the name Charles when the page first loads. Executing the moveNext method will make the next record in the record set the current record, and the text field will display the name Franklin .

Here's a list of HTML elements in Internet Explorer detailing what property is actually bound when you use the DATASRC and DATAFLD attributes:

A Binds to the href property. Does not update data.
APPLET Binds to the param property. Updates data.
BUTTON Binds to the value property. Does not update data.
DIV Binds to the innerText and innerHTML properties. Does not update data.
FRAME Binds to the src property. Does not update data.
IFRAME Binds to the src property. Does not update data.
IMG Binds to the src property. Does not update data.
INPUT TYPE=BUTTON Binds to the value property. Does not update data.
INPUT TYPE=CHECKBOX Binds to the checked property. Updates data.
INPUT TYPE=HIDDEN Binds to the value property. Updates data.
INPUT TYPE=PASSWORD Binds to the value property. Updates data.
INPUT TYPE=RADIO Binds to the checked property. Updates data.
INPUT TYPE=TEXT Binds to the value property. Updates data.
LABEL Binds to the value property. Does not update data.
MARQUEE Binds to the innerText and innerHTML properties. Does not update data.
OBJECT Binds to the objects property. Updates data.
PARAM Binds to the param property. Updates data.
SELECT Binds to the text property of an option. Updates data.
SPAN Bind to the innerText and innerHTML properties. Does not update data.
TABLE Constructs an entire table. Does not update data.
TEXTAREA Binds to the value property. Updates data.

In addition, HTML tags have certain events that you use with data bindings:

onafterupdate Happens after the data in the element is updated to the DSO
onbeforeunload Happens before the page is unloaded
onbeforeupdate Happens when the data in the element is updated in the DSO
onerrorupdate Happens if an error stops data being updated in the DSO

It's time to put this to work. I'll start by adding an MSHTML control named dsoCustomer to a Web page and connecting that DSO to ch08_01.html:

 <HTML>      <HEAD>         <TITLE>             Data Binding With the MSHTML DSO         </TITLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 Data Binding With the MSHTML DSO             </H1>  <OBJECT ID="dsoCustomer" DATA="ch08_01.html" HEIGHT="0" WIDTH="0">   </OBJECT>  .             .             .

Now I'll bind this DSO to a text field by setting that text field's DATASRC attribute to #dsoCustomer (Internet Explorer requires the # symbol before a DSO's name). Because a text field can display only one field of data at a time, I'll bind the NAME field to this control by setting its DATAFLD attribute to "NAME" :

 <OBJECT ID="dsoCustomer" DATA="ch08_01.html" HEIGHT="0" WIDTH="0">  </OBJECT>  Name: <INPUT TYPE="TEXT" DATASRC="#dsoCustomer"   DATAFLD="NAME" SIZE="10">  .    .    .

I'll bind the CUSTOMER_ID field to another text field as well. I can also display text data from the DSO directly in a Web pagewithout using a text field controlby binding that DSO to a <SPAN> element this way:

 <OBJECT ID="dsoCustomer" DATA="ch08_01.html" HEIGHT="0" WIDTH="0">  </OBJECT> Name: <INPUT TYPE="TEXT" DATASRC="#dsoCustomer"     DATAFLD="NAME" SIZE="10"> <P> ID: <INPUT TYPE="TEXT" DATASRC="#dsoCustomer"     DATAFLD="CUSTOMER_ID" SIZE="5"> <P>  Purchase date: <SPAN DATASRC="#dsoCustomer"   DATAFLD="PURCHASE_DATE"></SPAN>  . . .

To show how to bind to other controls, I'll bind the DEPARTMENT field, which can take the values Produce , Meat , or Frozen , to a <SELECT> control, which displays a drop-down list. You bind this control to the dsoCustomer DSO as you do other controls; however, you must also specify all possible values that the field you're binding, DEPARTMENT , can take as <OPTION> elements in the <SELECT> control, like this:

 <OBJECT ID="dsoCustomer" DATA="ch08_01.html" HEIGHT="0" WIDTH="0">  </OBJECT> Name: <INPUT TYPE="TEXT" DATASRC="#dsoCustomer"     DATAFLD="NAME" SIZE="10"> P> D: <INPUT TYPE="TEXT" DATASRC="#dsoCustomer"    DATAFLD="CUSTOMER_ID" SIZE="5"> <P> Purchase date: <SPAN DATASRC="#dsoCustomer"     DATAFLD="PURCHASE_DATE"></SPAN>     <P>  Department: <SELECT DATASRC="#dsoCustomer"   DATAFLD="DEPARTMENT" SIZE="1">   <OPTION VALUE="Produce">Produce   <OPTION VALUE="Meat">Meat   <OPTION VALUE="Frozen">Frozen   </SELECT>   <P>   Product: <SPAN DATASRC="#dsoCustomer" DATAFLD="PRODUCT_NAME">   </SPAN>  . . .

Note that I'm binding the PRODUCT_NAME field to another <SPAN> element as well. When the page first loads, you'll see the customer name, customer ID, purchase date, department, and product ID of the first record displayed in the elements we've put in the page. But there's a problem: As you recall, DSOs don't appear in the page, so how can the user move from record to record?

To let the user navigate through the recordset, you use the recordset's moveFirst , moveLast , moveNext , and movePrevious methods, and I'll connect those methods to buttons . You can reach the recordset object inside the DSO as dsoCustomer.recordset , so using the moveFirst method to move to the first record in the recordset looks like this: dsoCustomer.recordset.moveFirst() . Following common usage, I'll give the buttons the captions << (move to the first record), < (move to the previous record), > (move to the next record), and >> (move to the last record). Here's what the HTML for these buttons looks like:

 <BUTTON ONCLICK=      "dsoCustomer.recordset.moveFirst()" >&lt;&lt; </BUTTON> <BUTTON ONCLICK     "dsoCustomer.recordset.movePrevious()" >&lt; </BUTTON> <BUTTON ONCLICK     "dsoCustomer.recordset.moveNext()" >&gt; </BUTTON> <BUTTON ONCLICK=     "dsoCustomer.recordset.moveLast()">&gt;&gt; </BUTTON>

Before using the moveNext and movePrevious methods, however, it's worth checking to make sure that there actually is a next or previous record to move toif you move past the end of the recordset, the bound elements in your page will appear blank. You can use the recordset object's BOF (beginning of file) property to see if you're at the beginning of the record set, and you can use the EOF (end of file) property to see if you're at the end of the recordset. To make sure we're not trying to move outside the recordset, I'll use this code:

Listing ch08_02.html

 <HTML>     <HEAD>         <TITLE>             Data Binding With the MSHTML DSO         </TITLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 Data Binding With the MSHTML DSO             </H1>             <OBJECT ID="dsoCustomer" DATA="ch08_01.html" HEIGHT="0" WIDTH="0">             </OBJECT>             Name: <INPUT TYPE="TEXT" DATASRC="#dsoCustomer"                 DATAFLD="NAME" SIZE="10">             <P>             ID: <INPUT TYPE="TEXT" DATASRC="#dsoCustomer"                 DATAFLD="CUSTOMER_ID" SIZE="5">             <P>             Purchase date: <SPAN DATASRC="#dsoCustomer"                 DATAFLD="PURCHASE_DATE"></SPAN>             <P>             Department: <SELECT DATASRC="#dsoCustomer"                 DATAFLD="DEPARTMENT" SIZE="1">                 <OPTION VALUE="Produce">Produce                 <OPTION VALUE="Meat">Meat                 <OPTION VALUE="Frozen">Frozen             </SELECT>             <P>             Product: <SPAN DATASRC="#dsoCustomer" DATAFLD="PRODUCT_NAME">             </SPAN>             <P>  <BUTTON ONCLICK=   "dsoCustomer.recordset.moveFirst()" >&lt;&lt;   </BUTTON>   <BUTTON ONCLICK="if (!dsoCustomer.recordset.BOF)   dsoCustomer.recordset.movePrevious()" >&lt;   </BUTTON>   <BUTTON ONCLICK="if (!dsoCustomer.recordset.EOF)   dsoCustomer.recordset.moveNext()" >&gt;   </BUTTON>   <BUTTON ONCLICK=   "dsoCustomer.recordset.moveLast()">&gt;&gt;   </BUTTON>  </CENTER>     </BODY> </HTML>

You can see this page in operation in Figure 8-1. As you see in that page, the data from ch08_01.html is displayed. The user can move from record to record using the buttons at the bottom of the page.

Figure 8-1. Using data binding in Internet Explorer.

graphics/08fig01.gif

So much for data binding and HTML; it's time to start working with XML.