Scribd
Upload
2K views

DHTML Data Binding With TDC

Uploaded by

api-3760405
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
2K views

DHTML Data Binding With TDC

Uploaded by

api-3760405
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 45

Chapter 16 - Dynamic HTML: Data

Binding with Tabular Data Control


Outline
16.1 Introduction
16.2 Simple Data Binding
16.3 Moving within a Recordset
16.4 Binding to an img
16.5 Binding to a table
16.6 Sorting table Data
16.7 Advanced Sorting and Filtering
16.8 Data Binding Elements
16.9 Web Resources

 2004 Prentice Hall, Inc. All rights reserved.


Objectives

• In this lesson, you will learn:


– To understand Dynamic HTML’s notion of data binding and
how to bind data to XHTML elements.
– 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.

 2004 Prentice Hall, Inc. All rights reserved.


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

 2004 Prentice Hall, Inc. All rights reserved.


16.2 Simple Data Binding

• Data file
– Header row
• Specifies the names of the columns below
– Text qualifiers ( @ )
• Enclose data in each field
– Field delimiter ( | )
• Separate each field
– Recordset

 2004 Prentice Hall, Inc. All rights reserved.


1 @ColorName@|@ColorHexRGBValue@
2 @aqua@|@#00FFFF@ Outline
3 @black@|@#000000@
4 @blue@|@#0000FF@
5 @fuchsia@|@#FF00FF@ HTMLStandardColors
6 .txt
@gray@|@#808080@
7 @green@|@#008000@
(1 of 1)
8 @lime@|@#00FF00@
9 @maroon@|@#800000@
10 @navy@|@#000080@
11 @olive@|@#808000@
12 @purple@|@#800080@
13 @red@|@#FF0000@
14 @silver@|@#C0C0C0@
15 @teal@|@#008080@
16 @yellow@|@#FFFF00@
17 @white@|@#FFFFFF@

 2004 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 16.2: introdatabind.html --> introdatabind.html
6 <!-- Simple data binding and recordset manipulation --> (1 of 4)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Intro to Data Binding</title>
11
12 <!-- This object element inserts an ActiveX control -->
13 <!-- for handling and parsing our data. The PARAM -->
14 <!-- tags give the control starting parameters -->
15 <!-- such as URL. -->
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

 2004 Prentice Hall, Inc.


All rights reserved.
25 <script type = "text/javascript">
26 <!-- Outline
27 var recordSet = Colors.recordset;
28
29 function displayRecordNumber() introdatabind.html
30 { (2 of 4)
31 if ( !recordSet.EOF )
32 recordNumber.innerText =
33 recordSet.absolutePosition;
34 else
35 recordNumber.innerText = " ";
36 }
37
38 function forward()
39 {
40 recordSet.MoveNext();
41
42 if ( recordSet.EOF )
43 recordSet.MoveFirst();
44
45 colorSample.style.backgroundColor =
46 colorRGB.innerText;
47 displayRecordNumber();
48 }
49 // -->

 2004 Prentice Hall, Inc.


All rights reserved.
50 </script>
51 </head> Outline
52
53 <body onload = "reNumber()" onclick = "forward()">
54 introdatabind.html
55 <h1>XHTML Color Table</h1> (3 of 4)
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

 2004 Prentice Hall, Inc.


All rights reserved.
75 </body>
76 </html>
Outline

introdatabind.html
(4 of 4)

 2004 Prentice Hall, Inc.


All rights reserved.
16.3 Moving within a Recordset

• Moving through a recordset using JavaScript


(Fig. 16.3)

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig 16.3: moving.html --> moving.html
6 <!-- Moving through a recordset --> (1 of 5)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Dynamic Recordset Viewing</title>
11 <object id = "Colors"
12 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
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
20 <script type = "text/javascript">
21 <!--
22 var recordSet = Colors.recordset;
23
24 function update()
25 {

 2004 Prentice Hall, Inc.


All rights reserved.
26 h1Title.style.color = colorRGB.innerText;
27 } Outline
28
29 function move( whereTo )
30 { moving.html
31 switch ( whereTo ) { (2 of 5)
32
33 case "first":
34 recordSet.MoveFirst();
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

 2004 Prentice Hall, Inc.


All rights reserved.
49 // If recordset is at end, move to beginning.
50 case "next": Outline
51
52 recordSet.MoveNext();
53 moving.html
54 if ( recordSet.EOF ) (3 of 5)
55 recordSet.MoveFirst();
56
57 update();
58 break;
59
60 case "last":
61 recordSet.MoveLast();
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>

 2004 Prentice Hall, Inc.


All rights reserved.
75
76 <body style = "background-color: darkkhaki"> Outline
77
78 <h1 style = "color: black" id = "h1Title">
79 XHTML Color Table</h1> moving.html
80 <span style = "position: absolute; left: 200; width: 270; (4 of 5)
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

 2004 Prentice Hall, Inc.


All rights reserved.
99 <input type = "button" value = "Next"
100 onclick = "move( 'next' );" /> Outline
101
102 <input type = "button" value = "Last"
103 onclick = "move( 'last' );" /> moving.html
104 </span> (5 of 5)
105
106 </body>
107 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
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

 2004 Prentice Hall, Inc. All rights reserved.


1 image
2 numbers/0.gif Outline
3 numbers/1.gif
4 numbers/2.gif
5 numbers/3.gif images.txt
6 numbers/4.gif (1 of 1)
7 numbers/5.gif
8 numbers/6.gif
9 numbers/7.gif
10 numbers/8.gif
11 numbers/9.gif

 2004 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 16.5: bindimg.html --> binding.html
6 <!-- Binding data to an image --> (1 of 3)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Binding to a img</title>
11
12 <object id = "Images"
13 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
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

 2004 Prentice Hall, Inc.


All rights reserved.
26 case "first":
27 recordSet.MoveFirst(); Outline
28 break;
29
30 case "previous": binding.html
31 (2 of 3)
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 )
44 recordSet.MoveFirst();
45
46 break;
47
48 case "last":
49 recordSet.MoveLast();
50 break;

 2004 Prentice Hall, Inc.


All rights reserved.
51 }
52 } Outline
53 // -->
54 </script>
55 </head> binding.html
56 (3 of 3)
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>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
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

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 16.6: tablebind.html --> tablebind.html
6 <!-- Using Data Binding with tables --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Data Binding and Tables</title>
11 <object id = "Colors"
12 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
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;

 2004 Prentice Hall, Inc.


All rights reserved.
26 border-color: darkseagreen;
27 background-color: lightcyan"> Outline
28
29 <thead>
30 <tr style = "background-color: mediumslateblue"> tablebind.html
31 <th>Color Name</th> (2 of 2)
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>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
16.6 Sorting table Data

• Manipulate a large data source


– Need to sort data
• Can be accomplished by the Sort property of the TDC

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 16.7: sorting.html --> sorting.html
6 <!-- Sorting table data --> (1 of 3)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Data Binding and Tables</title>
11 <object id = "Colors"
12 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
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>Sorting Data</h1>
24
25 <table datasrc = "#Colors" style = "border-style: ridge;

 2004 Prentice Hall, Inc.


All rights reserved.
26 border-color: darkseagreen;
27 background-color: lightcyan"> Outline
28 <caption>
29 Sort by:
30 sorting.html
31 <select onchange = "Colors.Sort = this.value; (2 of 3)
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

 2004 Prentice Hall, Inc.


All rights reserved.
51 <tbody>
52 <tr style = "background-color: lightsteelblue"> Outline
53 <td><span datafld = "ColorName"></span></td>
54 <td><span datafld = "ColorHexRGBValue"
55 style = "font-family: monospace"></span></td> sorting.html
56 </tr> (3 of 3)
57 </tbody>
58
59 </table>
60
61 </body>
62 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
16.7 Advanced Sorting and Filtering

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

 2004 Prentice Hall, Inc. All rights reserved.


1 @Title:String@|@Authors:String@|@Copyright:String@|
2 @Edition:String@|@Type:String@ Outline
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@ DBPublications.txt
6 @C++ How to Program@|@Deitel,Deitel@|@1998@|@2@|@BK@ (1 of 1)
7 @Java How to Program@|@Deitel,Deitel@|@1997@|@1@|@BK@
8 @Java How to Program@|@Deitel,Deitel@|@1998@|@2@|@BK@
9 @Java How to Program@|@Deitel,Deitel@|@2000@|@3@|@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@
20 @The Complete Java Training Course@|@Deitel,Deitel@|@1998@|
21 @2@|@BKMMCD@
22 @The Complete Java Training Course@|@Deitel,Deitel@|@2000@|
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@

 2004 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 16.9: advancedsort.html --> advancesort.html
6 <!-- Sorting and filtering data --> (1 of 7)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Data Binding - Sorting and Filtering</title>
11
12 <object id = "Publications"
13 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
14 <param name = "DataURL" value = "DBPublications.txt" />
15 <param name = "UseHeader" value = "TRUE" />
16 <param name = "TextQualifier" value = "@" />
17 <param name = "FieldDelim" value = "|" />
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;

 2004 Prentice Hall, Inc.


All rights reserved.
26 color: blue }
27
Outline
28 caption { cursor: hand; }
29
30 span { cursor: hand; } advancesort.html
31 (2 of 7)
32 </style>
33
34 <script type = "text/javascript">
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;

 2004 Prentice Hall, Inc.


All rights reserved.
51 Publications.Reset();
52 } Outline
53
54 spanSort.innerText = "Current sort: " +
55 Publications.Sort; advancesort.html
56 } (3 of 7)
57
58 function filter( filterText, filterColumn )
59 {
60 Publications.Filter = filterColumn + "=" +
61 filterText;
62 Publications.Reset();
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";
73 Publications.Reset();
74 }
75 // -->

 2004 Prentice Hall, Inc.


All rights reserved.
76 </script>
77 </head>
Outline
78
79 <body>
80 <h1>Advanced Sorting</h1> advancesort.html
81 <p>Click the link next to a column head to sort by that (4 of 7)
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

 2004 Prentice Hall, Inc.


All rights reserved.
100 <thead>
101 <tr> Outline
102 <th>Title <br />
103 (<a onclick = "reSort( 'Title', true )">
104 Ascending</a> advancesort.html
105 <a onclick = "reSort( 'Title', false )"> (5 of 7)
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

 2004 Prentice Hall, Inc.


All rights reserved.
123 <th>Edition <br />
124 (<a onclick = "reSort( 'Edition', true )"> Outline
125 Ascending</a>
126 <a onclick = "reSort( 'Edition', false )">
127 Descending</a>) advancesort.html
128 </th> (6 of 7)
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

 2004 Prentice Hall, Inc.


All rights reserved.
148 <td><span datafld = "Copyright" onclick =
149 "filter( this.innerText, 'Copyright' )"></span> Outline
150 </td>
151
152 <td><span datafld = "Edition" onclick = advancesort.html
153 "filter( this.innerText, 'Edition' )"></span> (7 of 7)
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>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
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.

 2004 Prentice Hall, Inc. All rights reserved.


16.8 Data Binding Elements

Element 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.

 2004 Prentice Hall, Inc. All rights reserved.

You might also like