Now that you understand the role of data source objects, the attributes used to specify a binding, and the HTML elements that can be bound, let's apply this information to building three basic pages using data binding.
Think of the current record as an index or a pointer to some record in the data source. The values from the columns in this record are displayed in the bound elements. A different record can be made current by incrementing or decrementing the index or pointer. When a new record becomes current, the bound elements are dynamically changed to reflect the data from the new record.
The following code demonstrates how to specify a current record binding:
<BODY TOPMARGIN=0 LEFTMARGIN=40 BGCOLOR="#FFFFFF"> <FONT FACE="verdana,arial,helvetica" SIZE=2> <H2>Current Record Binding</H2> § <P>Stock: <A DATASRC=#stocklist DATAFLD="Website"> <SPAN DATASRC=#stocklist DATAFLD="CompanyName"></SPAN> (<SPAN DATASRC=#stocklist DATAFLD="Symbol"></SPAN>) </A> <P>Last: <SPAN DATASRC=#stocklist DATAFLD="Last"></SPAN> <P>Change: <SPAN DATASRC=#stocklist DATAFLD="ChangeF" DATAFORMATAS=HTML> </SPAN>
<P>Chart: <IMG ALIGN=top DATASRC=#stocklist DATAFLD="Chart"> <HR> <INPUT TYPE=BUTTON VALUE=" |< " ONCLICK="stocklist.recordset.MoveFirst();"> <INPUT TYPE=BUTTON VALUE=" < " ONCLICK="stocklist.recordset.MovePrevious();"> <INPUT TYPE=BUTTON VALUE=" > " ONCLICK="stocklist.recordset.MoveNext();"> <INPUT TYPE=BUTTON VALUE=" >| " ONCLICK="stocklist.recordset.MoveLast();"> </BODY>
For current record binding, every bound element contains both the DATASRC and DATAFLD attributes.
Figure 15-2 shows how the current record binding example is displayed.
Figure 15-2. A page using current record binding.
Notice the four HTML button controls included in this example. These controls provide user interface elements to control which record is current in the data source. Clicking the buttons sets the first, previous, next, or last record as the current record. This technique is discussed in detail in the section "Move Methods" later in this chapter.
The following code demonstrates how to create a simple repeated table. This example builds on the earlier stock table example with a few modifications. Here the Symbol column contains both the stock symbol and a bound Anchor element linking to each company's Web site. The data has been divided between two table rows, and a small chart has been added to each item in the table to show that stock's performance over the last six months. The cell containing the chart spans the two rows of each item.
<TABLE ID="stocktbl" DATASRC="#stocklist" BORDER=1> <THEAD> <TR ONCLICK="sort();"> <TD CLASS=thd ROWSPAN=2><DIV ID=Symbol>Symbol</DIV></TD> <TD CLASS=thd><DIV ID=Last>Last</DIV></TD> <TD CLASS=thd><DIV ID=Change>Change</DIV></TD> <TD ROWSPAN=2>Chart</TD> </TR> <TR ONCLICK="sort();"> <TD CLASS=thd><DIV ID=Volume>Volume</DIV></TD> <TD CLASS=thd><DIV ID=Type>Type</DIV></TD> </TR> </THEAD> <TBODY> <TR> <TD ALIGN=left ROWSPAN=2> <A DATAFLD="Website"><SPAN DATAFLD="Symbol"></SPAN></A> </TD> <TD ALIGN=right> <DIV DATAFLD="Last"></DIV> </TD> <TD ALIGN=right> <SPAN DATAFLD="ChangeF" DATAFORMATAS=HTML></SPAN> </TD> <TD ALIGN=left ROWSPAN=2> <IMG DATAFLD="Chart"> </TD> </TR> <TR> <TD ALIGN=right> <DIV DATAFLD="Volume"></DIV> </TD> <TD ALIGN=center> <SELECT DATAFLD="Type"> <OPTION VALUE=L>Long <OPTION VALUE=S>Short </SELECT> </TD> </TR> </TBODY> </TABLE>
A few of the concepts illustrated here may not be obvious. First, you can use multiple bindings in a single cell of a table; the first cell contains an Anchor and a Span element, each of which are bound to different fields. Remember that the Table element is simply a container for repetition; the specification of the template can include any element or control with or without data binding, as long as the template obeys the rules of HTML.
Figure 15-3 shows the revised stock table.
Figure 15-3. Basic repeated table binding.
Note also that this example uses the TDC (Tabular Data Control) as its data source. The TDC is a data source object included with the minimal configuration of Internet Explorer 4.0. It uses a URL to retrieve data in a delimited text format. The data set used in the examples in this section has the fields shown in the following table.
| Field | Data Type |
| Symbol | text |
| Last | float |
| Change | float |
| ChangeF | text |
| Volume | int |
| %Change | float |
| DateUpdated | text |
| High | float |
| Low | float |
| Open | float |
| Close | float |
| 52WeekHigh | float |
| 52WeekLow | float |
| PERatio | float |
| CompanyName | text |
| Shares | int |
| Website | text |
| Chart | text |
| Type | text |
| ExDiv | text |
In the preceding example, the table was repeated for each and every record in the data set. This repetition can result in large tables that are neither pleasing to view nor efficient to display. To solve this problem, the concept of table paging was introduced. Table paging allows the Web author to specify the exact number of records to be displayed in a repeated table at a given time. This technique lets the Web author limit how large the page will become as a result of repeating the table's template. It also allows the Web author to constrain the table to a specific region of the page and to place other page elements around the table without having to worry about elements below the table being moved out of view.
To enable table paging, the DATAPAGESIZE attribute is specified on a repeated table. DATAPAGESIZE takes an integer argument that defines the number of records from the data set, and correspondingly the number of instances of the table template, to repeat in the table at any one time. (Display of partial templates is not supported.)
Building on the preceding example, the only change necessary to enable table paging is to include the DATAPAGESIZE attribute on the Table element:
<TABLE ID="stocktbl" DATASRC="#stocklist" DATAPAGESIZE=4 BORDER=1> § </TABLE>
This code displays the data from four records in the table at a time.
Figure 15-4 shows the stock table example with table paging enabled.
Figure 15-4. Basic paged table binding.
But how can the user view the remainder of the data? Two methods are exposed on a paged, repeated table to show additional records from the data set: nextPage, which displays the next page of data in the table, and previousPage, which displays the previous page of data. Using these methods, the Web author can include HTML elements that invoke scripts to display additional pages of data. The Next and Previous buttons, shown in Figure 15-4, call the nextPage and previousPage methods on the repeated table. These buttons are defined as follows:
<INPUT TYPE=BUTTON VALUE=" Previous " ONCLICK="stocktbl.previousPage();"> <INPUT TYPE=BUTTON VALUE=" Next " ONCLICK="stocktbl.nextPage();">
Boundary conditions are worth noting. If nextPage is invoked when there is less than a page of records remaining in the data set, the table displays only the remaining records. Thereafter, nextPage fails silently. If previousPage is invoked when the current record is less than a page of records from the first record in the data set, a full page of records beginning with the first record is shown. Thereafter, previousPage fails silently. Finally, when records are dynamically added or deleted, the data displayed will be adjusted accordingly. In that case, the record displayed at the top of the table remains at the top unless it is deleted.