Databinding: Tables Generated from a Data Source | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Tables often contain row after row of identically formatted data that originates in a database. There are two basic methods to create these data-dependent tables. Neither one is ideal:

If the table data is relatively static, it is common to build a long table by hand or with a tool, individually coding each data cell .
If the table data is dynamic, it is common to generate the entire page containing the table using a server-side technology such as CGI, ASP, ColdFusion, or PHP as discussed in Chapter 13.

The first approach is difficult for an HTML author. The second, which does not really qualify as HTML authoring, usually requires programming and server access. Databinding, while a proprietary client-side browser technology introduced by Microsoft, can be much simpler to use. The basic idea is to dynamically bind HTML elements to data coming from an external source such as a text file, XML file, or database. Although not technically restricted to HTML tables, it does represent a simpler, more powerful approach for generating large data-dependent tables.

In HTML databinding, a data source that provides information is associated with a data consumer that presents it. The data source is a control with some means to access external information that is embedded in an HTML document using the <object> tag. This tag is briefly introduced in Chapter 9, and is further explained in Chapter 15. For now, it will be useful to understand that <object> adds a small program to the page that can be used to access an external data source. The document also contains a data consumer, an HTML element that uses special attributes to ask the ActiveX control for data that the element subsequently displays. Data consumers come in two sorts: those that present single data values, and those that present tabular data. Tables obviously fall into the latter category.

Creating an HTML table using databinding is a very simple process. It is necessary to define only one table row. The rest are generated automatically according to the template defined by the first row. Think of each row in a tabular data set as corresponding to a database record, and each column as corresponding to a database field. A template table row is defined in HTML that associates <td> or <th> tags with field names in the data set. A table will subsequently be generated with one row for each record in the data set, and with cell values filled in from the appropriate record fields. The data source control might support processing capabilities such as sorting or filtering the data set. If so, the table can be dynamically regenerated on the client side in response to updated information from the data source. For example, a data source might contain a tabular data set for product price information. One field might contain the name of the product and another its price. By default, a table could present this information sorted alphabetically by product name. In response to a button on an HTML page, the data source could sort the data set by price. The table that displays the information would be dynamically regenerated.

To better understand the idea of databinding, consider the following simple example. An external data file contains two or more columns of comma-delimited data. The first line contains the names of the data set fields corresponding to the columns . The following lines contain the actual data for the appropriate fields. The sample external data file called alphabet.txt is shown here:

 Letter, Thing A, Apple B, Boy C, Cat D, Dog E, Elephant F, Fox G, Girl H, Hat

To access the data, an HTML document references an object for a data source control and a related table definition. The following is an example of how this would be accomplished:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Data Binding Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <!--   validation not possible due to datasrc and datfld attributes -->   </head>   <body>   <object id="alphabet"   classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">   <param name="DataURL" value="alphabet.txt" />   <param name="UseHeader" value="True" />   </object>   <table datasrc="#alphabet" border="1">   <thead>   <tr bgcolor="yellow">   <th>  Letter  </th>   <th>  Reminder  </th>   </tr>   </thead>   <tbody>   <tr align="center">   <td><span datafld="Letter"></span></td>   <td><span datafld="Thing"></span></td>   </tr>   </tbody>   </table>   </body>   </html>

This HTML code generates a table from the file alphabet.txt in which each table row contains a letter of the alphabet and the name of a thing that can remind the reader of that letter. The rendering of this example under Internet Explorer is shown in Figure 7-11.

Figure 7-11: Databinding example under Internet Explorer

Let us examine a little more closely the pieces needed to make this databinding example work. First, the data source uses the Tabular Data Control (TDC) object: an ActiveX control provided by Microsoft and identified by the lengthy class identifier. This particular control locates and manipulates text data files in a tabular format. Other controls supporting databinding could have been used instead. These can support different data access capabilities such as access to remote relational databases. The Microsoft ActiveX Data Objects control (ADO), however, is a representative example. The TDC supports several parameters, two of which are used in this example. The "DataURL" parameter tells the TDC the name and location of the data file it is to use. In this case, because only a filename is provided, the TDC looks in the same directory containing the Web page. By default, the TDC treats every line in a data file as data. The "UseHeader" parameter tells the TDC that the first line in the data file does not contain data but rather the names of data fields.

As a data consumer, the table element uses its datasrc attribute to connect to a data source. Note in the example how this attribute is set to the name of the <object> tag invoking the data source control. Like anything referenced by an id , the object name must be preceded by the # symbol and the <object> tag must declare a name using the id attribute in order to be accessed by a data consumer. In summary, the datasrc attribute identifies a data source to be used in generating a table.

The next step is to associate cells in the template table row with particular fields in the data set. This is done using the datafld attribute of appropriate elements. It contains the name of the field in the data set that its element is to be bound to. If data set - specific names are not defined, fields can be identified using default positional names: "Column1", "Column2", and so forth. The <td> tag, commonly used for cell data, does not support the datafld attribute. To bind a field to a table cell, the <td> tag needs to contain one of the elements that supports datafld . The tags that make the most sense in the context of a table are <span> , <div> , <object> , and <img> . The latter two tags illustrate that databinding is not confined to textual data. For example, a column of images can be created by using a tag declaration such as <img datafld="Picture"> inside a table cell. Note that the usual src attribute would not be required. Instead, the datafld attribute identifies a field inside the data set that contains a valid image filename, such as mypict.gif, and binds the image to that value.

Microsoft provides one additional attribute, datapagesize , which can be used to limit the number of records displayed from the datasource document. For example, if the <table> tag in the preceding example were revised to read

  <table datasrc="#alphabet" border="1" datapagesize="3">

the rendering of the table would display only the first three rows (A, B, and C) of the information in alphabet.txt.

If a table does not explicitly declare header or footer section elements, then implicitly all table content is in the body section. In static tables, this usually does not have visual consequences, but it does in tables generated by databinding. All body rows are included in the template for table row generation, not just the rows containing databound fields. To prevent header or footer information from being repeated for every row in the table, it is necessary to enclose it with the <thead> or < tfoot > tag. The <tbody> tag then can be used to signal the beginning of the template to be databound.

Such a brief example scratches the surface of databinding and merely shows the importance of tables in relation to dynamic data. For more information on databinding, visit the Microsoft MSDN site at http://msdn.microsoft.com and the Remote Data Service site at http://www.microsoft.com/data/ado/rds/.

< Day Day Up >