chapter 16

Chapter 16Chapter 16

Dynamic HTML: Dynamic HTML: Data Binding with Tabular Data Binding with Tabular

Data ControlData Control

OutlineOutline

• 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

IntroductionIntroduction

• Data bindingData binding– Data no longer reside exclusively on the serverData no longer reside exclusively on the server– Data can be maintained on the clientData can be maintained on the client– Eliminate server activity and network delaysEliminate server activity and network delays

• To bind data to XHTML elements, IE uses To bind data to XHTML elements, IE uses Data Source Objects (DSOs)Data Source Objects (DSOs)– Most popular DSO: Tabular Data Control (TDC)Most popular DSO: Tabular Data Control (TDC)– TDC TDC extracts ordered (delimited) contents from extracts ordered (delimited) contents from

an ASCII (text) file into web pages an ASCII (text) file into web pages – TDC is an ActiveX control TDC is an ActiveX control built into IEbuilt into IE

ActiveXActiveX Controls Controls

• ActiveX Controls allow a client to increase ActiveX Controls allow a client to increase the capabilities of their browserthe capabilities of their browser– a Microsoft technology, similar to plug-ins a Microsoft technology, similar to plug-ins – unlike plug-ins, ActiveX controls are readily and unlike plug-ins, ActiveX controls are readily and

immediately available when visit a page that immediately available when visit a page that uses a controluses a control

• Most controls download and install very Most controls download and install very quicklyquickly

• Need to download a control only once. After Need to download a control only once. After that, the control is always available for use that, the control is always available for use on your systemon your system

ActiveXActiveX Controls Controls

• To embed an ActiveX control in a Web To embed an ActiveX control in a Web page, use the <page, use the <objectobject> element> element

• This element tells your browser to insert This element tells your browser to insert an object of a specified type into a pagean object of a specified type into a page

• You can add many types of objects to your You can add many types of objects to your pages with the <pages with the <objectobject> element> element

• e.g. e.g. <object <object attributesattributes> >

object parameters or object parameters or alternate HTML for browsers that don't alternate HTML for browsers that don't

support objectssupport objects </object> </object>

objectobject Attributes Attributes

• To identify a specific object type, you must To identify a specific object type, you must define attributes for your objectsdefine attributes for your objects

• The useful <The useful <objectobject> tag attributes for > tag attributes for ActiveX objects:ActiveX objects:– id: An identifier for the specific instance of the id: An identifier for the specific instance of the

object object – classid: Identifies the object's class classid: Identifies the object's class – data: URL for the object's data data: URL for the object's data – height: Sets the object's height height: Sets the object's height – width: Sets the object's widthwidth: Sets the object's width– …………

Tabular Data Control (TDC)Tabular Data Control (TDC)

• The Tabular Data Control The Tabular Data Control – is very useful if we have relatively small amounts of data is very useful if we have relatively small amounts of data

and need to update this data frequently and require client-and need to update this data frequently and require client-side scripting. side scripting.

– can act like a small databasecan act like a small database– available in IE 4.0+available in IE 4.0+

• Globally Unique IdentifierGlobally Unique Identifier for the tabular data for the tabular data control is CLSID:333C7BC4-460F-11D0-BC04-control is CLSID:333C7BC4-460F-11D0-BC04-0080C7055A830080C7055A83

<object id = "colors" <object id = "colors" classid = "CLSID:333C7BC4-460F-11D0-BC04 -classid = "CLSID:333C7BC4-460F-11D0-BC04 -

0080C7055A83">0080C7055A83"> object parametersobject parameters </object></object>

Tabular Data Control (TDC)Tabular Data Control (TDC)

• Parameters of the object are specified using the Parameters of the object are specified using the <param> tag. The tabular data control has <param> tag. The tabular data control has around 7 parameters around 7 parameters

• Some important parameters:Some important parameters:DataURL :DataURL : The path of the file that contains the data The path of the file that contains the dataUseHeader :UseHeader : When set to true, it indicates that we want When set to true, it indicates that we want

to use the field names for referencing a particular field. to use the field names for referencing a particular field. The default value is falseThe default value is false

TextQualifier :TextQualifier : The character at the beginning and end of The character at the beginning and end of a text that qualifies that text. a text that qualifies that text.

FieldDelim :FieldDelim : The Field Delimiter is used to distinguish The Field Delimiter is used to distinguish between the different data fields of the data file. between the different data fields of the data file.

ExampleExample

• Insert a Tabular Data ControlInsert a Tabular Data Control<object id = "Colors" <object id = "Colors"

classid = "CLSID:333C7BC4-460F-11D0-BC04 -classid = "CLSID:333C7BC4-460F-11D0-BC04 -0080C7055A83">0080C7055A83">

<param name = "DataURL" value = <param name = "DataURL" value = “HTMLStandardColors.txt" /> “HTMLStandardColors.txt" />

<param name = "UseHeader" value = "TRUE" /> <param name = "UseHeader" value = "TRUE" />

<param name = "TextQualifier" value = "@" /><param name = "TextQualifier" value = "@" />

<param name = "FieldDelim" value = "|" /> <param name = "FieldDelim" value = "|" />

</object></object>

Simple Data BindingSimple Data Binding

• recordset :recordset : creates a reference point to the creates a reference point to the data data filefile

• Properties: Properties: – EOF:EOF: used to check if we have reached the end of the file used to check if we have reached the end of the file– absolutePosition: absolutePosition: position within the position within the recordsetrecordset

• Methods:Methods:– moveFirst() :moveFirst() : Point to the first Point to the first datadata item (first row) item (first row)– moveNext() :moveNext() : Point to the next Point to the next datadata item from previous item from previous

positionposition– moveLast() :moveLast() : Point to the last Point to the last datadata item (last row) item (last row)

• ondatasetcomplete : ondatasetcomplete : Event handler that fires Event handler that fires when the when the controlcontrol and its and its datadata has loaded. has loaded.

Simple Data BindingSimple Data Binding

• Example:Example:– To reference a TDC's data file, and To reference a TDC's data file, and

display its 2nd row display its 2nd row var dataSet=Colors.var dataSet=Colors.recordsetrecordset; ; dataSet.moveNext(); dataSet.moveNext();

– To bind an element to a data fileTo bind an element to a data file <span datasrc = "#Colors" <span datasrc = "#Colors" datafld = "ColorName">datafld = "ColorName"> </span></span>

introdatabind.htmlintrodatabind.html(1 of 4)(1 of 4)

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>Intro to Data Binding</title>

11

12 

13 

14 

15 

16 <object id = "Colors"

17 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

18 <param name = "DataURL" value =

19 "HTMLStandardColors.txt" />

20 <param name = "UseHeader" value = "TRUE" />

21 <param name = "TextQualifier" value = "@" />

22 <param name = "FieldDelim" value = "|" />

23 </object>

24

25 <script type = "text/javascript">

26


50 </script>

51 </head>

52

53 <body onload = "reNumber()" onclick = "forward()">

54

55 <h1>XHTML Color Table</h1>

56 <h3>Click anywhere in the browser window

57 to move forward in the recordset.</h3>

58 <p><strong>Color Name: </strong>

59 <span id = "colorId" style = "font-family: monospace"

60 datasrc = "#Colors" datafld = "ColorName"></span><br />

61

62 <strong>Color RGB Value: </strong>

63 <span id = "colorRGB" style = "font-family: monospace"

64 datasrc = "#Colors" datafld = "ColorHexRGBValue">

65 </span><br />

66

67 Currently viewing record number

68 <span id = "recordNumber" style = "font-weight: 900">

69 </span><br />

70

71 <span id = "colorSample" style = "background-color: aqua;

72 color: 888888; font-size: 30pt">Color Sample

73 </span></p>

74

75 </body>

76 </html>

Binding to an Binding to an imgimg

• Many different types of XHTML Many different types of XHTML elements can be bound to data elements can be bound to data sourcessources– Binding to an Binding to an imgimg element element

•Changing the recordset updates the Changing the recordset updates the srcsrc attribute of the imageattribute of the image

1 image

2 numbers/0.gif

3 numbers/1.gif

4 numbers/2.gif

5 numbers/3.gif

6 numbers/4.gif

7 numbers/5.gif

8 numbers/6.gif

9 numbers/7.gif

10 numbers/8.gif

11 numbers/9.gif

images.txt

binding.htmlbinding.html(1 of 3)(1 of 3)


2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4

5 

6 

7


9 <head>

10 <title>Binding to a img</title>

11

12 <object id = "Images"


14 <param name = "DataURL" value = "images.txt" />

15 <param name = "UseHeader" value = "True" />

16 </object>

17

18 <script type = "text/javascript">

19 <!--

20 recordSet = Images.recordset;

21

22 function move( whereTo )

23 {

24 switch( whereTo ) {

25


26 case "first":


28 break;

29

30 case "previous":

31

32 recordSet.MovePrevious();

33

34 if ( recordSet.BOF )

35 recordSet.MoveLast();

36

37 break;

38

39 case "next":

40

41 recordSet.MoveNext();

42

43 if ( recordSet.EOF )


45

46 break;

47

48 case "last":

49 recordSet.MoveLast();

50 break;


51 }

52 }

53 // -->

54 </script>

55 </head>

56

57 <body>

58

59 <img datasrc = "#Images" datafld = "image" alt = "Image"

60 style = "position: relative; left: 45px" /><br />

61

62 <input type = "button" value = "First"

63 onclick = "move( 'first' );" />

64

65 <input type = "button" value = "Previous"

66 onclick = "move( 'previous' );" />

67

68 <input type = "button" value = "Next"

69 onclick = "move( 'next' );" />

70

71 <input type = "button" value = "Last"

72 onclick = "move( 'last' );" />

73

74 </body>

75 </html>

Binding to a Binding to a tabletable

• Binding data to a Binding data to a tabletable is perhaps is perhaps the most important of data bindingthe most important of data binding– Different from the data binding we’ve Different from the data binding we’ve

seenseen

tablebind.htmltablebind.html(1 of 2)(1 of 2)


2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7


9 <head>

10 <title>Data Binding and Tables</title>

11 <object id = "Colors"


13 <param name = "DataURL" value =

14 "HTMLStandardColors.txt" />

15 <param name = "UseHeader" value = "TRUE" />

16 <param name = "TextQualifier" value = "@" />

17 <param name = "FieldDelim" value = "|" />

18 </object>

19 </head>

20

21 <body style = "background-color: darkseagreen">

22

23 <h1>Binding Data to a <code>table</code></h1>

24

25 <table datasrc = "#Colors" style = "border-style: ridge;

tablebind.htmltablebind.html(2 of 2)(2 of 2)

26 border-color: darkseagreen;

27 background-color: lightcyan">

28

29 <thead>

30 <tr style = "background-color: mediumslateblue">

31 <th>Color Name</th>

32 <th>Color RGB Value</th>

33 </tr>

34 </thead>

35

36 <tbody>

37 <tr style = "background-color: lightsteelblue">

38 <td><span datafld = "ColorName"></span></td>

39 <td><span datafld = "ColorHexRGBValue"

40 style = "font-family: monospace"></span></td>

41 </tr>

42 </tbody>

43

44 </table>

45

46 </body>

47 </html>

Sorting Sorting tabletable Data Data

• Sorting data dynamically is governed by Sorting data dynamically is governed by the following property and method: the following property and method: – Sort:Sort: property that contain the property that contain the sortsort string (+- string (+-

column_name) and control how the data will be column_name) and control how the data will be sortedsorted• column_name: data will be sorted by this column in column_name: data will be sorted by this column in

asecending orderasecending order• -column_name: data will be sorted by this column in -column_name: data will be sorted by this column in

descending orderdescending order

– reset():reset(): Method that refreshes the displayed Method that refreshes the displayed data according to the settings of a data according to the settings of a SortSort request. request.

Sorting ExmplesSorting Exmples

Colors.Sort = ColorNameColors.Sort = ColorName

Colors.Reset()Colors.Reset()

Colors.Sort = - ColorNameColors.Sort = - ColorName

Colors.Reset()Colors.Reset()

Data Binding ElementsData Binding Elements

• The elements to which a data source is The elements to which a data source is bound determine how the data will be bound determine how the data will be displayeddisplayed– Different elements may use the data for Different elements may use the data for

different purposes.different purposes.

• Element Bindable PropertyElement Bindable Property a hrefa href div, span contained textdiv, span contained text img srcimg src table cell elementstable cell elements

chapter 16

Documents