Data Binding With Tabular Data Control

Dynamic HTML: Data Binding with Tabular Data Control
Outline
16.1 16.2 16.3 16.4 16.5 16.6 16.7 16.8 16.9 Introduction Simple Data Binding Moving within a Recordset Binding to an img Binding to a table Sorting table Data Advanced Sorting and Filtering Data Binding Elements Web Resources
2004 Prentice Hall, Inc. All rights reserved.
Objectives In this lesson, you will learn:

To understand Dynamic HTMLs 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.
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)
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
1 2 3 4 5 6 7 8 9
@ColorName@|@ColorHexRGBValue@ @aqua@|@#00FFFF@ @black@|@#000000@ @blue@|@#0000FF@ @fuchsia@|@#FF00FF@ @gray@|@#808080@ @green@|@#008000@ @lime@|@#00FF00@ @maroon@|@#800000@
Outline
HTMLStandardColors .txt
(1 of 1)
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 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   --> --> --> 
Outline
introdatabind.html (1 of 4)
11 12 13 14 15 16 17 18 19 20 21 22 23 24

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
<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(); } // -->
Outline

50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
</script> </head> <body onload = "reNumber()" onclick = "forward()"> <h1>XHTML Color Table</h1> <h3>Click anywhere in the browser window to move forward in the recordset.</h3> <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>
Outline

75
</body>
76 </html>
Outline

16.3 Moving within a Recordset Moving through a recordset using JavaScript (Fig. 16.3)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Outline
moving.html (1 of 5)
19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 }
h1Title.style.color = colorRGB.innerText;
Outline
function move( whereTo ) { switch ( whereTo ) { case "first": recordSet.MoveFirst(); update(); break; // If recordset is at beginning, move to end. case "previous": recordSet.MovePrevious(); if ( recordSet.BOF ) recordSet.MoveLast(); update(); break;

49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 </style> </head> } }
// If recordset is at end, move to beginning. case "next": recordSet.MoveNext(); if ( recordSet.EOF ) recordSet.MoveFirst(); update(); break; case "last": recordSet.MoveLast(); update(); break;
Outline
// --> </script> <style type = "text/css"> input { background-color: khaki; color: green; font-weight: bold }

75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 <input type = "button" value = "Previous" onclick = "move( 'previous' );" /> <input type = "button" value = "First" onclick = "move( 'first' );" /> <strong>Color RGB Value: </strong> <span id = "colorRGB" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC </span><br /> <h1 style = "color: black" id = "h1Title"> XHTML Color Table</h1> <span style = "position: absolute; left: 200; width: 270; border-style: groove; text-align: center; background-color: cornsilk; padding: 10"> <strong>Color Name: </strong> <span id = "colorName" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorName">ABC</span> <br /> <body style = "background-color: darkkhaki">
Outline

99 100 101 102 103 104 105 106
<input type = "button" value = "Next" onclick = "move( 'next' );" /> <input type = "button" value = "Last" onclick = "move( 'last' );" /> </span> </body>
Outline
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
1 2 3 4 5 6 7 8 9
image numbers/0.gif numbers/1.gif numbers/2.gif numbers/3.gif numbers/4.gif numbers/5.gif numbers/6.gif numbers/7.gif
Outline
images.txt (1 of 1)
10 numbers/8.gif 11 numbers/9.gif

1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Outline
binding.html (1 of 3)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
case "first": recordSet.MoveFirst(); break; case "previous": recordSet.MovePrevious(); if ( recordSet.BOF ) recordSet.MoveLast(); break; case "next": recordSet.MoveNext(); if ( recordSet.EOF ) recordSet.MoveFirst(); break; case "last": recordSet.MoveLast(); break;
Outline

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 </body> 75 </html> <body> }
} // --> </script> </head>
Outline
<img datasrc = "#Images" datafld = "image" alt = "Image" style = "position: relative; left: 45px" /><br /> <input type = "button" value = "First" onclick = "move( 'first' );" /> <input type = "button" value = "Previous" onclick = "move( 'previous' );" /> <input type = "button" value = "Next" onclick = "move( 'next' );" /> <input type = "button" value = "Last" onclick = "move( 'last' );" />

16.5 Binding to a table Binding data to a table is perhaps the most important of data binding
Different from the data binding weve seen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
Outline
tablebind.html (1 of 2)
20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
border-color: darkseagreen; background-color: lightcyan"> <thead> <tr style = "background-color: mediumslateblue"> <th>Color Name</th> <th>Color RGB Value</th> </tr> </thead> <tbody> <tr style = "background-color: lightsteelblue"> <td><span datafld = "ColorName"></span></td> <td><span datafld = "ColorHexRGBValue" style = "font-family: monospace"></span></td> </tr> </tbody> </table> </body>
Outline
tablebind.html (2 of 2)
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
Outline
sorting.html (1 of 3)
20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
border-color: darkseagreen; background-color: lightcyan"> <caption> Sort by: <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> </caption> <thead> <tr style = "background-color: mediumslateblue"> <th>Color Name</th> <th>Color RGB Value</th> </tr> </thead>
Outline

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

16.7 Advanced Sorting and Filtering Filtering

Selecting data that meets a specific criteria Combined with TDC provides powerful data rendering
1 2 3 4 5 6 7 8 9
@Title:String@|@Authors:String@|@Copyright:String@| @Edition:String@|@Type:String@ @C How to Program@|@Deitel,Deitel@|@1992@|@1@|@BK@ @C How to Program@|@Deitel,Deitel@|@1994@|@2@|@BK@ @C++ How to Program@|@Deitel,Deitel@|@1994@|@1@|@BK@ @C++ How to Program@|@Deitel,Deitel@|@1998@|@2@|@BK@ @Java How to Program@|@Deitel,Deitel@|@1997@|@1@|@BK@ @Java How to Program@|@Deitel,Deitel@|@1998@|@2@|@BK@ @Java How to Program@|@Deitel,Deitel@|@2000@|@3@|@BK@
Outline
DBPublications.txt (1 of 1)
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@

1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
Outline
advancesort.html (1 of 7)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 } else { </style> span
color: blue } caption { cursor: hand; } { cursor: hand; }
Outline
<script type = "text/javascript"> <!-var sortOrder; function reSort( column, order ) { if ( order ) sortOrder = ""; else sortOrder = "-"; if ( event.ctrlKey ) { Publications.Sort += "; " + sortOrder + column; Publications.Reset();
Publications.Sort = sortOrder + column;

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 } } } }
Publications.Reset();
Outline
Publications.Sort;
spanSort.innerText = "Current sort: " +
function filter( filterText, filterColumn ) { Publications.Filter = filterColumn + "=" + filterText; Publications.Reset(); spanFilter.innerText = "Current filter: " + Publications.Filter;
function clearAll() { Publications.Sort = " "; spanSort.innerText = "Current sort: None"; Publications.Filter = " "; spanFilter.innerText = "Current filter: None"; Publications.Reset(); // -->

76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
</script> </head> <body> <h1>Advanced Sorting</h1> <p>Click the link next to a column head to sort by that column. To sort by more than one column at a time, hold down Ctrl while you click another sorting link. Click any cell to filter by the data of that cell. To clear filters and sorts, click the green caption bar.</p> <table datasrc = "#Publications" border = "1" cellspacing = "0" cellpadding = "2" style = "background-color: papayawhip;"> <caption style = "background-color: lightgreen; padding: 5" onclick = "clearAll()"> <span id = "spanFilter" style = "font-weight: bold; background-color: lavender">Current filter: None </span> <span id = "spanSort" style = "font-weight: bold; background-color: khaki">Current sort: None</span> </caption>
Outline

100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
<thead> <tr> <th>Title <br /> (<a onclick = "reSort( 'Title', true )"> Ascending</a> <a onclick = "reSort( 'Title', false )"> Descending</a>) </th> <th>Authors <br /> (<a onclick = "reSort( 'Authors', true )"> Ascending</a> <a onclick = "reSort( 'Authors', false )"> Descending</a>) </th> <th>Copyright <br /> (<a onclick = "reSort( 'Copyright', true )"> Ascending</a> <a onclick = "reSort( 'Copyright', false )"> Descending</a>) </th>
Outline

123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
<th>Edition <br /> (<a onclick = "reSort( 'Edition', true )"> Ascending</a> <a onclick = "reSort( 'Edition', false )"> Descending</a>) </th> <th>Type <br /> (<a onclick = "reSort( 'Type', true )"> Ascending</a> <a onclick = "reSort( 'Type', false )"> Descending</a>) </th> </tr> </thead> <tr> <td><span datafld = "Title" onclick = "filter( this.innerText, 'Title' )"></span> </td> <td><span datafld = "Authors" onclick = "filter( this.innerText, 'Authors')"></span> </td>
Outline

148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 </body> 165 </html>
<td><span datafld = "Copyright" onclick = "filter( this.innerText, 'Copyright' )"></span> </td> <td><span datafld = "Edition" onclick = "filter( this.innerText, 'Edition' )"></span> </td> <td><span datafld = "Type" onclick = "filter( this.innerText, 'Type' )"></span> </td> </tr> </table>
Outline

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 Elements

Element
a div frame iframe img input type input type input type input type input type
Bindable Property/Attribute
href Contained text href href src value (button text) checked (use a boolean value in the data) value value checked (use a boolean value in the data) value Contained text value Selected option Contained text Cell elements (see Section 16.6) Contained text (value)
= = = = =
"button" "checkbox" "hidden" "password" "radio"
input type = "text" marquee param select span table textarea
Fig. 16.10
XHTML elements that allow data binding.

Data Binding With Tabular Data Control

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Data Binding With Tabular Data Control

Uploaded by

Copyright:

Available Formats

Dynamic HTML: Data Binding with Tabular Data Control

2004 Prentice Hall, Inc. All rights reserved.

Objectives In this lesson, you will learn:

2004 Prentice Hall, Inc. All rights reserved.

16.1 Introduction Data binding

Data Source Objects (DSOs)

2004 Prentice Hall, Inc. All rights reserved.

16.2 Simple Data Binding Data file

2004 Prentice Hall, Inc. All rights reserved.

@ColorName@|@ColorHexRGBValue@ @aqua@|@#00FFFF@ @black@|@#000000@ @blue@|@#0000FF@ @fuchsia@|@#FF00FF@ @gray@|@#808080@ @green@|@#008000@ @lime@|@#00FF00@ @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.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

99 100 101 102 103 104 105 106

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

image numbers/0.gif numbers/1.gif numbers/2.gif numbers/3.gif numbers/4.gif numbers/5.gif numbers/6.gif numbers/7.gif

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 </body> 75 </html> <body> }

} // --> </script> </head>

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

16.6 Sorting table Data Manipulate a large data source

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

16.7 Advanced Sorting and Filtering Filtering

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 } else { </style> span

color: blue } caption { cursor: hand; } { cursor: hand; }

Publications.Sort = sortOrder + column;

2004 Prentice Hall, Inc.

spanSort.innerText = "Current sort: " +

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

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

"button" "checkbox" "hidden" "password" "radio"

input type = "text" marquee param select span table textarea