data binding with tabular data control
TRANSCRIPT
-
7/30/2019 Data Binding With Tabular Data Control
1/45
2004 Prentice Hall, Inc. All rights reserved.
Dynamic HTML: Data Binding with
Tabular Data Control
Outline16.1 Introduction
16.2 Simple Data Binding
16.3 Moving within a Recordset
16.4 Binding to an img
16.5 Binding to a table16.6 Sorting table Data16.7 Advanced Sorting and Filtering
16.8 Data Binding Elements
16.9 Web Resources
-
7/30/2019 Data Binding With Tabular Data Control
2/45
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.
-
7/30/2019 Data Binding With Tabular Data Control
3/45
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)
-
7/30/2019 Data Binding With Tabular Data Control
4/45
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
-
7/30/2019 Data Binding With Tabular Data Control
5/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
HTMLStandardColors
.txt
(1 of 1)
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@
-
7/30/2019 Data Binding With Tabular Data Control
6/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
introdatabind.html
(1 of 4)
1
2
4
5
6
7
8
9
10 Intro to Data Binding
11
12
13
14 15
16
18
20
21
22
23
24
25 i j i
-
7/30/2019 Data Binding With Tabular Data Control
7/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
introdatabind.html
(2 of 4)
25
26
50 / i
-
7/30/2019 Data Binding With Tabular Data Control
8/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
introdatabind.html
(3 of 4)
50
51
52
53
54
55 XHTML Color Table
56 Click anywhere in the browser window
57 to move forward in the recordset.
58
Color Name:
59
61
62 Color RGB Value:
63
65
66
67 Currently viewing record number
68
69
70
71 Color Sample
73
74
75 /b d
-
7/30/2019 Data Binding With Tabular Data Control
9/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
introdatabind.html
(4 of 4)
75
76
-
7/30/2019 Data Binding With Tabular Data Control
10/45 2004 Prentice Hall, Inc. All rights reserved.
16.3 Moving within a Recordset
Moving through a recordset using JavaScript(Fig. 16.3)
1 ? l i "1 0"?
-
7/30/2019 Data Binding With Tabular Data Control
11/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
moving.html
(1 of 5)
1
2
4
5
6
7
8
9
10 Dynamic Recordset Viewing
11
13 15
16
17
18
19
20
21
-
7/30/2019 Data Binding With Tabular Data Control
12/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
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 // If recordset is at end move to beginning
-
7/30/2019 Data Binding With Tabular Data Control
13/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
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
68
69 70 input { background-color:khaki;
71 color:green;
72 font-weight:bold }
73
74
-
7/30/2019 Data Binding With Tabular Data Control
14/45
99
-
7/30/2019 Data Binding With Tabular Data Control
15/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
moving.html
(5 of 5)
99
101
102
104
105
106
107
-
7/30/2019 Data Binding With Tabular Data Control
16/45 2004 Prentice Hall, Inc. All rights reserved.
-
7/30/2019 Data Binding With Tabular Data Control
17/45 2004 Prentice Hall, Inc. All rights reserved.
16.4 Binding to an img
Many different types of XHTML elements can bebound to data sources Binding to an img element
Changing the recordset updates the src attribute of the image
1 image
-
7/30/2019 Data Binding With Tabular Data Control
18/45
2004 Prentice Hall, Inc.
All rights reserved.
Outline
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
1
-
7/30/2019 Data Binding With Tabular Data Control
19/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
binding.html
(1 of 3)
2
4
5
6
7
8
9
10 Binding to a img
11
12
14
15
16
17
18
19
-
7/30/2019 Data Binding With Tabular Data Control
20/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
binding.html
(2 of 3)
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
39case"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;
51 }
-
7/30/2019 Data Binding With Tabular Data Control
21/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
binding.html
(3 of 3)
}
52 }
53 // -->
54
55
56
57
58
59
61
62
64
65
67
68
70
71
73
74
75
-
7/30/2019 Data Binding With Tabular Data Control
22/45 2004 Prentice Hall, Inc. All rights reserved.
-
7/30/2019 Data Binding With Tabular Data Control
23/45
2004 Prentice Hall, Inc. All rights reserved.
16.5 Binding to a table
Binding data to a table is perhaps the mostimportant of data binding Different from the data binding weve seen
1
-
7/30/2019 Data Binding With Tabular Data Control
24/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
tablebind.html
(1 of 2)
2
4
5
6
7
8
9
10 Data Binding and Tables
11
13 15
16
17
18
19
20
21 22
23 Binding Data to a table
24
25
-
7/30/2019 Data Binding With Tabular Data Control
25/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
tablebind.html
(2 of 2)
27 background-color: lightcyan">
28
29
30
31 Color Name
32 Color RGB Value
33
34
35
36
37
38
39
41
42
43
44
45
46 47
-
7/30/2019 Data Binding With Tabular Data Control
26/45
2004 Prentice Hall, Inc. All rights reserved.
-
7/30/2019 Data Binding With Tabular Data Control
27/45
2004 Prentice Hall, Inc. All rights reserved.
16.6 Sorting table Data
Manipulate a large data sourceNeed to sort data Can be accomplished by the Sort property of the TDC
1
-
7/30/2019 Data Binding With Tabular Data Control
28/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
sorting.html
(1 of 3)
2
4
5
6
7
8
9
10 Data Binding and Tables
11
13 15
16
17
18
19
20
21
22
23 Sorting Data
24
25
-
7/30/2019 Data Binding With Tabular Data Control
29/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
sorting.html
(2 of 3)
27 background-color: lightcyan">
28
29 Sort by:
30
31
33 Color Name (Ascending)
34
35 Color Name (Descending)
36
37 Color RGB Value
38 (Ascending)
39
Color RGB Value40 (Descending)
41
42
43
44
45
46 Color Name47 Color RGB Value
48
49
50
51
-
7/30/2019 Data Binding With Tabular Data Control
30/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
sorting.html
(3 of 3)
52
53
54
56
57
58
59
60
61
62
-
7/30/2019 Data Binding With Tabular Data Control
31/45
2004 Prentice Hall, Inc. All rights reserved.
-
7/30/2019 Data Binding With Tabular Data Control
32/45
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
1 @Title:String@|@Authors:String@|@Copyright:String@|
-
7/30/2019 Data Binding With Tabular Data Control
33/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
DBPublications.txt
(1 of 1)
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@
O tli
1
2
-
7/30/2019 Data Binding With Tabular Data Control
34/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
advancesort.html
(1 of 7)
2
4
5
6
7
8
9
10 Data Binding - Sorting and Filtering
11
12
14
15
16
17
18
19
20
21
22
23 a { font-size:9pt;
24 text-decoration:underline;
25 cursor:hand;
O tli
26 color:blue }27
-
7/30/2019 Data Binding With Tabular Data Control
35/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
advancesort.html
(2 of 7)
27
28 caption { cursor:hand; }
29
30 span { cursor:hand; }
31
32
33
34
35
-
7/30/2019 Data Binding With Tabular Data Control
36/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
advancesort.html
(3 of 7)
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";
71Publications.Filter = " ";
72 spanFilter.innerText = "Current filter: None";
73 Publications.Reset();
74 }
75 // -->
O tli
76 77
-
7/30/2019 Data Binding With Tabular Data Control
37/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
advancesort.html
(4 of 7)
77
78
79
80 Advanced Sorting
81
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.
86
87
90
91
93 Current filter: None
95
96 Current sort: None
98
99
O tli
100 101
-
7/30/2019 Data Binding With Tabular Data Control
38/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
advancesort.html
(5 of 7)
101
102 Title
103 (
104 Ascending
105
106 Descending)
107
108
109 Authors
110 (
111 Ascending
112
113 Descending)
114
115
116 Copyright
117 (
118 Ascending
119
120Descending)
121
122
O tline
123 Edition
124 ( -
7/30/2019 Data Binding With Tabular Data Control
39/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
advancesort.html
(6 of 7)
124 (
125 Ascending
126
127 Descending)
128
129
130 Type
131 (
132 Ascending
133
134 Descending)
135
136
137
138
139
140
142
143
144
146
147
Outline
148
-
7/30/2019 Data Binding With Tabular Data Control
40/45
2004 Prentice Hall, Inc.All rights reserved.
Outline
advancesort.html
(7 of 7)
149 filter( this.innerText, Copyright ) >
150
151
152
154
155
156
158
159
160
161
162
163
164
165
-
7/30/2019 Data Binding With Tabular Data Control
41/45
2004 Prentice Hall, Inc. All rights reserved.
-
7/30/2019 Data Binding With Tabular Data Control
42/45
2004 Prentice Hall, Inc. All rights reserved.
-
7/30/2019 Data Binding With Tabular Data Control
43/45
2004 Prentice Hall, Inc. All rights reserved.
-
7/30/2019 Data Binding With Tabular Data Control
44/45
2004 Prentice Hall, Inc. All rights reserved.
16.8 Data Binding Elements
Exactly how a data source is displayed by thebrowser depends on the XHTML element to
which the data is bound Different elements may use the data for different purposes.
-
7/30/2019 Data Binding With Tabular Data Control
45/45
16.8 Data Binding Elements
Element Bindable Property/Attribute
a href
div Contained text
frame hrefiframe hrefimg src
input type = "button" value (button text)
input type = "checkbox" checked (use a boolean value in the data)input type = "hidden" valueinput type = "password" valueinput type = "radio" checked (use a boolean value in the data)
input type = "text" valuemarquee Contained text
param valueselect Selected optionspan Contained text
table Cell elements (see Section 16.6)
textarea Contained text (value)
Fig. 16.10 XHTML elements that allow data binding.