Scribd
Upload
632 views

Dynamic HTML: Data Binding With Tabular Data Control: Outline

Uploaded by

rajalaxmi11
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
632 views

Dynamic HTML: Data Binding With Tabular Data Control: Outline

Uploaded by

rajalaxmi11
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 45

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
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.html
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.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.html
25 <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.html
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>
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
49
moving.html(3 of 5)
// 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
26
(2 of 3)
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.txt
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@
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.html
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.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;
advancesort.html
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
51 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.html
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
advancesort.html
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
advancesort.html
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
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.

You might also like