Dynamic HTML: Data Binding with Tabular Data Control  2004

Dynamic HTML: Data Binding with Tabular Data Control 2004 Prentice Hall, Inc. All rights reserved.

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) 2004 Prentice Hall, Inc. All rights reserved.

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 2004 Prentice Hall, Inc. All rights reserved.

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@ Outline HTMLStandardColors .txt (1 of 1) 10 @navy@ @#000080@ 11 @olive@ @#808000@ 12 @purple@ @#800080@ 13 @red@ @#FF0000@ 14 @silver@ @#C0C0C0@ 15 @teal@ @#008080@ 16 @yellow@ @#FFFF00@ 17 @white@ @#FFFFFF@ 2004 Prentice Hall, Inc. All rights reserved.

1 ?xml version "1.0"? 2 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 Outline "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 4 5 !-- Fig 16.2: introdatabind.html 6 !-- Simple data binding and recordset manipulation -- introdatabind.html (1 of 4) -- 7 8 9 10 html xmlns "http://www.w3.org/1999/xhtml" head title Intro to Data Binding /title 11 12 !-- This object element inserts an ActiveX control -- 13 !-- for handling and parsing our data. The PARAM -- 14 !-- tags give the control starting parameters -- 15 !-- such as URL. -- 16 object id "Colors" 17 classid "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" 18 param name "DataURL" value 19 "HTMLStandardColors.txt" / 20 param name "UseHeader" value "TRUE" / 21 param name "TextQualifier" value "@" / 22 param name "FieldDelim" value " " / 23 /object 24 2004 Prentice Hall, Inc. All rights reserved.

25 script type "text/javascript" 26 !-- 27 var recordSet Colors.recordset; Outline 28 29 function displayRecordNumber() 30 { 31 if ( !recordSet.EOF ) 32 recordNumber.innerText 33 recordSet.absolutePosition; 34 else 35 36 introdatabind.html (2 of 4) recordNumber.innerText " "; } 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 displayRecordNumber(); 48 } 49 // -- 2004 Prentice Hall, Inc. All rights reserved.

50 51 /script /head 52 53 body onload "reNumber()" onclick "forward()" 54 55 h1 XHTML Color Table /h1 56 h3 Click anywhere in the browser window 57 introdatabind.html (3 of 4) to move forward in the recordset. /h3 58 p strong Color Name: /strong 59 span id "colorId" style "font-family: monospace" 60 Outline datasrc "#Colors" datafld "ColorName" /span br / 61 62 strong Color RGB Value: /strong 63 span id "colorRGB" style "font-family: monospace" 64 datasrc "#Colors" datafld "ColorHexRGBValue" 65 /span br / 66 67 Currently viewing record number 68 span id "recordNumber" style "font-weight: 900" 69 /span br / 70 71 72 73 span id "colorSample" style "background-color: aqua; color: 888888; font-size: 30pt" Color Sample /span /p 74 2004 Prentice Hall, Inc. All rights reserved.

75 /body 76 /html Outline introdatabind.html (4 of 4) 2004 Prentice Hall, Inc. All rights reserved.

Binding to a table Binding data to a table is perhaps the most important of data binding – Different from the data binding we’ve seen 2004 Prentice Hall, Inc. All rights reserved.

1 ?xml version "1.0"? 2 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Outline 4 5 !-- Fig. 16.6: tablebind.html 6 !-- Using Data Binding with tables -- -- tablebind.html (1 of 2) 7 8 9 html xmlns "http://www.w3.org/1999/xhtml" head 10 title Data Binding and Tables /title 11 object id "Colors" 12 classid "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" 13 param name "DataURL" value 14 "HTMLStandardColors.txt" / 15 param name "UseHeader" value "TRUE" / 16 param name "TextQualifier" value "@" / 17 param name "FieldDelim" value " " / 18 19 /object /head 20 21 body style "background-color: darkseagreen" 22 23 h1 Binding Data to a code table /code /h1 24 25 table datasrc "#Colors" style "border-style: ridge; 2004 Prentice Hall, Inc. All rights reserved.

26 border-color: darkseagreen; 27 background-color: lightcyan" 28 29 thead 30 tr style "background-color: mediumslateblue" 31 th Color Name /th 32 th Color RGB Value /th 33 /tr 34 /thead Outline tablebind.html (2 of 2) 35 36 tbody 37 tr style "background-color: lightsteelblue" 38 td span datafld "ColorName" /span /td 39 td span datafld "ColorHexRGBValue" 40 style "font-family: monospace" /span /td 41 /tr 42 /tbody 43 44 /table 45 46 /body 47 /html 2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

Sorting table Data Manipulate a large data source – Need to sort data Can be accomplished by the Sort property of the TDC 2004 Prentice Hall, Inc. All rights reserved.

1 ?xml version "1.0"? 2 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Outline 4 5 !-- Fig 16.7: sorting.html -- 6 !-- Sorting table data -- sorting.html (1 of 3) 7 8 9 html xmlns "http://www.w3.org/1999/xhtml" head 10 title Data Binding and Tables /title 11 object id "Colors" 12 classid "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" 13 param name "DataURL" value 14 "HTMLStandardColors.txt" / 15 param name "UseHeader" value "TRUE" / 16 param name "TextQualifier" value "@" / 17 param name "FieldDelim" value " " / 18 19 /object /head 20 21 body style "background-color: darkseagreen" 22 23 h1 Sorting Data /h1 24 25 table datasrc "#Colors" style "border-style: ridge; 2004 Prentice Hall, Inc. All rights reserved.

26 border-color: darkseagreen; 27 background-color: lightcyan" 28 caption 29 Sort by: 30 31 select onchange "Colors.Sort this.value; 32 Colors.Reset();" 33 option value "ColorName" Color Name (Ascending) 34 35 option value "-ColorName" Color Name (Descending) /option option value "ColorHexRGBValue" Color RGB Value 38 39 sorting.html (2 of 3) /option 36 37 Outline (Ascending) /option option value "-ColorHexRGBValue" Color RGB Value 40 (Descending) /option 41 /select 42 /caption 43 44 thead 45 tr style "background-color: mediumslateblue" 46 th Color Name /th 47 th Color RGB Value /th 48 /tr 49 /thead 50 2004 Prentice Hall, Inc. All rights reserved.

51 tbody 52 tr style "background-color: lightsteelblue" 53 td span datafld "ColorName" /span /td 54 td span datafld "ColorHexRGBValue" 55 style "font-family: monospace" /span /td 56 /tr 57 /tbody Outline sorting.html (3 of 3) 58 59 /table 60 61 /body 62 /html 2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

Data Binding Elements Element Bindable Property/Attribute a href div frame iframe img input type input type input type input type input type Contained text href href src value (button text) checked (use a boolean value in the data) value value checked (use a boolean value in the data) "button" "checkbox" "hidden" "password" "radio" input type "text" marquee param select span table textarea Fig. 16.10 value Contained text value Selected option Contained text Cell elements (see Section 16.6) Contained text (value) XHTML elements that allow data binding. 2004 Prentice Hall, Inc. All rights reserved.