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 Fig. 16.1XHTML color table data (HTMLStandardColors.txt). Line 1 is a header row that specifies the names of the columns below.
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 " Intro to Data Binding <object id = "Colors" 17 classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> 18 <param name = "DataURL" value = 19 "HTMLStandardColors.txt" /> <!-- 27 var recordSet = Colors.recordset; 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 } function forward() 39 { 40 recordSet.MoveNext(); if ( recordSet.EOF ) 43 recordSet.MoveFirst(); colorSample.style.backgroundColor = 46 colorRGB.innerText; 47 reNumber(); 48 } 49 // --> XHTML Color Table 56 Click to move forward in the recordset Color Name: 59 <span id = "colorId" style = "font-family: monospace" 60 datasrc = "#Colors" datafld = "ColorName"> Color RGB Value: 63 <span id = "colorRGB" style = "font-family: monospace" 64 datasrc = "#Colors" datafld = "ColorHexRGBValue"> 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 <span id = "colorSample" style = "background-color: aqua; 72 color: ; font-size: 30pt">Color Sample 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 6 Program Output Clicking on the top browser will bring the user to the next record in the recordset as seen in the bottom browser.
2001 Prentice Hall, Inc. All rights reserved. Outline 7 Moving.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Dynamic Recordset Viewing 11 <object id = "Colors" 12 classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> 13 <param name = "DataURL" value = 14 "HTMLStandardColors.txt" /> <!-- 22 var recordSet = Colors.recordset; function update() 25 { 26 h1Title.style.color = colorRGB.innerText; 27 } 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; // If recordset is at beginning, move to end. 39 case "previous": recordSet.MovePrevious(); if ( recordSet.BOF ) 44 recordSet.MoveLast(); update(); 47 break; // If recordset is at end, move to beginning. 50 case "next": recordSet.MoveNext(); if ( recordSet.EOF ) 55 recordSet.MoveFirst(); update(); 58 break; 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 input { background-color: khaki; 71 color: green; 72 font-weight: bold } 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 Color RGB Value: 89 <span id = "colorRGB" style = "font-family: monospace" 90 datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC <input type = "button" value = "First" 94 onclick = "move( 'first' );" /> <input type = "button" value = "Previous" 97 onclick = "move( 'previous' );" /> <input type = "button" value = "Next" 100 onclick = "move( 'next' );" /> 101 Lines 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' );" /> 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
2001 Prentice Hall, Inc. All rights reserved. Outline 13 Binding.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Binding to a img <object id = "Images" 13 classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <!-- 20 recordSet = Images.recordset; function move( whereTo ) 23 { 24 switch( whereTo ) { case "first": 27 recordSet.MoveFirst(); 28 break; case "previous": recordSet.MovePrevious(); 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 break; case "next": recordSet.MoveNext(); if ( recordSet.EOF ) 44 recordSet.MoveFirst(); break; case "last": 49 recordSet.MoveLast(); 50 break; 51 } 52 } 53 // --> <img datasrc = "#Images" datafld = "image" alt = "Image" 60 style = "position: relative; left: 45px" /> <input type = "button" value = "First" 63 onclick = "move( 'first' );" /> <input type = "button" value = "Previous" 66 onclick = "move( 'previous' );" /> <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' );" /> 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 " Data Binding and Tables 11 <object id = "Colors" 12 classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> 13 <param name = "DataURL" value = 14 "HTMLStandardColors.txt" /> Binding Data to a table <table datasrc = "#Colors" style = "border-style: ridge; 26 border-color: darkseagreen; 27 background-color: lightcyan"> Color Name 32 Color RGB Value 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 <span datafld = "ColorHexRGBValue" 40 style = "font-family: monospace"> 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 18 Program Output Internet Explorer iterates through the data file, and creates a table row for each record it finds.
2001 Prentice Hall, Inc. All rights reserved. Outline 19 Sorting.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Data Binding and Tables 11 <object id = "Colors" 12 classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> 13 <param name = "DataURL" value = 14 "HTMLStandardColors.txt" /> Sorting Data <table datasrc = "#Colors" style = "border-style: ridge; 26 border-color: darkseagreen; 27 background-color: lightcyan"> Sort by: <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) Color RGB Value 38 (Ascending) 39 Color RGB Value 40 (Descending) Color Name 47 Color RGB Value <span datafld = "ColorHexRGBValue" 55 style = "font-family: monospace"> 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 21 Program Output The user selects a descending sort for the elements. The table updates to display the elements in this sorted order.
2001 Prentice Hall, Inc. All rights reserved. Outline How to How to How to How to How to How to How to Basic 6 How to 11 and World Wide Web How to 13 Complete C++ Training 15 Complete C++ Training 17 Complete Java Training 19 Complete Java Training 21 Complete Java Training 23 Complete Visual Basic 6 Training 25 Complete Internet and World Wide Web Programming Training Fig. 16.8DBPublications.txt data file for Fig
2001 Prentice Hall, Inc. All rights reserved. Outline 23 Advancedsort.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Data Binding - Sorting and Filtering <object id = "Publications" 13 classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> a { font-size: 9pt; 24 text-decoration: underline; 25 cursor: hand; 26 color: blue } caption { cursor: hand; } span { cursor: hand; } 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 <!-- 36 var sortOrder; function reSort( column, order ) 39 { 40 if ( order ) 41 sortOrder = ""; 42 else 43 sortOrder = "-"; if ( event.ctrlKey ) { 46 Publications.Sort += "; " + sortOrder + column; 47 Publications.Reset(); 48 } 49 else { 50 Publications.Sort = sortOrder + column; 51 Publications.Reset(); 52 } spanSort.innerText = "Current sort: " + 55 Publications.Sort; 56 } 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 // --> 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 <table datasrc = "#Publications" border = "1" 88 cellspacing = "0" cellpadding = "2" style = 89 "background-color: papayawhip;"> <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 <span id = "spanSort" style = "font-weight: bold; 97 background-color: khaki">Current sort: None 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 Title 103 ( 104 Ascending Descending ) Authors 110 ( 111 Ascending Descending ) Copyright 117 ( 118 Ascending Descending ) Edition 124 ( 125 Ascending Descending ) Type 131 ( 132 Ascending 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 <span datafld = "Title" onclick = 141 "filter( this.innerText, 'Title' )"> <span datafld = "Authors" onclick = 145 "filter( this.innerText, 'Authors')"> <span datafld = "Copyright" onclick = 149 "filter( this.innerText, 'Copyright' )"> <span datafld = "Edition" onclick = 153 "filter( this.innerText, 'Edition' )"> <span datafld = "Type" onclick = 157 "filter( this.innerText, 'Type' )"> 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. Outline 28 Program Output Initially the data is not sorted or filtered.
2001 Prentice Hall, Inc. All rights reserved. Outline 29 Program Output The user selects to sort by Copyright but does not select any category to filter by
2001 Prentice Hall, Inc. All rights reserved. Outline 30 Program Output User selects to sort by Title.
2001 Prentice Hall, Inc. All rights reserved Data Binding Elements