Download presentation
Presentation is loading. Please wait.
1
Chapter 16 - Dynamic HTML: Data Binding with Tabular Data Control
Outline Introduction Simple Data Binding Moving a Recordset Binding to an img Binding to a table Sorting table Data Advanced Sorting and Filtering Data Binding Elements Internet and World Wide Web Resources
2
Line 1 is a header row that specifies the names of the columns below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Line 1 is a header row that specifies the names of the columns below. Fig XHTML color table data (HTMLStandardColors.txt).
3
The object element inserts the Tabular Data Control.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig 16.2: introdatabind.html > 6 <!-- Simple data binding and recordset manipulation --> 7 8 <html xmlns = " <head> <title>Intro to Data Binding</title> 11 <!-- This object element inserts an ActiveX control --> <!-- for handling and parsing our data. The PARAM --> <!-- tags give the control starting parameters > <!-- such as URL > <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt" /> <param name = "UseHeader" value = "TRUE" /> <param name = "TextQualifier" value = /> <param name = "FieldDelim" value = "|" /> </object> 24 <script type = "text/javascript"> <!-- var recordSet = Colors.recordset; 28 function reNumber() { if ( !recordSet.EOF ) recordNumber.innerText = recordSet.absolutePosition; Introdatabind.html The object element inserts the Tabular Data Control. The classid attribute specifies the ActiveX control to add. The param tag specifies parameters for the object in the object element.
4
Line 42 determines if the end of file (EOF) is reached.
else recordNumber.innerText = " "; } 37 function forward() { recordSet.MoveNext(); 41 if ( recordSet.EOF ) recordSet.MoveFirst(); 44 colorSample.style.backgroundColor = colorRGB.innerText; reNumber(); } // --> </script> </head> 52 <body onload = "reNumber()" onclick = "forward()"> 54 <h1>XHTML Color Table</h1> <h3>Click to move forward in the recordset.</h3> 57 <p><strong>Color Name: </strong> <span id = "colorId" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorName"></span><br /> 61 <strong>Color RGB Value: </strong> <span id = "colorRGB" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue"> </span><br /> 66 Introdatabind.html 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.
5
Introdatabind.html Program Output
Currently viewing record number <span id = "recordNumber" style = "font-weight: 900"> </span><br /> 70 <span id = "colorSample" style = "background-color: aqua; color: ; font-size: 30pt">Color Sample </span></p> 74 </body> 76 </html> Introdatabind.html Program Output The user will be able to click on the browser to scroll through the records in the Color recordset.
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.
7
Function move will move to the first, last or next recordset.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig 16.3: moving.html > 6 <!-- Moving through a recordset --> 7 8 <html xmlns = " <head> <title>Dynamic Recordset Viewing</title> <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt" /> <param name = "UseHeader" value = "TRUE" /> <param name = "TextQualifier" value = /> <param name = "FieldDelim" value = "|" /> </object> 19 <script type = "text/javascript"> <!-- var recordSet = Colors.recordset; 23 function update() { h1Title.style.color = colorRGB.innerText; } 28 function move( whereTo ) { switch ( whereTo ) { 32 Moving.html 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.
8
case "first": recordSet.MoveFirst(); update(); break; 37 // If recordset is at beginning, move to end. case "previous": 40 recordSet.MovePrevious(); 42 if ( recordSet.BOF ) recordSet.MoveLast(); 45 update(); break; 48 // If recordset is at end, move to beginning. case "next": 51 recordSet.MoveNext(); 53 if ( recordSet.EOF ) recordSet.MoveFirst(); 56 update(); break; 59 case "last": recordSet.MoveLast(); update(); break; } } // --> </script> Moving.html The BOF method works similarly to the EOF method except that it tests for the beginning of the file. 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.
9
Initially the header text color is black.
68 <style type = "text/css"> input { background-color: khaki; color: green; font-weight: bold } </style> </head> 75 <body style = "background-color: darkkhaki"> 77 <h1 style = "color: black" id = "h1Title"> XHTML Color Table</h1> <span style = "position: absolute; left: 200; width: 270; border-style: groove; text-align: center; background-color: cornsilk; padding: 10"> <strong>Color Name: </strong> <span id = "colorName" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorName">ABC</span> <br /> 87 <strong>Color RGB Value: </strong> <span id = "colorRGB" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC </span><br /> 92 <input type = "button" value = "First" onclick = "move( 'first' );" /> 95 <input type = "button" value = "Previous" onclick = "move( 'previous' );" /> 98 <input type = "button" value = "Next" onclick = "move( 'next' );" /> 101 Moving.html Initially the header text color is black. Lines create buttons for each record choice: first, previous, next and last.
10
Moving.html Program Output
<input type = "button" value = "Last" onclick = "move( 'last' );" /> </span> 105 </body> 107 </html> Based on which button is selected the corresponding function to move to that record is invoked. Moving.html Program Output The browser displays the first record initially before the user selects the next record to be viewed.
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.
12
Fig. 16.4 images.txt data source file for Fig. 16.5.
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 images.txt data source file for Fig
13
The recordset used for this example is a set of images.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig. 16.5: bindimg.html --> 6 <!-- Binding data to an image --> 7 8 <html xmlns = " <head> <title>Binding to a img</title> 11 <object id = "Images" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "images.txt" /> <param name = "UseHeader" value = "True" /> </object> 17 <script type = "text/javascript"> <!-- recordSet = Images.recordset; 21 function move( whereTo ) { switch( whereTo ) { 25 case "first": recordSet.MoveFirst(); break; 29 case "previous": 31 recordSet.MovePrevious(); 33 if ( recordSet.BOF ) recordSet.MoveLast(); Binding.html 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.
14
36 break; 38 case "next": 40 recordSet.MoveNext(); 42 if ( recordSet.EOF ) recordSet.MoveFirst(); 45 break; 47 case "last": recordSet.MoveLast(); break; } } // --> </script> </head> 56 <body> 58 <img datasrc = "#Images" datafld = "image" alt = "Image" style = "position: relative; left: 45px" /><br /> 61 <input type = "button" value = "First" onclick = "move( 'first' );" /> 64 <input type = "button" value = "Previous" onclick = "move( 'previous' );" /> 67 <input type = "button" value = "Next" onclick = "move( 'next' );" /> 70 Binding.html Binding to an image will automatically update the image when the user selects a new image to view.
15
Binding.html Program Output
<input type = "button" value = "Last" onclick = "move( 'last' );" /> 73 </body> 75 </html> Binding.html Program Output The image is automatically updated (browser on right) as the user selects a new image to view.
16
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 16.6: tablebind.html > 6 <!-- Using Data Binding with tables --> 7 8 <html xmlns = " <head> <title>Data Binding and Tables</title> <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt" /> <param name = "UseHeader" value = "TRUE" /> <param name = "TextQualifier" value = /> <param name = "FieldDelim" value = "|" /> </object> </head> 20 <body style = "background-color: darkseagreen"> 22 <h1>Binding Data to a <code>table</code></h1> 24 <table datasrc = "#Colors" style = "border-style: ridge; border-color: darkseagreen; background-color: lightcyan"> 28 <thead> <tr style = "background-color: mediumslateblue"> <th>Color Name</th> <th>Color RGB Value</th> </tr> </thead> 35 Tablebind.html Lines 25–27 begin binding the table by adding the datasrc attribute to the opening table tag.
17
<tbody> <tr style = "background-color: lightsteelblue"> <td><span datafld = "ColorName"></span></td> <td><span datafld = "ColorHexRGBValue" style = "font-family: monospace"></span></td> </tr> </tbody> 43 </table> 45 </body> 47 </html> The data binding is finished in lines 38–40 by adding the datafld attribute to span tags that reside in the table cells. Tablebind.html
18
Program Output Internet Explorer iterates through the data file, and creates a table row for each record it finds.
19
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig 16.7: sorting.html --> 6 <!-- Sorting table data > 7 8 <html xmlns = " <head> <title>Data Binding and Tables</title> <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt" /> <param name = "UseHeader" value = "TRUE" /> <param name = "TextQualifier" value = /> <param name = "FieldDelim" value = "|" /> </object> </head> 20 <body style = "background-color: darkseagreen"> 22 <h1>Sorting Data</h1> 24 <table datasrc = "#Colors" style = "border-style: ridge; border-color: darkseagreen; background-color: lightcyan"> <caption> Sort by: 30 <select onchange = "Colors.Sort = this.value; Colors.Reset();"> <option value = "ColorName">Color Name (Ascending) </option> Sorting.html 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.
20
By default, a column is sorted in ascending order.
<option value = "-ColorName">Color Name (Descending) </option> <option value = "ColorHexRGBValue">Color RGB Value (Ascending)</option> <option value = "-ColorHexRGBValue">Color RGB Value (Descending)</option> </select> </caption> 43 <thead> <tr style = "background-color: mediumslateblue"> <th>Color Name</th> <th>Color RGB Value</th> </tr> </thead> 50 <tbody> <tr style = "background-color: lightsteelblue"> <td><span datafld = "ColorName"></span></td> <td><span datafld = "ColorHexRGBValue" style = "font-family: monospace"></span></td> </tr> </tbody> 58 </table> 60 </body> 62 </html> Sorting.html To sort in descending order, the column name is preceded with a minus sign (-). Lines 33–36 set the value attributes of the option tags to the column names in the data file. By default, a column is sorted in ascending order.
21
Program Output The user selects a descending sort for the elements. The table updates to display the elements in this sorted order.
22
Fig. 16.8 DBPublications.txt data file for Fig. 16.9.
1 2 3 @C How to 4 @C How to 5 @C++ How to 6 @C++ How to 7 @Java How to 8 @Java How to 9 @Java How to 10 @Visual Basic 6 How to 11 12 @Internet and World Wide Web How to 13 14 @The Complete C++ Training 15 16 @The Complete C++ Training 17 18 @The Complete Java Training 19 20 @The Complete Java Training 21 22 @The Complete Java Training 23 24 @The Complete Visual Basic 6 Training 25 26 @The Complete Internet and World Wide Web Programming Training Fig DBPublications.txt data file for Fig
23
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig 16.9: advancedsort.html --> 6 <!-- Sorting and filtering data --> 7 8 <html xmlns = " <head> <title>Data Binding - Sorting and Filtering</title> 11 <object id = "Publications" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "DBPublications.txt" /> <param name = "UseHeader" value = "TRUE" /> <param name = "TextQualifier" value = /> <param name = "FieldDelim" value = "|" /> <param name = "Sort" value = "+Title" /> </object> 20 <style type = "text/css"> 22 a { font-size: 9pt; text-decoration: underline; cursor: hand; color: blue } 27 caption { cursor: hand; } 29 span { cursor: hand; } 31 </style> 33 Advancedsort.html Line 18 sets the Sort property of the TDC using a param tag instead of scripting. 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. Line 30 introduces the cursor CSS attribute, which specifies what the mouse cursor looks like when hovering over an object.
24
34 <script type = "text/javascript">
<!-- var sortOrder; 37 function reSort( column, order ) { if ( order ) sortOrder = ""; else sortOrder = "-"; 44 if ( event.ctrlKey ) { Publications.Sort += "; " + sortOrder + column; Publications.Reset(); } else { Publications.Sort = sortOrder + column; Publications.Reset(); } 53 spanSort.innerText = "Current sort: " + Publications.Sort; } 57 function filter( filterText, filterColumn ) { Publications.Filter = filterColumn + "=" + filterText; Publications.Reset(); spanFilter.innerText = "Current filter: " + Publications.Filter; } 66 Advancedsort.html 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 ("; "). The Filter property filters out all records that do not have a cell matching the specified text. Lines 60–61 set the Filter property to the column and text by which that column should be filtered.
25
Function clearAll will clear all filters when executed.
{ Publications.Sort = " "; spanSort.innerText = "Current sort: None"; Publications.Filter = " "; spanFilter.innerText = "Current filter: None"; Publications.Reset(); } // --> </script> </head> 78 <body> <h1>Advanced Sorting</h1> <p>Click the link next to a column head to sort by that column. To sort by more than one column at a time, hold down Ctrl while you click another sorting link. Click any cell to filter by the data of that cell. To clear filters and sorts, click the green caption bar.</p> 86 <table datasrc = "#Publications" border = "1" cellspacing = "0" cellpadding = "2" style = "background-color: papayawhip;"> 90 <caption style = "background-color: lightgreen; padding: 5" onclick = "clearAll()"> <span id = "spanFilter" style = "font-weight: bold; background-color: lavender">Current filter: None </span> <span id = "spanSort" style = "font-weight: bold; background-color: khaki">Current sort: None</span> </caption> 99 Advancedsort.html Function clearAll will clear all filters when executed. Creates a green caption bar that will clear all filters on click.
26
<thead> <tr> <th>Title <br /> (<a onclick = "reSort( 'Title', true )"> Ascending</a> <a onclick = "reSort( 'Title', false )"> Descending</a>) </th> 108 <th>Authors <br /> (<a onclick = "reSort( 'Authors', true )"> Ascending</a> <a onclick = "reSort( 'Authors', false )"> Descending</a>) </th> 115 <th>Copyright <br /> (<a onclick = "reSort( 'Copyright', true )"> Ascending</a> <a onclick = "reSort( 'Copyright', false )"> Descending</a>) </th> 122 <th>Edition <br /> (<a onclick = "reSort( 'Edition', true )"> Ascending</a> <a onclick = "reSort( 'Edition', false )"> Descending</a>) </th> 129 <th>Type <br /> (<a onclick = "reSort( 'Type', true )"> Ascending</a> <a onclick = "reSort( 'Type', false )"> Descending</a>) Advancedsort.html 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).
27
</th> </tr> </thead> 138 <tr> <td><span datafld = "Title" onclick = "filter( this.innerText, 'Title' )"></span> </td> 143 <td><span datafld = "Authors" onclick = "filter( this.innerText, 'Authors')"></span> </td> 147 <td><span datafld = "Copyright" onclick = "filter( this.innerText, 'Copyright' )"></span> </td> 151 <td><span datafld = "Edition" onclick = "filter( this.innerText, 'Edition' )"></span> </td> 155 <td><span datafld = "Type" onclick = "filter( this.innerText, 'Type' )"></span> </td> 159 </tr> 161 </table> 163 </body> 165 </html> Advancedsort.html By clicking on a column head, the filter function will be called to filter according to the data in that column.
28
Initially the data is not sorted or filtered.
Program Output Initially the data is not sorted or filtered.
29
Program Output The user selects to sort by Copyright but does not select any category to filter by
30
User selects to sort by Title.
Program Output User selects to sort by Title.
31
16.8 Data Binding Elements
Similar presentations
