Special Edition Using HTML 4

- 20 -
Binding Data to HTML

by Jerry Honeycutt

Introducing Data Binding

At the moment, the way you publish data online is to build an HTML file on the server using information collected from a database. Once the browser opens the HTML file, it can't distinguish the data from any other content on the page; thus, you aren't able to control the data with scripts once the page is open in the browser.

Data binding allows you to associate database data with HTML elements. HTML 4.0 exposes several new properties and methods for many tags that make data binding possible. These allow you to bind data from a data source to the elements on your Web page. You can treat the data separate from the content and have full control over all of it.

Understanding Data Binding

To fully understand data binding, take a look at an example. The user is provided with a table that lists some of the books I've written. To make the information more accessible, I want to allow the user to view it via publication data, category, or title. Using older methods, these options are available:

Provide three separate tables, each of which contains rows sorted by each category.
Create a database on the server, and use a script to generate a table sorted by the user's preferred category. If the user wants to change categories, the browser has to make a round-trip to the server.
Bind an ActiveX control to the data that allows the user to sort the data within the control's frame. This requires the user to download the control and still requires a script on the server to produce the data.

Using data binding, the user can view the data any way he or she likes without any of those constraints. Here's how:

1. Add a data source to the Web page.

2. Bind HTML elements to the data source.

3. Write scripts that control the bound table.

Adding a Data Source Object to Your Web Page

Data Source Objects (DSO) are objects that a vendor such as Microsoft provides. DSOs serve two different functions:

DSOs provide the method for transporting data to the browser. A DSO can use any method it chooses to specify the data source: SQL, URLs, and so on.
DSOs provide the means to manipulate the data. For example, a DSO provides methods, properties, and events that allow you to sort or filter the data.

Microsoft provides two different DSOs with Internet Explorer 4.0. The Advanced Data Connector (ADC) provides access to databases through server and ODBC components. The Tabular Data Control (TDC) provides access to tabular data stored in comma-delimited text files. You can output this text file from any source: a spreadsheet, DBMS, or even your favorite text editor.

In order to provide data to your Web page, you must embed a DSO in the HTML file. In the example for this chapter, you learn to embed a TDC. Then you create the data source. Once you've done both steps, the DSO is ready to provide data to your Web page.

Embedding the TDC

The TDC is an ActiveX control; thus, you embed it in your Web page using the <OBJECT> tag as shown in Listing 20.1. Chapter 14, "Inserting Objects into a Web Page," describes how to insert ActiveX controls into your Web page. Make sure you assign an ID to ID and use the correct CLASSID. Set the WIDTH and HEIGHT attributes to 0 so that this control doesn't occupy any space on the Web page.

The first <PARAM> tag sets the URL of the data file by assigning MyData.Txt to DataURL. The next <PARAM> tag tells the control that you're using a delimiter, a comma in this case, and to assume the first row in the file is a header. Note the height and width is 0 so that the control doesn't display on the Web page.

Listing 20.1 Embedding a TDC in an HTML File

<OBJECT ID=TDC CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
  <PARAM NAME=DataURL VALUE="MyData.Txt">
  <PARAM NAME=TextQualifier VALUE=",">
  <PARAM NAME=UseHeader VALUE="True">
</OBJECT>

Building the Text File

The text file you create is comma-delimited. The first row indicates the column names; each column is separated by a comma. Each subsequent row represents data. Take a look at Listing 20.2 for an example. Store this file on your Web server using the name you specified in the previous listing.

Listing 20.2 Example Text File

Category, Title, Date, Price:FLOAT
Internet, Using the Internet, 10/97, 5.99
Internet, Special Edition Using the Internet, 12/97, 99.99
Internet, Using the Internet with Windows 97, 12/95, 1.99
Windows 95, Windows 95 Registry and Customization Handbook, 3/96, 59.99
Windows NT, Platinum Edition Using NT Server 4.0, 10/97, 999.99
HTML, Special Edition Using HTML 4.0, 10/97, 9.99

There are a couple of important things to note about this text file:

You can indicate the data type of a particular column by appending it to the end of the column name as shown in Listing 20.2. :FLOAT indicates that the data object should treat the column as a floating-point value when sorting or filtering it. Table 20.1 describes the other data types you can use.
You can use HTML for any value in the table. Use this fact to associate an image with a particular column by embedding the <IMG> tag in the table. See "Specifying a Data Format," later in this chapter, to learn more about the DATAFORMATAS attribute.

Table 20.1 Data Types for Use with TDC

Type Description

String Text data

Date Calendar date

Boolean Logical data

Int Integer number

Float Floating-point number

TIP: Type your data into a spreadsheet such as Excel and export it to a comma-delimited text file.

Associating HTML to a Data Source Object

HTML 4.0 contains two new attributes that allow you to bind data to elements: DATASRC and DATAFLD. Within an element, DATASRC references the data source object. You assign the ID of the data source object to it with the pound (#) prefix. Now, the <SPAN> tag shown in the following line references the DSO you embedded earlier in this chapter.

<SPAN DATASRC=#TDC></SPAN>

By itself, the preceding line doesn't do anything. You must reference a specific column by assigning the name of the column to the DATAFLD attribute. In the following example, the <SPAN> tag refers to the Title column. The browser displays the title from the currently selected record.

<SPAN DATASRC=#TDC DATAFLD=Title></SPAN>

Listing 20.3 shows you the complete example, which displays the Title field from the database you created earlier.

Listing 20.3 Data Binding Example

<HTML>
<HEAD>
  <TITLE>Data Binding Example</TITLE>
</HEAD>
<BODY>
<OBJECT ID=TDC CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
  <PARAM NAME=DataURL VALUE="MyData.Txt">
  <PARAM NAME=TextQualifier VALUE=",">
  <PARAM NAME=UseHeader VALUE="True">
</OBJECT>
  Title: <SPAN DATASRC=#TDC DATAFLD=Title></SPAN>
</BODY>
</HTML>

Tags Supporting Data Binding

The following list describes the HTML tags that support data binding, providing the DATASRC, DATAFLD, and DATAFORMATAS attributes:

DIV
INPUT-TEXT
INPUT-RADIO
INPUT-CHECKBOX
INPUT-HIDDEN
TEXTAREA
MARQUEE
IMG
SELECT
APPLET
OBJECT
PARAM
TABLE
BUTTON
A
FRAME
IFRAME
LABEL

Of particular note in this list are the following input tags: INPUT-TEXT, INPUT-RADIO, INPUT-CHECKBOX, INPUT-HIDDEN, TEXTAREA, SELECT. Whereas the remaining tags display a particular field from a record, these input tags actually allow the user to change the record. When the user changes a field, the browser feeds the changes back to the DSO, which in turn writes the changes to the database.

Binding Data to a Table

When you bind a data source to a table, the browser uses the table as a template, repeating each row for each record in the database. Within the table, you can specifically choose which fields to use in each column.

Listing 20.4 shows you a complete example that binds data to a table. The table is divided into two parts: a heading and a body. The <THEAD> tag defines the table headings and the <TBODY> tag defines the table body. The browser repeats everything appearing in the <TBODY> container once for each record in the data source. The DATASRC attribute within the <TABLE> tag indicates the DSO. Pay particular attention to how the body looks. You don't use the DATAFLD attribute with each <TD> tag. Instead, you include a <SPAN> tag within each cell and assign the name of the field to the <SPAN> tag's DATAFLD attribute. The browser repeats that table row once for each record in the database.

Listing 20.4 Binding Data to a Table

<HTML>
<HEAD>
  <TITLE>Data Binding Example</TITLE>
</HEAD>
<BODY>
<OBJECT ID=TDC CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
  <PARAM NAME=DataURL VALUE="MyData.Txt">
  <PARAM NAME=TextQualifier VALUE=",">
  <PARAM NAME=UseHeader VALUE="True">
</OBJECT>
<TABLE ID=Table DATASRC=#TDC BORDER=1>
  <THEAD>
    <TR>
      <TH>Title</TH><TH>Date</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD><SPAN DATAFLD=Title></SPAN></TD>
      <TD><SPAN DATAFLD=Date></SPAN></TD>
    </TR>
  </TBODY>
</TABLE>
</BODY>
</HTML>

You can get pretty fancy with tables and data binding. For example, in Listing 20.5, the table body contains two rows for each record. The Category field spans across both rows, the Title field is in the top row, and the Date field is in the bottom row. Figure 20.1 shows you what this table looks like in Internet Explorer 4.0.

Listing 20.5 Binding to Fancy Tables

<HTML>
<HEAD>
  <TITLE>Data Binding Example</TITLE>
</HEAD>
<BODY>
<OBJECT ID=TDC CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
  <PARAM NAME=DataURL VALUE="MyData.Txt">
  <PARAM NAME=TextQualifier VALUE=",">
  <PARAM NAME=UseHeader VALUE="True">
</OBJECT>
<TABLE ID=Table DATASRC=#TDC BORDER=1>
  <THEAD>
    <TR>
      <TH>Category</TH><TH>Title/Date</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD ROWSPAN=2><SPAN DATAFLD=Category></SPAN></TD>
      <TD><SPAN DATAFLD=Title></SPAN></TD>
    </TR>
    <TR>
      <TD><SPAN DATAFLD=Date></SPAN></TD>
    </TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

Specifying a Data Format

By default, the browser assumes each field in the table is raw data. You can set the DATAFORMATAS attribute for a tag to HTML, however, which indicates that the browser should render the data as actual HTML. For example, if you have a column of data called Cover containing an <image> tag, such as <IMG SRC=cover.gif>, you can render that using a tag like this:

<SPAN DATASRC=#TDC DATAFLD=Cover DATAFORMATAS=HTML>

DATAFORMATAS is valid only on the <DIV>, <SPAN>, and <MARQUEE> tags. Table 20.2 describes the other formats supported by this attribute.

FIG. 20.1
Make sure you define the body of your table using the <TBODY> container, because the browser repeats everything within it for each record.

Table 20.2 Formats for Data Binding

Type Description

HTML Render data as HTML

TEXT Render data as text

Scripting the Data Source Object

The DSO is responsible for providing the data and the mechanisms for working with the data. Thus, to manipulate the data in your Web page, you must use its properties and methods. The only method that the TDC supports is Reset(), which causes the TDC to refresh the data on the Web page. It supports a handful of properties, though, which are described in Table 20.3.

Table 20.3 TDC Properties

Name Description

Properties

AppendData TRUE--append data to existing data set

FALSE--don't append data to data set

CaseSensitive TRUE--data is case-sensitive

FALSE--data is not case-sensitive

CharSet Identifies the character set of the data file

DataURL URL of the data file

EscapeChar Specifies a character to use as escape character; useful for escaping quotes in the date, for example, "Quotes \"within\" quotes

FieldDelim String value that specifies the field delimiter; the default is a comma

Filter The criteria used to filter the data set; for example, Age < 30 & Name = `Jerry'

Language String specifying the language used by the data set as defined by ISO 369

RowDelim String value that specifies the row delimiter; the default is newline

Sort String list of columns by which the data is sorted, separated by semi-colons; prefix a field with a minus sign to sort descending, for example, "x; -y"

TextQualifier Character used to surround fields that contain special characters such as newlines, tabs, and commas; the default is a double quotation mark

UseHeader TRUE--first line contains headers FALSE--first line contains data

Methods

Reset Forces the control to filter or sort the data based upon the new settings

Sorting the Database

Sorting a data source is a matter of telling it by which column you want to sort, and then executing the sort. You tell the TDC the column by which you're sorting using the SortColumn property. Assign to this property the name of the field. You assign True to the SortAscending property to sort in ascending order, False otherwise. After having told the TDC how you want to sort, execute the sort using the Reset() method as shown in Listing 20.6. The user types a column name in the field and clicks the Sort button; the script then forces the TDC to refresh the data in the Web page.

Listing 20.6 Sorting a Data Source

<HTML>
<HEAD>
  <TITLE>Data Binding Example</TITLE>
</HEAD>
<BODY>
<OBJECT ID=TDC CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
  <PARAM NAME=DataURL VALUE="MyData.Txt">
  <PARAM NAME=TextQualifier VALUE=",">
  <PARAM NAME=UseHeader VALUE="True">
</OBJECT>
<SCRIPT LANGUAGE="VBSCRIPT">
  Sub SortTable()
    TDC.SortAscending=True
    TDC.SortColumn=SortFrm.Column.Value
    TDC.Reset()
  End Sub
</SCRIPT>
<FORM NAME=SORTFRM>
  <INPUT NAME=COLUMN TYPE=TEXT SIZE=10>
  <INPUT NAME=SORT TYPE=BUTTON VALUE="Sort" OnClick="Call SortTable()">
</FORM>
<TABLE ID=Table DATASRC=#TDC BORDER=1>
  <THEAD>
    <TR>
      <TH>Category</TH><TH>Title/Date</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD ROWSPAN=2><SPAN DATAFLD=Category></SPAN></TD>
      <TD><SPAN DATAFLD=Title></SPAN></TD>
    </TR>
    <TR>
      <TD><SPAN DATAFLD=Date></SPAN></TD>
    </TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

Filtering the Data That the Browser Displays

You don't have to display all of the records in the database at one time; you can carefully choose the records to include. For example, you can let the user pick a category, as shown in Listing 20.7, and then display records only in that category. You assign the field name by which you're filtering to the FilterColumn property and the value to the FilterValue property. You can define a relationship between these two by assigning a criterion to FilterCriterion. This value can be a comparison operator (<, >, <=, >=, =).

In Listing 20.7, the equivalence operator (=) is assigned to FilterCriterion. Then, the value that the user typed into the Category field is assigned to the FilterValue property and Category is assigned to FilterColumn. When the user clicks the Refresh button, the script sets up the sort defined by the Sort field, sets up the filter defined by the Category field, and calls the Reset() property to refresh the data source.

Listing 20.7 Filtering a Data Source

<HTML>
<HEAD>
  <TITLE>Data Binding Example</TITLE>
</HEAD>
<BODY>
<OBJECT ID=TDC CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
  <PARAM NAME=DataURL VALUE="MyData.Txt">
  <PARAM NAME=TextQualifier VALUE=",">
  <PARAM NAME=UseHeader VALUE="True">
</OBJECT>
<SCRIPT LANGUAGE="VBSCRIPT">
  Sub RefreshTable()
    ` Specify how to sort the table
 
    TDC.SortAscending=True
    TDC.SortColumn=SortFrm.Column.Value
 
    ` Specify how to filter the table
    If SortFrm.Category.Value = "" Then
      SortFrm.Category.Value = "*"
    End If
  
    TDC.FilterColumn = "Category"
    TDC.FilterValue = SortFrm.Category.Value
    TDC.FilterCriterion = "="
    ` Reset the table
    TDC.Reset()
  End Sub
</SCRIPT>
<TABLE>
  <FORM NAME=SORTFRM>
    <TR>
      <TD>Sort by:</TD><TD>Category:</TD><TD></TD>
    <TR>
    <TR>
      <TD>
        <INPUT NAME=COLUMN TYPE=TEXT SIZE=10>
      </TD>
      <TD>
        <INPUT NAME=CATEGORY TYPE=TEXT SIZE=10 VALUE="*">
      </TD>
      <TD>
        <INPUT NAME=SORT TYPE=BUTTON VALUE="Refresh" OnClick="Call RefreshTable()">
      </TD>
  </FORM>
</TABLE>
<TABLE ID=Table DATASRC=#TDC BORDER=1>
  <THEAD>
    <TR>
      <TH>Category</TH><TH>Title/Date</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD ROWSPAN=2><SPAN DATAFLD=Category></SPAN></TD>
      <TD><SPAN DATAFLD=Title></SPAN></TD>
    </TR>
    <TR>
      <TD><SPAN DATAFLD=Date></SPAN></TD>
    </TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

Figure 20.2 shows you the result of this Web page in Internet Explorer 4.0.

TIP: You can set any of the sort and filter properties using the TDC <OBJECT> tag's <PARAM> tag. For example, to set the FilterColumn property, use a tag like this: <PARAM NAME=FilterColumn VALUE=Category>.

FIG. 20.2
When the user leaves the Category field empty, the script assigns an asterisk (*), which is a wildcard, to the field.

Type	Description
String	Text data
Date	Calendar date
Boolean	Logical data
Int	Integer number
Float	Floating-point number

Type	Description
HTML	Render data as HTML
TEXT	Render data as text

Name	Description
Properties
`AppendData`	`TRUE`--append data to existing data set
`FALSE`--don't append data to data set
`CaseSensitive`	`TRUE`--data is case-sensitive
`FALSE`--data is not case-sensitive
`CharSet`	Identifies the character set of the data file
`DataURL`	URL of the data file
`EscapeChar`	Specifies a character to use as escape character; useful for escaping quotes in the date, for example, `"Quotes \"within\" quotes`
`FieldDelim`	String value that specifies the field delimiter; the default is a comma
`Filter`	The criteria used to filter the data set; for example, Age < 30 & Name = `Jerry'
`Language`	String specifying the language used by the data set as defined by ISO 369
`RowDelim`	String value that specifies the row delimiter; the default is `newline`
`Sort`	String list of columns by which the data is sorted, separated by semi-colons; prefix a field with a minus sign to sort descending, for example, `"x; -y"`
`TextQualifier`	Character used to surround fields that contain special characters such as newlines, tabs, and commas; the default is a double quotation mark
`UseHeader`	`TRUE`--first line contains headers `FALSE`--first line contains data
Methods
`Reset`	Forces the control to filter or sort the data based upon the new settings