Dynamic HTML Explained, Part III

DHTML's data-binding capability delivers fast, dynamic data over the Web.

Rick Dobson

This final Dynamic HTML (DHTML) installment examines data binding. This technology stores a local copy of a recordset in a data source object. This design innovation lets developers convert a Web page's HTML into a template for presenting data. Isolating the data from the structure of Web pages makes it easier to perform maintenance on information shared by many Web pages.

The workstation-based data cache speeds data viewing by eliminating a browser's need to return to a Web server for each new record. Because the data is available locally, Web pages can contain integrated logic to sort and filter them. Be cause data downloads asynchronously, recordsets start to render faster than with an exclusively server-based approach.

This article presents two basic display techniques to prepare you for exploring the full scope of data-binding technology. You will also learn about the Tabular Data Control (TDC), a simple data source object, and attributes that bind HTML elements to the TDC's data cache. The article ends with an overview of these objects. Microsoft has a site ( http://www.microsoft.com/gallery/files/datasrc/ ) with a gallery of free data source objects.

Presenting a Table

The repeated table design displays a local data cache with the TABLE tag and its associated HTML elements. The TABLE tag is the only element that displays data in a tabular format (all other HTML elements display data one record at a time). The repeated table design derives its name from representing a whole table by repeating a single record template (held in a local data cache) once for each record.

Any HTML element requires a source for data to display. Use the TDC when you require the simplest and easiest-to-use data source object.

The "Repeated Table Code Gallery" shows how to use the TDC in a repeated table design to present a table on a Web page. The OBJECT block toward the page's beginning references the TDC. It is essential that you assign an ID attribute to the OBJECT tag to refer to and manipulate the TDC's data cache.

Two data-binding attributes are essential for linking HTML elements to the local data cache. The DATASRC attribute points to the data source object. Data-binding syntax re quires you to insert a # before the data source object's ID. This attribute ties the entire local recordset to the Web page, but it does not indicate which field ties to a particular element. The DATAFLD attribute performs that function. The gallery illustrates how to place a DATAFLD attribute in a DIV element to display an individual recordset field. When working with the TABLE block, you do not need to assign the DATASRC attribute to each column element, because the columns inherit the DATASRC setting for the TABLE tag.

The code gallery lets site visitors page through successive blocks of records. It initializes this capability by setting the TABLE tag's DATAPAGESIZE attribute to 5. This permits just the first five records in the recordset to display when the page loads. Excluding the DATAPAGESIZE attribute causes the whole table to appear.

When you specify a DATAPAGESIZE attribute, it is necessary to include logic for paging back and forth in the recordset. The code gallery indicates two ways to do this. First, you can reference a function in a SCRIPT block. The Previous Page button uses this technique. Second, you can include code as the argument for a button's onclick event setting. The Next Page button illustrates how to use this approach.

Presenting a Form

One of the most common ways to present records is with forms. The data-binding technology supports this display format by letting developers link INPUT text boxes to the locally cached recordset. You must supply your own record navigation code. The "Form Code Gallery" offers a model that you can adapt as your needs dictate.

The code gallery for displaying a form is an excerpt from a Web page that illustrates two separate aspects of DHTML. First, it links the INPUT text box controls to recordset fields. Second, it applies dynamic-positioning settings to locate and size the text boxes as well as the record navigation buttons.

The BODY block of the page contains three pairs of SPAN and INPUT text box elements. Absolute positioning locates the SPAN elements relative to their BODY container. The INPUT text box controls include both DATASRC and DATAFLD attributes. These are two essential attributes for HTML elements bound to data fields.

The two INPUT button controls tie back to VBScript event procedures in the SCRIPT block at the top of the code gallery. Using VBScript confirms the language versatility of DHTML (all preceding examples in the series used JavaScript). The functions apply either MoveNext or MovePrevious methods to the recordset objects of the data source object (not shown in the excerpt). The function logic also traps attempts to move out of the recordset.

Data Source Objects

Data source objects are the drivers that make data bind ing work. These objects perform three critical functions. First, they provide data asynchronously so that page rendering begins more quickly than if it were all constructed on a server. Second, they permit manipulation, such as sorting and filtering, on the client workstation. Third, they can allow direct updating of server-side databases from a form in a browser. This eliminates elaborate server-side processing that parses and acts on data sent from a browser.

I used the TDC in both examples in this article. It is appropriate when you have a data set of comma-delimited values and off-line browsing suits your needs. The Remote Data Service (RDS) is another data source object that provides update, insert, and delete capabilities. This data source object supports OLEDB and ODBC data sources. It requires you to specify an extract with a SQL statement. The RDS requires both server and client components to function. You must perform a separate installation to load the server-side component. Both the TDC and RDS are ActiveX controls, and they ship with Internet Explorer 4.

Data binding may offer the single most productive use for DHTML. This feature expedites and enhances data display, manipulation, and updating over the Web. I have touched on only a small subset of data-binding technology. Use the Internet Client Software Development Kit (SDK) as an additional resource for a good general overview of the basics of this exciting technology that delivers business applications via the Web (check out http://www.microsoft.com/msdn/sdk/inetsdk/help/default.htm ).

---

Repeated Table Code Gallery

A repeated table design represents a table with 62 rows in just 19 lines of code.

<HTML><HEAD><TITLE>Rick's Pubs</TITLE>

<OBJECT ID=tdcRDPubs 
CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
   <PARAM NAME="DataURL" VALUE="RDPubs.txt">
   <PARAM NAME="UseHeader" VALUE="True">
</OBJECT><SCRIPT LANGUAGE="JavaScript">
function previousPage(){
  tblRDPubs.previousPage();}
</SCRIPT></HEAD><BODY>
<TABLE ID=tblRDPubs DATASRC=#tdcRDPubs DATAPAGESIZE=5
BORDER="3" CELLPADDING="3"><THEAD STYLE="font-
weight:bold"><TD>Topic</TD><TD>
Publication</TD><TD>Month</TD><TD>Year</TD></THEAD><TBODY>
<TR><TD><DIV DATAFLD="Topic"></TD><TD><DIV
datafld="Publication"></TD>
<TD><DIV DATAFLD="Month"></TD><TD><DIV
datafld="Year"></TD></TR>
</TBODY></TABLE><BR><BR>
<BUTTON onclick="previousPage()" STYLE="position:relative;height:30;width:100">
Previous Page</BUTTON><BUTTON onclick="tblRDPubs.next
Page()"
STYLE="position:relative;height:30;width:100">Next Page
</BUTTON></BODY></HTML>

---

Form Code Gallery

A form to display data without using a TABLE tag to position elements 
on the page.

<SCRIPT LANGUAGE="VBScript">
function forward_onclick()
  If tdcRDPubs.recordset.AbsolutePosition <>
tdcRDPubs.recordset.RecordCount then
    tdcRDPubs.recordset.MoveNext
  else
      msgbox "This is the last record"
  end if
end function
function backward_onclick()
  if tdcRDPubs.recordset.AbsolutePosition > 1 then
     tdcRDPubs.recordset.MovePrevious
  else
      msgbox "This is the first record"
  end if
end function
</SCRIPT></HEAD><BODY>
<SPAN Style="font-
size:20;position:Absolute;top:50;left:5">Topic: </SPAN>
<INPUT  TYPE=TEXT DATASRC="#tdcRDPubs" DATAFLD="Topic" 
STYLE="position:Absolute;top:50;left:105;height:30;
width:350">
<SPAN Style="font-
size:20;posi
tion:Absolute;top:80;left:5">Publication: 
</SPAN>
<INPUT  TYPE=TEXT DATASRC="#tdcRDPubs" DATAFLD="Publication" 
STYLE="position:Absolute;top:80;left:105;height:30;
width:350">
<SPAN Style="font-
size:20;position:Absolute;top:110;left:5">Year: </SPAN>
<INPUT  TYPE=TEXT DATASRC="#tdcRDPubs" DATAFLD="Year" 
STYLE="position:Absolute;top:110;left:105;height:30">
<INPUT ID=forward TYPE=button Value= "Next">
<INPUT ID=backward TYPE=button Value= "Previous">
</BODY></HTML>

---

Rick Dobson, Ph.D., ( RickD@cabinc.win.net ) is president of CAB, Inc., a database and Internet development consultancy. Visit his firm's Web site at http://www.cabinc.win.net .