Chapter 16 Dynamic HTML: Data Binding with Tabular Data Control

Outline Introduction Tabular Data Control (TDC) Tabular Data Control (TDC) Simple Data Binding Binding to an img Binding to a table Sorting table Data Data Binding Elements

Introduction Data binding Data binding –Data no longer reside exclusively on the server –Data can be maintained on the client –Eliminate server activity and network delays To bind data to XHTML elements, IE uses Data Source Objects (DSOs) To bind data to XHTML elements, IE uses Data Source Objects (DSOs) –Most popular DSO: Tabular Data Control (TDC) –TDC extracts ordered (delimited) contents from an ASCII (text) file into web pages –TDC is an ActiveX control built into IE

ActiveX Controls ActiveX Controls allow a client to increase the capabilities of their browser ActiveX Controls allow a client to increase the capabilities of their browser –a Microsoft technology, similar to plug-ins –unlike plug-ins, ActiveX controls are readily and immediately available when visit a page that uses a control Most controls download and install very quickly Most controls download and install very quickly Need to download a control only once. After that, the control is always available for use on your system Need to download a control only once. After that, the control is always available for use on your system

ActiveX Controls To embed an ActiveX control in a Web page, use the element To embed an ActiveX control in a Web page, use the element This element tells your browser to insert an object of a specified type into a page This element tells your browser to insert an object of a specified type into a page You can add many types of objects to your pages with the element You can add many types of objects to your pages with the element e.g. e.g. object parameters or alternate HTML for browsers that don't support objects </object>

object Attributes To identify a specific object type, you must define attributes for your objects To identify a specific object type, you must define attributes for your objects The useful tag attributes for ActiveX objects: The useful tag attributes for ActiveX objects: –id: An identifier for the specific instance of the object –classid: Identifies the object's class –data: URL for the object's data –height: Sets the object's height –width: Sets the object's width –……

Tabular Data Control (TDC) The Tabular Data Control The Tabular Data Control –is very useful if we have relatively small amounts of data and need to update this data frequently and require client-side scripting. –can act like a small database –available in IE 4.0+ Globally Unique Identifier for the tabular data control is CLSID:333C7BC4-460F-11D0-BC C7055A83 Globally Unique Identifier for the tabular data control is CLSID:333C7BC4-460F-11D0-BC C7055A83 <object id = "colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> object parameters object parameters

Tabular Data Control (TDC) Parameters of the object are specified using the tag. The tabular data control has around 7 parameters Parameters of the object are specified using the tag. The tabular data control has around 7 parameters Some important parameters: Some important parameters: DataURL : The path of the file that contains the data UseHeader : When set to true, it indicates that we want to use the field names for referencing a particular field. The default value is false TextQualifier : The character at the beginning and end of a text that qualifies that text. FieldDelim : The Field Delimiter is used to distinguish between the different data fields of the data file.

HTMLStandardColors.txt

Example Insert a Tabular Data Control Insert a Tabular Data Control <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83">

Simple Data Binding recordset : creates a reference point to the data file recordset : creates a reference point to the data file Properties: Properties: –EOF: used to check if we have reached the end of the file –absolutePosition: position within the recordset Methods: Methods: –moveFirst() : Point to the first data item (first row) –moveNext() : Point to the next data item from previous position –moveLast() : Point to the last data item (last row) ondatasetcomplete : Event handler that fires when the control and its data has loaded. ondatasetcomplete : Event handler that fires when the control and its data has loaded.

Simple Data Binding Example: Example: –To reference a TDC's data file, and display its 2nd row var dataSet=Colors.recordset; var dataSet=Colors.recordset; dataSet.moveNext(); dataSet.moveNext(); –To bind an element to a data file <span datasrc = "#Colors" <span datasrc = "#Colors" datafld = "ColorName"> datafld = "ColorName">

introdatabind.html (1 of 4)

introdatabind.html (2 of 4)

introdatabind.html (3 of 4)

Binding to an img Many different types of XHTML elements can be bound to data sources Many different types of XHTML elements can be bound to data sources –Binding to an img element Changing the recordset updates the src attribute of the image Changing the recordset updates the src attribute of the image

images.txt

binding.html (1 of 3)

binding.html (2 of 3)

binding.html (3 of 3)

Binding to a table Binding data to a table is perhaps the most important of data binding Binding data to a table is perhaps the most important of data binding –Different from the data binding weve seen

tablebind.html (1 of 2)

tablebind.html (2 of 2)

Sorting table Data Sorting data dynamically is governed by the following property and method: Sorting data dynamically is governed by the following property and method: –Sort: property that contain the sort string (+- column_name) and control how the data will be sorted column_name: data will be sorted by this column in asecending order column_name: data will be sorted by this column in asecending order -column_name: data will be sorted by this column in descending order -column_name: data will be sorted by this column in descending order –reset(): Method that refreshes the displayed data according to the settings of a Sort request.

Sorting Exmples Colors.Sort = ColorName Colors.Sort = ColorName Colors.Reset() Colors.Reset() Colors.Sort = - ColorName Colors.Reset() Colors.Reset()

Data Binding Elements The elements to which a data source is bound determine how the data will be displayed The elements to which a data source is bound determine how the data will be displayed –Different elements may use the data for different purposes. Element Bindable Property Element Bindable Property a href a href div, span contained text div, span contained text img src img src table cell elements table cell elements