Dynamic HTML: Data Binding with Tabular Data Control

1
Chapter 16

• Dynamic HTML Data Binding with Tabular Data
  Control

2
Outline

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

3
Introduction

• 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)
• 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

4
ActiveX Controls

• 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
• Need to download a control only once. After that,
  the control is always available for use on your
  system

5
ActiveX Controls

• To embed an ActiveX control in a Web page, use
  the ltobjectgt element
• 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 ltobjectgt element
• e.g.
• ltobject attributesgt
• object parameters or
• alternate HTML for browsers that don't support
  objects
• lt/objectgt

6
object Attributes

• To identify a specific object type, you must
  define attributes for your objects
• The useful ltobjectgt 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

7
Tabular Data Control (TDC)

• 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 CLSID333C7BC4-460F-11D0-BC04-0080C7055
  A83
• ltobject id "colors"
  
• classid "CLSID333C7BC4-460F-11D0-BC04
  -0080C7055A83"gt
• object parameters
• lt/objectgt

8
Tabular Data Control (TDC)

• Parameters of the object are specified using the
  ltparamgt tag. The tabular data control has around
  7 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.

9
HTMLStandardColors.txt
10
Example

• Insert a Tabular Data Control
• ltobject id "Colors"
  
• classid "CLSID333C7BC4-460F-11D0-BC04
  -0080C7055A83"gt
• ltparam name "DataURL" value
  HTMLStandardColors.txt" /gt
• ltparam name "UseHeader" value
  "TRUE" /gt
• ltparam name "TextQualifier" value
  "_at_" /gt
• ltparam name "FieldDelim" value ""
  /gt
• lt/objectgt

11
Simple Data Binding

• recordset creates a reference point to the data
  file
• Properties
• EOF used to check if we have reached the end of
  the file
• absolutePosition position within the recordset
• 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.

12
Simple Data Binding

• Example
• To reference a TDC's data file, and display its
  2nd row
• var dataSetColors.recordset
• dataSet.moveNext()
• To bind an element to a data file
• ltspan datasrc "Colors"
• datafld "ColorName"gt
• lt/spangt

13
introdatabind.html(1 of 4)
14
introdatabind.html(2 of 4)
15
introdatabind.html(3 of 4)
16
(No Transcript)
17
Binding to an img

• 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

18
images.txt
19
binding.html(1 of 3)
20
binding.html(2 of 3)
21
binding.html(3 of 3)
22
(No Transcript)
23
Binding to a table

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

24
tablebind.html(1 of 2)
25
tablebind.html(2 of 2)
26
(No Transcript)
27
Sorting table Data

• 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 descending order
• reset() Method that refreshes the displayed data
  according to the settings of a Sort request.

28
Sorting Exmples

• Colors.Sort ColorName
• Colors.Reset()
• Colors.Sort - ColorName
• Colors.Reset()

29
Data Binding Elements

• 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
• a href
• div, span contained text
• img src
• table cell elements