Data Binding with Tabular Data Cotrol (TDC)

DATA BINDING IN DHTML!

DHTML is a client-side scripting language that provides the features for doing data manipulations like data sorting and filtering at the client side, which ought to be done directly on the database at the server. With DHTML, data manipulations can be done on the client without involving the server and the network. It helps web application developers to produce more responsive data-intensive applications.

To do data manipulation on the client, data must be retrieved from the database on the server and stored in a file, with a format that could be understood by the object in DHTML. This process of storing and displaying data on a web page using files at the client side is called Data Binding. Data binding at the client side can be done with the help of objects called Data Source Objects (DSO).

Simple Data Binding:

Data Source Objects (DSO) are objects which are used for data access from files. One of the several DSOs available in IE 5.5 is the Tabular Data Control (TDC). The Tabular Data Control (TDC) is an ActiveX control that is added to a web page with the object element. This control can be used to bind an element like <span> in a web page with a data field available in a file so as to retrieve and display the data in it.

Element span is a grouping element – it doesn’t apply any inherent formatting to its contents. It is an inline-level element that displays its content with other text and with no line breaks. A similar element is the div element, but it displays its content on its own line, with margins above and below.

Data must be stored in a tabular format for the Table Data Control to access them from a web page. The rules for storing the data in a tabular form are as follows:

The first row of the file may contain headers for the tabular data. Data are arranged in rows and columns.
Data are enclosed by a special character like @.
Data separators like | are used to separate data one from another in a record.
Implementation:
The ActiveX control is initialized using the <OBJECT> tag. The CLASSID (unique identifier) for the tabular data control is
CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83
Initialization of the Control
```
<OBJECT ID="SomeID" CLASSID="CLSID: 333C7BC4-460F-11D0-BC04-0080C7055A83">
```
```
...
```
```
...
```
```
...
```
```
</OBJECT>
```
```
 
```
Any object, like applet, has a number of parameters. Parameters of the object are specified using the <PARAM> tag. The tabular data control has around 8 parameters.

DataURL: The path of the file that contains the data. For eg "data.txt".

UseHeader: Specifies whether the first line of the data file should be used as reference names for their respective fields below. If specified to false, use "Column1", "Column2" etc instead. The default value is false.

TextQualifier: Specifies the optional character that surrounds a field.

FieldDelim: Specifies the character that is used to separate each field in the data file. The default character is the comma (,). For eg, consider a data file where we have the fields data: *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is '|' and '*' is the text qualifier.

RowDelim: Specifies the character used to mark the end of each row of data. The default character is the newline (NL) character.

Thus, an example complete initialization will look as follows :

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

<PARAM NAME="DataURL" VALUE="YourDataFile.txt">

<PARAM NAME="UseHeader" VALUE="TRUE">

<PARAM NAME="TextQualifier" VALUE="~">

<PARAM NAME="FieldDelim" VALUE="|">

</OBJECT>

The parameter names are not case sensitive. The Text Qualifier parameter is purely optional, though can be useful in helping you more easily distinguish between each data entry.

Example for Data binding in DHTML

<HTML>
<HEAD>
<TITLE></TITLE>

<STYLE>
BODY { font-size: 9pt; font-family: verdana, tahoma, sans serif, helvetica; }
TH A { color: white }
TH A:Hover { color: yellow }
</STYLE>

</HEAD>

<BODY>

<OBJECT id=tdcFile CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="file.csv">
<PARAM NAME="UseHeader" VALUE="True">
<param name="FieldDelim" value=";">
<param name="CaseSensitive" value="false">
</OBJECT>

<TR>
<TD COLSPAN=4><LABEL><B>Name:</B> </LABEL>
</TD>
</TR>

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=2>
<TR BGCOLOR=#333366>
<TD><DIV ID='divDept'><FONT COLOR=#FFFFFF><B>All</B></FONT></DIV></TD>
<TR>
<TD>
<TABLE DATASRC="#tdcFile">
<THEAD>
<TR>
<TH BGCOLOR=#333366>Car</TH>
<TH BGCOLOR=#333366>Name</TH>
<TH BGCOLOR=#333366>Resp</TH>
<TH BGCOLOR=#333366>email</TH>
<TH BGCOLOR=#333366>doc</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD BGCOLOR=#EEEECC><DIV datafld=car></DIV></TD>
<TD BGCOLOR=#EEEECC><DIV datafld=name></DIV></TD>
<TD BGCOLOR=#EEEECC><DIV datafld=resp></DIV></TD>
<TD BGCOLOR=#EEEECC><A DATAFLD=Email STYLE='Text-Decoration: None' ONMOUSEOVER='if(this.href.indexOf("mailto:") == -1){ this.href = "mailto:" + this.href};'><SPAN datafld=Email></SPAN></A></TD>
<TD BGCOLOR=#EEEECC><A DATAFLD=doc STYLE='Text-Decoration: None' ONMOUSEOVER='if(this.href.indexOf("") == -1){ this.href = "" + this.href};'><SPAN datafld=doc></SPAN></A></TD>

</TR>
</TBODY>
<TFOOT>

</TFOOT>
</TABLE>

</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Search This Blog