Embed Size (px)
Citation preview
Dynamic HTML: Data Binding with Tabular Data Control
Outline16.1 Introduction16.2 Simple Data Binding16.3 Moving within a Recordset16.4 Binding to an img16.5 Binding to a table16.6 Sorting table Data16.7 Advanced Sorting and Filtering16.8 Data Binding Elements
Objectives
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.
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
HTMLStandardColors.txt
1 @ColorName@|@ColorHexRGBValue@
2 @aqua@|@#00FFFF@
3 @black@|@#000000@
4 @blue@|@#0000FF@
5 @fuchsia@|@#FF00FF@
6 @gray@|@#808080@
7 @green@|@#008000@
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@
introdatabind.html1 <?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 <!-- Fig 16.2: introdatabind.html -->
6 <!-- Simple data binding and recordset manipulation -->
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
introdatabind.html25 <script type = "text/javascript">
26 <!--
27 var recordSet = Colors.recordset;
28
29 function reNumber()
30 {
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 reNumber();
48 }
49 // -->
introdatabind.html50 </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>
introdatabind.html
16.3 Moving within a Recordset
• Moving through a recordset using JavaScript (Fig. 16.3)
moving.html(1 of 5)1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig 16.3: moving.html -->
6 <!-- Moving through a recordset -->
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 {
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":
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
moving.html(3 of 5)49 // If recordset is at end, move to beginning.
50 case "next":
51
52 recordSet.MoveNext();
53
54 if ( recordSet.EOF )
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>
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
images.txt
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)1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 16.5: bindimg.html -->
6 <!-- Binding data to an image -->
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
binding.html(2 of 3)26 case "first":
27 recordSet.MoveFirst();
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 )
44 recordSet.MoveFirst();
45
46 break;
47
48 case "last":
49 recordSet.MoveLast();
50 break;
binding.html(3 of 3)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
tablebind.html(1 of 2)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 <!-- Fig. 16.6: tablebind.html -->
6 <!-- Using Data Binding with tables -->
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;
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
sorting.html(1 of 3)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 <!-- Fig 16.7: sorting.html -->
6 <!-- Sorting table data -->
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;
sorting.html(2 of 3)
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
sorting.html(3 of 3)
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.txt1 @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@
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@
advancesort.html1 <?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 <!-- Fig 16.9: advancedsort.html -->
6 <!-- Sorting and filtering data -->
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;
26 color: blue }
27
28 caption { cursor: hand; }
29
30 span { cursor: hand; }
31
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;
advancesort.html
advancesort.html51 Publications.Reset();
52 }
53
54 spanSort.innerText = "Current sort: " +
55 Publications.Sort;
56 }
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 // -->
advancesort.html76 </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
advancesort.html100 <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
advancesort.html123 <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
advancesort.html
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 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.
