data binding with tabular data control

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


2/45


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.


3/45


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)


4/45


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


6/45



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/45



Outline

introdatabind.html

(2 of 4)

25

26

50 / i


8/45



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


9/45



Outline

introdatabind.html

(4 of 4)

75

76


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"?


11/45



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


12/45



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


13/45



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 )


56

57 update();

58 break;

59

60 case"last":


62

update();63 break;

64 }

65 }

66 // -->

67

68

69 70 input { background-color:khaki;

71 color:green;

72 font-weight:bold }

73

74


14/45

99


15/45



Outline

moving.html

(5 of 5)

99

101

102

104

105

106

107



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


18/45



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


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


20/45


Outline

binding.html

(2 of 3)

case first :


28 break;

29

30 case"previous":

31

32 recordSet.MovePrevious();

33

34 if ( recordSet.BOF )


36

37 break;

38

39case"next":

40

41 recordSet.MoveNext();

42

43 if ( recordSet.EOF )


45

46 break;47

48 case"last":


50 break;

51 }


21/45


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


23/45


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


24/45


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


25/45


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


26/45



27/45


16.6 Sorting table Data

Manipulate a large data sourceNeed to sort data Can be accomplished by the Sort property of the TDC

1


28/45


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


29/45


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


30/45


Outline

sorting.html

(3 of 3)

52

53

54

56

57

58

59

60

61

62


31/45



32/45


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@|


33/45


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@



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@


21 @2@|@BKMMCD@


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


34/45


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


35/45


Outline

advancesort.html

(2 of 7)

27

28 caption { cursor:hand; }

29

30 span { cursor:hand; }

31

32

33

34

35


36/45


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


37/45


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


38/45


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 (


39/45


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


40/45


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


41/45



42/45



43/45



44/45



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.


45/45


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.

data binding with tabular data control

Documents