Using the MSHTML Control
| Using the MSHTML control, you can read data in HTML format into a recordset. Here's an example, which I'll call data.html. This document holds data in HTML format; the data we're using here represents a set of employees . I've divided the data into records , one for each employee. Each record has several fields , such as Name to hold the employee's name , ID to hold their ID number, and so on. You can create a record just by storing multiple fields, and you create a field by giving a <SPAN> element a name and then storing the data as that <SPAN> element's text. Here's what the data document looks like, with five employee records: (data.html on the web site)<HTML> <HEAD> <TITLE> A Data Document </TITLE> </HEAD> <BODY> <H1> This page holds data. </H1> Name: <SPAN ID="NAME">Frank</SPAN><BR> ID: <SPAN ID="ID">2314</SPAN><BR> Hire Date: <SPAN ID="HIRE_DATE"> 9-2-2003</SPAN><BR> Department: <SPAN ID="DEPARTMENT"> Shipping</SPAN><BR> Title: <SPAN ID="TITLE">Packer</SPAN><BR> Name: <SPAN ID="NAME">Martin</SPAN><BR> ID: <SPAN ID="ID">2315</SPAN><BR> Hire Date: <SPAN ID="HIRE_DATE"> 9-2-2003</SPAN><BR> Department: <SPAN ID="DEPARTMENT"> Packing</SPAN><BR> Title: <SPAN ID="TITLE">Programmer</SPAN><BR> Name: <SPAN ID="NAME">Tom</SPAN><BR> ID: <SPAN ID="ID">2316</SPAN><BR> Hire Date: <SPAN ID="HIRE_DATE"> 9-2-2003</SPAN><BR> Department: <SPAN ID="DEPARTMENT"> Shipping</SPAN><BR> Title: <SPAN ID="TITLE">Packer</SPAN><BR> Name: <SPAN ID="NAME">Henry</SPAN><BR> ID: <SPAN ID="ID">2317</SPAN><BR> Hire Date: <SPAN ID="HIRE_DATE"> 9-2-2003</SPAN><BR> Department: <SPAN ID="DEPARTMENT"> Shipping</SPAN><BR> Title: <SPAN ID="TITLE">Packer</SPAN><BR> Name: <SPAN ID="NAME">Paula</SPAN><BR> ID: <SPAN ID="ID">2318</SPAN><BR> Hire Date: <SPAN ID="HIRE_DATE"> 9-2-2003</SPAN><BR> Department: <SPAN ID="DEPARTMENT"> Shipping</SPAN><BR> Title: <SPAN ID="TITLE">Packer</SPAN><BR> </BODY> </HTML> To use the MSHTML DSO, you just use the <OBJECT> element and the DATA attribute to point to the HTML data document. Here's how I create an MSHTML DSO named dso1 that uses data.html for its data: <HTML> <HEAD> <TITLE> Using the MSHTML Control </TITLE> </HEAD> <BODY> <H1> Using The MSHTML Control </H1> <OBJECT ID="dso1" DATA="data.html" HEIGHT="0" WIDTH="0"></OBJECT> . . . Now you can bind the data in this DSO to various elements, such as <SPAN> , <DIV> , or text field elements, setting the DATASRC attribute to "dso1" and the DATAFLD attribute to the data field whose data you want to display in the element. If the bound element can display only a single item, such as <SPAN> , <DIV> , or text field elements, the data from the field you've specified will appear in that element. The data is taken from that field in the current record in the DSO. What's the current record? When the DSO first loads, the first record is the current record, but you can use methods such as MoveNext and MovePrevious to move to different records, as we'll see. When you move to a new record, that record becomes the current record. If the bound element can display multiple items, such as a table, the data from all records will display simultaneously , as we'll also see. Here's how I bind a <SPAN> element to the Name data field of the current record in dso1 : Name: <SPAN DATASRC="#dso1" DATAFLD="NAME"></SPAN> In the same way, you can bind text fields, buttons , and more to a field in the DSO, using the DATASRC and DATAFLD attributes. So how do you let the user navigate from record to record (which will automatically update the data in any bound elements)? You access the recordset object of the DSO, giving you direct access to the data in the DSO, and then use methods such as MoveFirst (move to the first record), MoveNext (move to the next record), MovePrevious (move to the previous record), and MoveLast (move to the last record). Here's how you can do that in a web page. In this case, I'll create four navigation buttons with captions like <<, <, >, and >> to move through the data in data.html: <BUTTON ONCLICK="dso1.recordset.MoveFirst()"><<</BUTTON> <BUTTON ONCLICK="if (!dso1.recordset.BOF) dso1.recordset.MovePrevious()"><</BUTTON> <BUTTON ONCLICK="if (!dso1.recordset.EOF) dso1.recordset.MoveNext()">></BUTTON> <BUTTON ONCLICK="dso1.recordset.MoveLast()">>></BUTTON> Here's what the whole code looks like for this example. This program binds the data in data.html to various elements and enables you to move from record to record using navigation buttons, displaying the data from each record's fields in bound elements: (Listing 17-05.html on the web site)<HTML> <HEAD> <TITLE> Using the MSHTML Control </TITLE> </HEAD> <BODY> <H1> Using The MSHTML Control </H1> <OBJECT ID="dso1" DATA="data.html" HEIGHT="0" WIDTH="0"></OBJECT> Name: <SPAN DATASRC="#dso1" DATAFLD="NAME"></SPAN> <BR> ID: <SPAN DATASRC="#dso1" DATAFLD="ID"></SPAN> <BR> Department: <SELECT DATASRC="#dso1" DATAFLD="DEPARTMENT" SIZE=1> <OPTION VALUE="Shipping">Shipping <OPTION VALUE="Packing">Packing <OPTION VALUE="Accounting">Accounting <OPTION VALUE="Billing">Billing </SELECT> <BR> Title: <SPAN DATASRC="#dso1" DATAFLD="TITLE"></SPAN> <BR> Date hired: <SPAN DATASRC="#dso1" DATAFLD="HIRE_DATE"></SPAN><P> <BR> <BUTTON ONCLICK="dso1.recordset.MoveFirst()"><<</BUTTON> <BUTTON ONCLICK="if (!dso1.recordset.BOF) dso1.recordset.MovePrevious()"><</BUTTON> <BUTTON ONCLICK="if (!dso1.recordset.EOF) dso1.recordset.MoveNext()">></BUTTON> <BUTTON ONCLICK="dso1.recordset.MoveLast()">>></BUTTON> </BODY> </HTML> You can see the results of this code in Figure 17.7, where I've bound the data in data.html to various elements, and can use the navigation buttons you see to navigate through the records in data.html. Figure 17.7. Using the MSHTML DSO. You also can bind an MSHTML DSO to an HTML table, which enables you to display data from all the records in a recordset simultaneously. To connect a DSO to a table, you use the DATASRC attribute of the <TABLE> element: <TABLE DATASRC="#dso1" CELLSPACING="10"> Now the data in the DSO is available throughout the table. To display the data from the various fields in a record, for example, you can use <SPAN> elements in table cells (here, I'm specifying the format of the data we're binding to as HTML, using the DATAFORMATAS attributes because we're binding to data.htmlin fact, HTML is the default format, so you don't actually have to use the DATAFORMATAS attributes in this case): <TR> <TD><SPAN DATAFLD="NAME" DATAFORMATAS="HTML"></SPAN></TD> <TD><SPAN DATAFLD="ID" DATAFORMATAS="HTML"></SPAN></TD> <TD><SPAN DATAFLD="DEPARTMENT" DATAFORMATAS="HTML"></SPAN></TD> <TD><SPAN DATAFLD="TITLE" DATAFORMATAS="HTML"></SPAN></TD> <TD><SPAN DATAFLD="HIRE_DATE" DATAFORMATAS="HTML"></SPAN></TD> </TR> Now the Internet Explorer will automatically create a row in the table for each record in data.html. Here's what the code looks like: (Listing 17-06.html on the web site)<HTML> <HEAD> <TITLE> Using The MSHTML Control and a Table </TITLE> </HEAD> <BODY> <H1> Using The MSHTML Control and a Table </H1> <OBJECT ID="dso1" DATA="data.html" HEIGHT=0 WIDTH=0></OBJECT> <TABLE DATASRC="#dso1" CELLSPACING="10"> <THEAD> <TR> <TH>Name</TH> <TH>ID</TH> <TH>Department</TH> <TH>Title</TH> <TH>Date Hired</TH> </TR> </THEAD> <TBODY> <TR> <TD><SPAN DATAFLD="NAME" DATAFORMATAS="HTML"></SPAN></TD> <TD><SPAN DATAFLD="ID" DATAFORMATAS="HTML"></SPAN></TD> <TD><SPAN DATAFLD="DEPARTMENT" DATAFORMATAS="HTML"></SPAN></TD> <TD><SPAN DATAFLD="TITLE" DATAFORMATAS="HTML"></SPAN></TD> <TD><SPAN DATAFLD="HIRE_DATE" DATAFORMATAS="HTML"></SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> You can see the results of this code in Figure 17.8, where all the data from data.html is displayed simultaneously. Figure 17.8. Binding the MSHTML DSO to a table.  |
