data binding with tabular data control. objective to understand dynamic html data binding. to be...

Data Binding with Tabular Data Control

Objective

• To understand Dynamic HTML data binding.• To be able to sort and filter data directly on the

client without involving the server.• To be able to bind a table and other XHTML

elements to data source objects (DSOs).• To be able to filter data to select only records

appropriate for a particular application.• To be able to navigate backward and forward

through a database with the Move methods

3

Introduction

• Data-binding technology takes place on the

Client, not the server.• Changes to the data do not propagate back to the

server.• To bind external data to ________ elements, IE

uses Data Source Objects (DSO’s).• The type of DSO discussed here is the Tabular

Data Control (TDC), which is an __________ control.

XHTML

ActiveX

Introduction

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

• Data Source Objects (DSOs)– Tabular Data Control (TDC)

Data Binding

DataBinding is one of the most powerful features of .NET and Windows Forms. It help in linking a control to a data source tables in the database. This is useful to view, insert, update, and delete records in the table.

DataBinding Allows you to create a link between the controls of the form and the database Once the controls are linked to the database , you can retrieve data from the database.

Data bindingAdvantages

Disavantages

Data Provider

Data Source

Consumer

Database

Data Binding Architecture

• Data binding is based on a component architecture • Consists of four major pieces

– Data source object (DSO)– Data consumers– Binding agent– Table repetition agent– Data source objects provide the data to a page– Data-consuming HTML elements display the data,– Agents ensure that both the provider and the consumer

are synchronized.

Data Binding Architecture

Data Source Objects

• To bind data to the elements of an HTML page in Windows Internet Explorer, a DSO must be present on that page.

• DSOs implement an open specification that leaves it up to the DSO developer to determine the following:– How the data is transmitted to the page.– A DSO can use any transport protocol it chooses.(HTTP/file I/O).– A DSO also determines whether the transmission occurs synchronously or

asynchronously. – Asynchronous transmission is preferred, because it provides the most

immediate interactivity to the user.• How the data set is specified.

– A DSO might require an Open Database Connectivity (ODBC) connection string and an Structured Query Language (SQL) statement, or it might accept a simple URL.

• How the data is manipulated through scripts. • Since the DSO maintains the data on the client, it also manages how the data

is sorted and filtered.Whether updates are allowed.

Data Consumers• Data consumers are elements on the HTML page

that are capable of rendering the data supplied by a DSO.

• Elements include many of those intrinsic to HTML, as well as custom objects implemented as Java applets or Microsoft ActiveX Controls.

• Internet Explorer supports data binding architecture to enable authors to bind an element to a specific column of data in a data set exposed by a DSO.

• Applets and ActiveX Controls support additional binding semantics

Element Types

• Single-valued consumers- such as input elements– Consume a single value from the current record

provided by a data source.

• Tabular data consumers, such as the table element, – Repeat an entire set of records from a data

provider.

• This is called set binding.

https://msdn.microsoft.com/en-us/library/ms535260(v=vs.85).aspx


Binding Agents

• The binding and repetition agents are implemented by MSHTML.dll, the HTML viewer for Internet Explorer, and they work completely behind the scenes.

• When a page is first loaded, the binding agent finds the DSOs and the data consumers among those elements on the page.

• Once the binding agent recognizes all DSOs and data consumers, it maintains the synchronization of the data that flows between them.

• When the DSO receives more data from its source, the binding agent transmits the new data to the consumers.

• Conversely, when a user updates a databound element on the page, the binding agent notifies the DSO.

Table Repetition Agent

• The repetition agent works with tabular data consumers, such as the HTML table element, to repeat the entire data set supplied by a DSO.

• Individual elements in the table are synchronized through interaction with the binding agent.

Types of Binding

Simple Binding : a property of a control is bound to a single value Ex : TextBox with a column in table

Complex Binding : a control is associated with one or more data values Can only be done on controls, which display more than one value at a time Ex : comboBox

Data Binding

• Simple data binding• Bind a single value from a data collection to a single

control property• Ex: customer name to Text property on Textbox

• Complex data binding• Bind collection of data to control that presents multiple

values from collection• Ex: customers table in grid, customer name values in

combo box.

Simple Data binding

Complex data binding

20

Introduction

• Data-binding technology takes place on the _______, not the server.

• Changes to the data do not propagate back to the server.

• To bind external data to ________ elements, IE uses Data Source Objects (DSO’s).

• The type of DSO discussed here is the Tabular Data Control (TDC), which is an __________ control.

client

XHTML

ActiveX

21

Simple Data Binding I

• Data are stored in a separate file, such as HTMLStandardColors.txt.

• The first line in the data file is the _________ row:– @ColorName@|@ColorHexRGBValue@– Format: @fieldname1@|@fieldname2@| … where

@ is the text qualifier and | is the field delimiter.

• The HTML file uses the ______ element to insert the TDC (the classid shown is the one used for TDC)

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

header

object

22

Simple Data Binding II

• The param element specifies parameters for the ________ element.

<object id = "Colors"

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

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

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

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

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

</object>

• Sample data in the file@ColorName@|@ColorHexRGBValue@

@aqua@|@#00FFFF@

@black@|@#000000@

object

23

Simple Data Binding III• Binding the data to HTML <p><strong>Color Name: </strong> <span id = "colorId" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorName"></span><br />

<strong>Color RGB Value: </strong> <span id = "colorRGB" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue"> </span><br />

Currently viewing record number <span id = "recordNumber" style = "font-weight: 900"> </span><br />

<span id = "colorSample" style = "background-color: aqua; color: 888888; font-size: 30pt">Color Sample </span></p>

24

Simple Data Binding III• Updating data dynamically using

JavaScript

<script type = "text/javascript"> var recordSet=Colors.recordset; function displayRecordNumber(){ if ( !recordSet.EOF )

recordNumber.innerText = recordSet.absolutePosition; else recordNumber.innerText="

"; }

function forward() { recordSet.MoveNext(); if ( recordSet.EOF ) recordSet.MoveFirst(); colorSample.style.backgroundColor

= colorRGB.innerText; displayRecordNumber();}</script>

<body onload = "displayRecordNumber()" onclick = "forward()">

HTML Extensions for Data Binding

• The key to data binding is to connect a data source object to a data consumer.

• A data consumer can be any HTML element that supports the extended data-binding attributes.

• The dataSrc attribute specifies the DSO being used for data binding.

• For several fields of data, dataFld attribute is used to specify which field of data to bind to a given element.

• dataFormatAs attribute is used to specify how the data in a databound field is rendered.

• The dataPageSize attribute is used to specify the maximum number of records that are displayed at once in a data bound table.





Categories

• Single-valued consumers – The binding agent takes a single value from the current

record of a data source and passes it to a single-valued consumer

<SPAN DATASRC=#dsoComposer DATAFLD=compsr_first></SPAN>

• Tabular data consumers – The repetition agent works with the binding agent to pass

the entire set of records to a tabular data consumer.

<TABLE DATASRC=#dsoComposer> <TR> <TD><DIV DATAFLD=compsr_first></DIV></TD> </TR> </TABLE>

Specifying Data Rendering Using the DATAFORMATAS Attribute

• The data supplied by a DSO can be in a variety of formats

• dataFormatAs attribute on single-valued consumer elements that support the attribute to indicate how the data should be rendered.(HTML and TEXT)

<MARQUEE DATASRC=#dsoAdvertisement DATAFLD=banner DATAFORMATAS=html> </MARQUEE>

DATAPAGESIZE Attribute

• When binding a table to a data source, all the records in the data set are displayed by default.

• If the data set is large, the page might grow beyond what is visible to the user.

• In addition, any content positioned below the table is pushed off the screen.

• The dataPageSize attribute can be applied to a table to specify the maximum number of records to display at any one time

introdatabind.html(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>

Using <table> tag to handle Tabular Data Control

• For ASCII databases that contain quite lots of data using TDC it is easy to represent

• Using Data Src and Datafld attributes tabular datas are represented

35

Moving Within a recordset• Web applications need the ability to navigate through

a ___________.• Identifying the data source begins with

<object id = "Colors“ …

• A DHTML recordset object has the following methods– Colors.recordset.MoveFirst()– Colors.recordset.MoveLast()– Colors.recordset.MovePrevious()– Colors.recordset.MoveNext()

• Create buttons that use onclick() to move the pointer to the desired record.

• See p. 517.

recordset

16.3 Moving within a Recordset

• Moving through a recordset using JavaScript (Fig. 16.3)

moving.html(1 of 5)


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>Dynamic Recordset Viewing</title>








18 </object>

19


21 <!--

22 var recordSet = Colors.recordset;

23

24 function update()

25 {

moving.html(2 of 5)

26 h1Title.style.color = colorRGB.innerText;

27 }

28

29 function move( whereTo )

30 {

31 switch ( whereTo ) {

32

33 case "first":


35 update();

36 break;

37

38 // If recordset is at beginning, move to end.

39 case "previous":

40

41 recordSet.MovePrevious();

42

43 if ( recordSet.BOF )

44 recordSet.MoveLast();

45

46 update();

47 break;

48

moving.html(3 of 5)

49 // If recordset is at end, move to beginning.

50 case "next":

51


53



56

57 update();

58 break;

59

60 case "last":


62 update();

63 break;

64 }

65 }

66 // -->

67 </script>

68

69 <style type = "text/css">

70 input { background-color: khaki;

71 color: green;

72 font-weight: bold }

73 </style>

74 </head>

moving.html(4 of 5)

75

76 <body style = "background-color: darkkhaki">

77

78 <h1 style = "color: black" id = "h1Title">

79 XHTML Color Table</h1>

80 <span style = "position: absolute; left: 200; width: 270;

81 border-style: groove; text-align: center;

82 background-color: cornsilk; padding: 10">

83 <strong>Color Name: </strong>

84 <span id = "colorName" style = "font-family: monospace"

85 datasrc = "#Colors" datafld = "ColorName">ABC</span>

86 <br />

87

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

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

90 datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC

91 </span><br />

92

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

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

95

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

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

98

moving.html(5 of 5)

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

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

101

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

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

104 </span>

105

106 </body>

107 </html>

16.4 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

44

Binding to an img

• Example of image.txt containing image file names:imagenumbers/0.gifnumbers/1.gifnumbers/2.gif…

• Identify the data _______ for the web page: <object id = “Images"

• ______ the data source and data field to an img: <img datascr = “#Images” datafld = “image”

• Create buttons that use onclick() to call methods like Images.recordset.moveNext()

source

Bind

images.txt(1 of 1)

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

binding.html(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


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 )


36

37 break;

38

39 case "next":

40


42



45

46 break;

47

48 case "last":


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>

16.5 Binding to a table

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

51

Binding to a table• Sample data in the file

@ColorName@|@ColorHexRGBValue@@aqua@|@#00FFFF@@black@|@#000000@ …

• Identifying the data source for the web page: <object id = "Colors" …

• Binding data source to a _______ element: <table datasrc = “#Colors” …

• Binding data fields to table cells: <td><span datafld = “Colorname”></span></td> <td><span datafld = “Colorname”></span></td>

• See p. 522.

table

tablebind.html(1 of 2)




4

5 

6 

7


9 <head>

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








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.html(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>

16.6 Sorting table Data

• Manipulate a large data source– Need to sort data

• Can be accomplished by the Sort property of the TDC

56

Sorting table Data (p. 524)

• Create a list of Sort options<select onchange = "Colors.Sort = this.value; Colors.Reset();"> <option value = "ColorName">Color Name (Ascending)</option> <option value = "-ColorName">Color Name (Descending)</option> <option value = "ColorHexRGBValue">Color RGB Value

(Ascending)</option> <option value = "-ColorHexRGBValue">Color RGB Value (Descending)</option></select>

• JavaScript keyword _______ refers to the element in which the statement resides (select).

• After setting the Sort property, the Reset() method of the TDC is invoked.

• For advanced sorting and filtering, see p. 526.

this

sorting.html(1 of 3)




4

5 

6 

7


9 <head>

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








18 </object>

19 </head>

20

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

22

23 <h1>Sorting Data</h1>

24

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


26 border-color: darkseagreen;

27 background-color: lightcyan">

28 <caption>

29 Sort by:

30

31 <select onchange = "Colors.Sort = this.value;

32 Colors.Reset();">

33 <option value = "ColorName">Color Name (Ascending)

34 </option>

35 <option value = "-ColorName">Color Name (Descending)

36 </option>

37 <option value = "ColorHexRGBValue">Color RGB Value

38 (Ascending)</option>

39 <option value = "-ColorHexRGBValue">Color RGB Value

40 (Descending)</option>

41 </select>

42 </caption>

43

44 <thead>

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

46 <th>Color Name</th>

47 <th>Color RGB Value</th>

48 </tr>

49 </thead>

50


51 <tbody>

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

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

54 <td><span datafld = "ColorHexRGBValue"

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

56 </tr>

57 </tbody>

58

59 </table>

60

61 </body>

62 </html>

16.7 Advanced Sorting and Filtering

• Filtering– Selecting data that meets a specific criteria– Combined with TDC provides powerful data

rendering

DBPublications.txt(1 of 1)

1 @Title:String@|@Authors:String@|@Copyright:String@|

2 @Edition:String@|@Type:String@

3 @C How to Program@|@Deitel,Deitel@|@1992@|@1@|@BK@

4 @C How to Program@|@Deitel,Deitel@|@1994@|@2@|@BK@

5 @C++ How to Program@|@Deitel,Deitel@|@1994@|@1@|@BK@

6 @C++ How to Program@|@Deitel,Deitel@|@1998@|@2@|@BK@

7 @Java How to Program@|@Deitel,Deitel@|@1997@|@1@|@BK@



10 @Visual Basic 6 How to Program@|@Deitel,Deitel,Nieto@|@1999@|

11 @1@|@BK@

12 @Internet and World Wide Web How to Program@|@Deitel,Deitel@|

13 @2000@|@1@|@BK@

14 @The Complete C++ Training Course@|@Deitel,Deitel@|@1996@|

15 @1@|@BKMMCD@

16 @The Complete C++ Training Course@|@Deitel,Deitel@|@1998@|

17 @2@|@BKMMCD@

18 @The Complete Java Training Course@|@Deitel,Deitel@|@1997@|

19 @1@|@BKMMCD@


21 @2@|@BKMMCD@


23 @3@|@BKMMCD@

24 @The Complete Visual Basic 6 Training Course@|

25 @Deitel,Deitel,Nieto@|@1999@|@1@|@BKMMCD@

26 @The Complete Internet and World Wide Web Programming Training

Course@|@Deitel,Deitel@|@2000@|@1@|@BKMMCD@

advancesort.html(1 of 7)




4

5 

6 

7


9 <head>

10 <title>Data Binding - Sorting and Filtering</title>

11

12 <object id = "Publications"


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




18 <param name = "Sort" value = "+Title" />

19 </object>

20

21 <style type = "text/css">

22

23 a { font-size: 9pt;

24 text-decoration: underline;

25 cursor: hand;

26 color: blue }

27

28 caption { cursor: hand; }

29

30 span { cursor: hand; }

31

32 </style>

33


35 <!--

36 var sortOrder;

37

38 function reSort( column, order )

39 {

40 if ( order )

41 sortOrder = "";

42 else

43 sortOrder = "-";

44

45 if ( event.ctrlKey ) {

46 Publications.Sort += "; " + sortOrder + column;

47 Publications.Reset();

48 }

49 else {

50 Publications.Sort = sortOrder + column;



52 }

53

54 spanSort.innerText = "Current sort: " +

55 Publications.Sort;

56 }

57

58 function filter( filterText, filterColumn )

59 {

60 Publications.Filter = filterColumn + "=" +

61 filterText;


63 spanFilter.innerText =

64 "Current filter: " + Publications.Filter;

65 }

66

67 function clearAll()

68 {

69 Publications.Sort = " ";

70 spanSort.innerText = "Current sort: None";

71 Publications.Filter = " ";

72 spanFilter.innerText = "Current filter: None";


74 }

75 // -->


76 </script>

77 </head>

78

79 <body>

80 <h1>Advanced Sorting</h1>

81 <p>Click the link next to a column head to sort by that

82 column. To sort by more than one column at a time, hold

83 down Ctrl while you click another sorting link. Click

84 any cell to filter by the data of that cell. To clear

85 filters and sorts, click the green caption bar.</p>

86

87 <table datasrc = "#Publications" border = "1"

88 cellspacing = "0" cellpadding = "2" style =

89 "background-color: papayawhip;">

90

91 <caption style = "background-color: lightgreen;

92 padding: 5" onclick = "clearAll()">

93 <span id = "spanFilter" style = "font-weight: bold;

94 background-color: lavender">Current filter: None

95 </span>

96 <span id = "spanSort" style = "font-weight: bold;

97 background-color: khaki">Current sort: None</span>

98 </caption>

99


100 <thead>

101 <tr>

102 <th>Title <br />

103 (<a onclick = "reSort( 'Title', true )">

104 Ascending</a>

105 <a onclick = "reSort( 'Title', false )">

106 Descending</a>)

107 </th>

108

109 <th>Authors <br />

110 (<a onclick = "reSort( 'Authors', true )">

111 Ascending</a>

112 <a onclick = "reSort( 'Authors', false )">

113 Descending</a>)

114 </th>

115

116 <th>Copyright <br />

117 (<a onclick = "reSort( 'Copyright', true )">

118 Ascending</a>

119 <a onclick = "reSort( 'Copyright', false )">

120 Descending</a>)

121 </th>

122


123 <th>Edition <br />

124 (<a onclick = "reSort( 'Edition', true )">

125 Ascending</a>

126 <a onclick = "reSort( 'Edition', false )">

127 Descending</a>)

128 </th>

129

130 <th>Type <br />

131 (<a onclick = "reSort( 'Type', true )">

132 Ascending</a>

133 <a onclick = "reSort( 'Type', false )">

134 Descending</a>)

135 </th>

136 </tr>

137 </thead>

138

139 <tr>

140 <td><span datafld = "Title" onclick =

141 "filter( this.innerText, 'Title' )"></span>

142 </td>

143

144 <td><span datafld = "Authors" onclick =

145 "filter( this.innerText, 'Authors')"></span>

146 </td>

147


148 <td><span datafld = "Copyright" onclick =

149 "filter( this.innerText, 'Copyright' )"></span>

150 </td>

151

152 <td><span datafld = "Edition" onclick =

153 "filter( this.innerText, 'Edition' )"></span>

154 </td>

155

156 <td><span datafld = "Type" onclick =

157 "filter( this.innerText, 'Type' )"></span>

158 </td>

159

160 </tr>

161

162 </table>

163

164 </body>

165 </html>

16.8 Data Binding Elements

• Exactly how a data source is displayed by the browser depends on the XHTML element to which the data is bound– Different elements may use the data for different

purposes.

16.8 Data Binding ElementsElement Bindable Property/Attribute a href

div Contained text frame href iframe href img src input type = "button" value (button text) input type = "checkbox" checked (use a boolean value in the data) input type = "hidden" value input type = "password" value input type = "radio" checked (use a boolean value in the data)

input type = "text" value marquee Contained text param value select Selected option span Contained text table Cell elements (see Section 16.6) textarea Contained text (value)

Fig. 16.10 XHTML elements that allow data binding.

data binding with tabular data control. objective to understand dynamic html data binding. to be...

Documents