Data binding links a data source to a Web page. Data binding lets you create pages that display, sort, and filter data on the client side, without numerous round trips to the server. This is accomplished by creating a template for the data using extensions to HTML proposed to the W3C. You can manipulate the data using Dynamic HTML on the client side, eliminating the delay of constant server updates. You can use a delimited text file as the source for the Tabular Data Control, use Remote Data Service to connect to any ODBC database, or create a custom data source object. The data source object can be written with JavaBeans or as an ActiveX control.
The Data Source |
The Data Consumers |
The Data Source Object (DSO) |
Repeated Table Sample |
Current Record Sample |
Sorting |
Filtering |
Click on the headings at left for more information.
The data source for the Tabular Data Source Object is a simple delimited text file. You can create the file using Notepad or any other text editor, or you can output the text file with most popular database products. The data source can contain two kinds of entries: a header line, which specifies the field names and (optionally) their data types, and the data itself, with field contents separated by commas or a user-specified delimiter. If the field contents contain HTML code, you can render the HTML by placing it between tags that support the DATAFORMATAS parameter. Here is a sample table with one of the stock symbols (TACP) in bold thanks to DATAFORMATAS.
You can use HTML tags in tables and forms, as well as other HTML tags, as data consumers. When you display data in a table, Internet Explorer 4.0 will expand the number of rows to match the number of records in the data source. This allows you to display a number of records at one time. You can display data one record at a time, and navigate through all of the records in the dataset.
The Tabular Data Control and the Remote Data Service are objects that you can add to your Web pages. They control the link between the Web page and the data source. There are specific events fired by page elements bound to a data source that allow you to control how data is displayed on the page without frequent trips back to a database on a server. The order in which events fire gives you a high degree of control over data display and updates. Note that only the Remote Data Service (RDS) is capable of data updates. The Tabular Data Control (TDC) reads delimited files on the server, but does not update them. If you need a custom data interface, you can write your own controls using the interface provided by the Internet SDK.
The table below uses a Tabular Data Control to display multiple records from a file. You can also take a look at the source code for the table. You can sort the table by clicking on the appropriate heading (Company, Symbol, etc.).
The form below uses a Tabular Data Control to display one record at a time from a data source file. You can also take a look at the source code for the form.
Client-side sorting (and most other manipulation of the data) is done on the client side using properties and methods of the data source object. You can use JavaScript or VBScript to invoke the methods. Sorting is accomplished with the Sort property. In the samples below, onClick handlers sort the database with just two lines of source code. The ID of the TDC is "quotelist." The first line of each handler sets the column to be used for sorting, and the second line causes the data to redisplay using the Reset method. Here is an example of a table whose contents you can sort by clicking on the column headings.
function company_onClick() ' Sorts by company name. quotelist.Sort = "Company" quotelist.Reset() end function |
function company_onClick() ' Sorts by increasing volume, then by decreasing price. quotelist.Sort = "Volume; -Price" quotelist.Reset() end function |
Filtering is accomplished with the Filter property. The source code sample below shows two onClick handlers. The myFilter handler sets a filter (all records with a volume greater than 100,000 shares), and the myNoFilter handler removes the filter. You can create more complex filters by using logical AND and OR operators: "(Quantity > 10 & color = 'lime') | Quantity < 5". Note the use of parentheses to organize this complex expression for proper parsing.
function myFilter_onclick() elem_list.object.Filter = "Volume>100000" elem_list.Reset() end function function myNoFilter_onclick() elem_list.Filter = "" 'No filters. elem_list.Reset() end function
The first line of the file can be a list of the field names, with optional data types. For example, in the table below, the third field, Quote, is of type FLOAT, and the fifth field, Volume, is of type INT (integer).
Symbol,Company,Quote:FLOAT,Change:FLOAT,Volume:INT BRYN,Brayola Baryons Inc.,5,.125,30000 TACP,Proton Tacos,23.5,.5,2400 LPTN,Leptonics Inc.,44,-1.125,634000 NTRM,International Neutrino Masters,134.5,-18.125,1230500 ZPEC,Z-Particle Emission Controls,27,2.625,28000 HAL,Halcyon Abatement Logistics,33,-3,333000 TPRT,Particle Treatments Inc.,84,.25,45000
Field names in the header line are separated by commas. You can also specify a custom delimiter of your choice.
Symbol,Company,Quote,Change,Volume
If you specify a data type with a field name, separate the field name and the data type with a colon, like this:
Symbol,Company,Quote:FLOAT,Change:FLOAT,Volume:INT
The DIV, SPAN, MARQUEE, and IMG tags support the DATAFORMATAS parameter. For example, to bind a SPAN to data that contains HTML formatting:
<SPAN DATASRC="#mydata" DATAFLD="description" DATAFORMATAS="html"></SPAN>
If the value in the description column is "This is <FONT SIZE=+2><B>large, bold</B></FONT> text", the resulting binding would look like:
This is large, bold text
Here is sample HTML for a table bound to a Tabular Data Control (TDC). The TDC uses the DataURL parameter to point to the data source. The table uses the DATASRC parameter to reference the TDC, and the DATAFLD parameter in the DIV and SPAN tags to reference the field names. If the source file does not specify field names, the default field names are Column1, Column2, etc.
<object id="quotelist" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" align="baseline" border="0" width="0" height="0"> <param name="DataURL" value="http://www.myweb.com/quotes.txt"> <param name="UseHeader" value="True"></OBJECT> <TABLE ID="elemtbl" DATASRC="#quotelist"> <TBODY><tr> <td><SPAN DATAFLD="Company"></SPAN></td> <td><SPAN DATAFLD="Symbol" DATAFORMATAS="html"></SPAN></td> <td align=right><DIV DATAFLD="Quote"></DIV></td> <td align=right><SPAN DATAFLD="Change"></SPAN></td> <td align=right><DIV DATAFLD="Volume"></DIV></td> </tr></TBODY></table>
Forms are just one example of a way you can display records. In this example, form elements are bound to a data source. To bind a TEXT INPUT element to a data source: <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Quote">.
Form elements linked to a data source support updating of the data source. This includes the following form elements:
The sample source code below shows a typical use of the Tabular Data Control (TDC). The source file is "http://www.myweb.com/quotes.txt", shown as the DataURL value. The UseHeader value is set to True because there is a header line in the data source. Remote Data Service is considerably more sophisticated, and is documented in detail in the Internet SDK.
<object id="quotelist" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" align="baseline" border="0" width="0" height="0">
<param name="DataURL" value="http://www.myweb.com/quotes.txt">
<param name="UseHeader" value="True">
Company |
Symbol |
Quote |
Change |
Volume |
The TABLE tag uses the DATASRC parameter to identify the Tabular Data Control object that is associated with the table. The DIV and SPAN tags (always located within TD tags!) use the DATAFLD parameter to identify which field displays in what column of the table. You can specify multiple rows (with different fields in the rows), use COLSPAN and ROWSPAN, and you can put more than one bound HTML element in a cell.
<table border="0" id="elemtbl" datasrc="#quotelist" cellpadding=4> <THEAD><tr> <td width=300><b><DIV id=company>Company</DIV></b></td> <td width=70><b><DIV id=symbol>Symbol</DIV></b></td> <td width=80 align=right><b><DIV id=quote>Quote</DIV></b></td> <td width=100 align=right><b><DIV id=change>Change</DIV></b></td> <td width=100 align=right><b><DIV id=volume>Volume</DIV></b></td> </tr></THEAD> <TBODY><tr> <td><SPAN DATAFLD="Company"></SPAN></td> <td><SPAN DATAFLD="Symbol" DATAFORMATAS="html"></SPAN></td> <td align=right><DIV DATAFLD="Quote"></DIV></td> <td align=right><SPAN DATAFLD="Change"></SPAN></td> <td align=right><DIV DATAFLD="Volume"></DIV></td> </tr></TBODY></table>
Event | Description |
onbeforeupdate(can_cancel) | This event is fired when an element loses focus. This applies to form elements where you can change data, such as TEXT boxes. The event's handler can cancel the update if can_cancel is set to true. |
onafterupdate() | This event is fired following the transfer of data from the element to the data provider. |
onrowexit(can_cancel) | This event is fired just prior to the data source control changing the current record. The event's handler can cancel the update if can_cancel is set to true. |
onrowenter() | This event is fired when moving to a new record. |
The data source uses "<B>TACP</B>" for the stock symbol shown in bold below, while the other symbols are just normal text without HTML codes. By storing the HTML codes in the data, you have complete control over when and how the HTML is used in data display.
Company |
Symbol |
Quote |
Change |
Volume |
The Remote Data Service obtains its data from a server component. The server component can access data in ODBC-compliant databases. If you have existing data you want to publish in SQL server, Access, Oracle, or any other ODBC accessible DBMS, use the RDS. In addition to accessing your database, RDS transmits its data using the HTTP protocol so the RDS can work over the Internet and through firewalls.
You should use the RDS if you:
Once you've determined the type of data source object to use, simply include it in your HTML file using an OBJECT tag and set the parameters. Be sure to set a unique ID attribute on the OBJECT. The Internet Explorer 4.0 binding agent requires this.
The Tabular Data Control obtains its data from a comma-separated-value file (you may also specify a custom delimiter). The file is accessed using a URL so you can put the file on your Web site where the TDC can retrieve it.
You should use a TDC if you:
This form shows one data record at a time.
Symbol: Company: Quote: % Change: Volume:
Previous Record
Next Record
<object id="quotelist2" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" align="baseline" border="0" width="0" height="0"> <param name="DataURL" value="quotes.txt"> <param name="UseHeader" value="True"> </object> Symbol: <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Volume"> Company: <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Company"> Quote: <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Quote"> % Change: <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Change"> Volume: <INPUT TYPE=TEXT datasrc="#quotelist2" DATAFLD="Volume"> <B ID="prevRec" STYLE="cursor:hand">Previous Record</B> <B ID="nextRec" STYLE="cursor:hand">Next Record</B> function prevRec_onclick() if quotelist2.recordset.AbsolutePosition > 1 then quotelist2.recordset.moveprevious end if end function function nextRec_onclick() if quotelist2.recordset.AbsolutePosition < quotelist2.recordset.recordCount then quotelist2.recordset.movenext end if end function
The following elements can be bound to the column of a data source control.
Elements | Supports Update | Supports HTML Rendering | Supports Repetition |
A | |||
APPLET | Yes | ||
BUTTON | Yes | ||
DIV | Yes | ||
FRAME | |||
IFRAME | |||
IMG | Yes | ||
INPUT TYPE=CHECKBOX | Yes | ||
INPUT TYPE=HIDDEN | Yes | ||
INPUT TYPE=PASSWORD | Yes | ||
INPUT TYPE=RADIO | Yes | ||
INPUT TYPE=TEXT | Yes | ||
LABEL | Yes | ||
MARQUEE | Yes | ||
OBJECT | Yes | ||
SELECT | Yes | ||
SPAN | Yes | ||
TABLE | Yes | ||
TEXTAREA | Yes |
Company |
Symbol |
Quote |
Change |
Volume |