 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 16 - Dynamic HTML: Data Binding with Tabular Data Control Outline 16.1 Introduction 16.2 Simple.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 16 - Dynamic HTML: Data Binding with Tabular Data Control Outline 16.1 Introduction 16.2 Simple Data Binding 16.3 Moving 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 16.9 Internet and World Wide Web Resources

 2001 Prentice Hall, Inc. All rights reserved. Outline 3 Introdatabind.ht ml 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Intro to Data Binding 11 12 13 14 15 16 <object id = "Colors" 17 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> 18 <param name = "DataURL" value = 19 "HTMLStandardColors.txt" /> 20 21 22 23 24 25 26 <!-- 27 var recordSet = Colors.recordset; 28 29 function reNumber() 30 { 31 if ( !recordSet.EOF ) 32 recordNumber.innerText = 33 recordSet.absolutePosition; The param tag specifies parameters for the object in the object element. The classid attribute specifies the ActiveX control to add. The object element inserts the Tabular Data Control.

 2001 Prentice Hall, Inc. All rights reserved. Outline 4 Introdatabind.html 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 // --> 50 51 52 53 54 55 XHTML Color Table 56 Click to move forward in the recordset. 57 58 Color Name: 59 <span id = "colorId" style = "font-family: monospace" 60 datasrc = "#Colors" datafld = "ColorName"> 61 62 Color RGB Value: 63 <span id = "colorRGB" style = "font-family: monospace" 64 datasrc = "#Colors" datafld = "ColorHexRGBValue"> 65 66 The MoveNext method of the recordSet object is called to move the current recordset forward by one row. Line 42 determines if the end of file (EOF) is reached. The MoveFirst method will move to the first record in the file. The data in the Colors object is bound to a span element.

 2001 Prentice Hall, Inc. All rights reserved. Outline 5 Introdatabind.ht ml Program Output 67 Currently viewing record number 68 69 70 71 <span id = "colorSample" style = "background-color: aqua; 72 color: 888888; font-size: 30pt">Color Sample 73 74 75 76 The user will be able to click on the browser to scroll through the records in the Color recordset.

 2001 Prentice Hall, Inc. All rights reserved. Outline 7 Moving.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Dynamic Recordset Viewing 11 <object id = "Colors" 12 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> 13 <param name = "DataURL" value = 14 "HTMLStandardColors.txt" /> 15 16 17 18 19 20 21 <!-- 22 var recordSet = Colors.recordset; 23 24 function update() 25 { 26 h1Title.style.color = colorRGB.innerText; 27 } 28 29 function move( whereTo ) 30 { 31 switch ( whereTo ) { 32 Function update will update the color of the header text ( XHTML Color Table ) to the color of the current recordset being displayed. Function move will move to the first, last or next recordset.

 2001 Prentice Hall, Inc. All rights reserved. Outline 8 Moving.html 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. 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 The user will have the option to move to the first, previous, next or last record in the Colors recordset. Once the user selects which record to move to the function update will be called to update the header color. The BOF method works similarly to the EOF method except that it tests for the beginning of the file.

 2001 Prentice Hall, Inc. All rights reserved. Outline 9 Moving.html 68 69 70 input { background-color: khaki; 71 color: green; 72 font-weight: bold } 73 74 75 76 77 78 79 XHTML Color Table 80 <span style = "position: absolute; left: 200; width: 270; 81 border-style: groove; text-align: center; 82 background-color: cornsilk; padding: 10"> 83 Color Name: 84 <span id = "colorName" style = "font-family: monospace" 85 datasrc = "#Colors" datafld = "ColorName">ABC 86 87 88 Color RGB Value: 89 <span id = "colorRGB" style = "font-family: monospace" 90 datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC 91 92 93 <input type = "button" value = "First" 94 onclick = "move( 'first' );" /> 95 96 <input type = "button" value = "Previous" 97 onclick = "move( 'previous' );" /> 98 99 <input type = "button" value = "Next" 100 onclick = "move( 'next' );" /> 101 Lines 93-103 create buttons for each record choice: first, previous, next and last. Initially the header text color is black.

 2001 Prentice Hall, Inc. All rights reserved. Outline 10 Moving.html Program Output 102 <input type = "button" value = "Last" 103 onclick = "move( 'last' );" /> 104 105 106 107 Based on which button is selected the corresponding function to move to that record is invoked. The browser displays the first record initially before the user selects the next record to be viewed.

 2001 Prentice Hall, Inc. All rights reserved. Outline 11 Program Output Based on which record the user selects the color name, RGB value and text color of the header (XHTML Color Table) will be updated.

 2001 Prentice Hall, Inc. All rights reserved. Outline 12 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 Fig. 16.4images.txt data source file for Fig. 16.5.

 2001 Prentice Hall, Inc. All rights reserved. Outline 13 Binding.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Binding to a img 11 12 <object id = "Images" 13 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> 14 15 16 17 18 19 <!-- 20 recordSet = Images.recordset; 21 22 function move( whereTo ) 23 { 24 switch( whereTo ) { 25 26 case "first": 27 recordSet.MoveFirst(); 28 break; 29 30 case "previous": 31 32 recordSet.MovePrevious(); 33 34 if ( recordSet.BOF ) 35 recordSet.MoveLast(); The recordset used for this example is a set of images. Similar to the last example, the user will be able to select: the first, last, previous or last record for viewing.

 2001 Prentice Hall, Inc. All rights reserved. Outline 14 Binding.html 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; 51 } 52 } 53 // --> 54 55 56 57 58 59 <img datasrc = "#Images" datafld = "image" alt = "Image" 60 style = "position: relative; left: 45px" /> 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 Binding to an image will automatically update the image when the user selects a new image to view.

 2001 Prentice Hall, Inc. All rights reserved. Outline 15 Binding.html Program Output 71 <input type = "button" value = "Last" 72 onclick = "move( 'last' );" /> 73 74 75 The image is automatically updated (browser on right) as the user selects a new image to view.

 2001 Prentice Hall, Inc. All rights reserved. Outline 16 Tablebind.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Data Binding and Tables 11 <object id = "Colors" 12 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> 13 <param name = "DataURL" value = 14 "HTMLStandardColors.txt" /> 15 16 17 18 19 20 21 22 23 Binding Data to a table 24 25 <table datasrc = "#Colors" style = "border-style: ridge; 26 border-color: darkseagreen; 27 background-color: lightcyan"> 28 29 30 31 Color Name 32 Color RGB Value 33 34 35 Lines 25–27 begin binding the table by adding the datasrc attribute to the opening table tag.

 2001 Prentice Hall, Inc. All rights reserved. Outline 17 Tablebind.html 36 37 38 39 <span datafld = "ColorHexRGBValue" 40 style = "font-family: monospace"> 41 42 43 44 45 46 47 The data binding is finished in lines 38–40 by adding the datafld attribute to span tags that reside in the table cells.

 2001 Prentice Hall, Inc. All rights reserved. Outline 19 Sorting.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Data Binding and Tables 11 <object id = "Colors" 12 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> 13 <param name = "DataURL" value = 14 "HTMLStandardColors.txt" /> 15 16 17 18 19 20 21 22 23 Sorting Data 24 25 <table datasrc = "#Colors" style = "border-style: ridge; 26 border-color: darkseagreen; 27 background-color: lightcyan"> 28 29 Sort by: 30 31 <select onchange = "Colors.Sort = this.value; 32 Colors.Reset();"> 33 Color Name (Ascending) 34 This example sets property Sort to the value of the selected option tag ( this.value ) when the onchange event is fired. After setting the Sort property, we invoke the Reset method of the TDC to display our data in its new sort order.

 2001 Prentice Hall, Inc. All rights reserved. Outline 20 Sorting.html 35 Color Name (Descending) 36 37 Color RGB Value 38 (Ascending) 39 Color RGB Value 40 (Descending) 41 42 43 44 45 46 Color Name 47 Color RGB Value 48 49 50 51 52 53 54 <span datafld = "ColorHexRGBValue" 55 style = "font-family: monospace"> 56 57 58 59 60 61 62 By default, a column is sorted in ascending order. Lines 33–36 set the value attributes of the option tags to the column names in the data file. To sort in descending order, the column name is preceded with a minus sign ( - ).

 2001 Prentice Hall, Inc. All rights reserved. Outline 22 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@ Fig. 16.8DBPublications.txt data file for Fig. 16.9.

 2001 Prentice Hall, Inc. All rights reserved. Outline 23 Advancedsort.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Data Binding - Sorting and Filtering 11 12 <object id = "Publications" 13 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> 14 15 16 17 18 19 20 21 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 33 Line 18 sets the Sort property of the TDC using a param tag instead of scripting. Line 30 introduces the cursor CSS attribute, which specifies what the mouse cursor looks like when hovering over an object. The property is set to hand (the same hand that appears when you move your cursor over a link). This lets the user know that a span is clickable when the cursor is moved over it.

 2001 Prentice Hall, Inc. All rights reserved. Outline 24 Advancedsort.html 34 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; 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 The user can sort by multiple columns by holding Ctrl while clicking a link. Line 45 checks the boolean value event.ctrlKey, which returns true if Ctrl was pressed when the event was triggered. If the user did press Ctrl, line 46 adds another sort criterion to property Sort, separated from the first with a semicolon ( "; " ). Lines 60–61 set the Filter property to the column and text by which that column should be filtered. The Filter property filters out all records that do not have a cell matching the specified text.

 2001 Prentice Hall, Inc. All rights reserved. Outline 25 Advancedsort.html 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 // --> 76 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 <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 96 <span id = "spanSort" style = "font-weight: bold; 97 background-color: khaki">Current sort: None 98 99 Function clearAll will clear all filters when executed. Creates a green caption bar that will clear all filters on click.

 2001 Prentice Hall, Inc. All rights reserved. Outline 26 Advancedsort.html 100 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 120 Descending ) 121 122 123 Edition 124 ( 125 Ascending 126 127 Descending ) 128 129 130 Type 131 ( 132 Ascending 133 134 Descending ) Each column head has an associated onclick event that calls the reSort function. ReSort is passed the name of the column to sort and a boolean value that specifies the sort order ( true for ascending, false for descending).

 2001 Prentice Hall, Inc. All rights reserved. Outline 27 Advancedsort.html 135 136 137 138 139 140 <span datafld = "Title" onclick = 141 "filter( this.innerText, 'Title' )"> 142 143 144 <span datafld = "Authors" onclick = 145 "filter( this.innerText, 'Authors')"> 146 147 148 <span datafld = "Copyright" onclick = 149 "filter( this.innerText, 'Copyright' )"> 150 151 152 <span datafld = "Edition" onclick = 153 "filter( this.innerText, 'Edition' )"> 154 155 156 <span datafld = "Type" onclick = 157 "filter( this.innerText, 'Type' )"> 158 159 160 161 162 163 164 165 By clicking on a column head, the filter function will be called to filter according to the data in that column.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 16 - Dynamic HTML: Data Binding with Tabular Data Control Outline 16.1 Introduction 16.2 Simple.

Similar presentations

Presentation on theme: " 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 16 - Dynamic HTML: Data Binding with Tabular Data Control Outline 16.1 Introduction 16.2 Simple."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 16 - Dynamic HTML: Data Binding with Tabular Data Control Outline 16.1 Introduction 16.2 Simple.

Similar presentations

Presentation on theme: " 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 16 - Dynamic HTML: Data Binding with Tabular Data Control Outline 16.1 Introduction 16.2 Simple."— Presentation transcript:

Similar presentations

About project

Feedback