Chapter 16 DHTML: Data Binding CIS 275—Web Application Development for Business I

2 Introduction Data-binding technology takes place on the _______, not the server. Changes to the data do not propagate back to the server. To bind external data to ________ elements, IE uses Data Source Objects (DSO’s). The type of DSO discussed here is the Tabular Data Control (TDC), which is an __________ control. client XHTML ActiveX

3 Simple Data Binding I Data are stored in a separate file, such as HTMLStandardColors.txt. The first line in the data file is the _________ row: Format: … is the text qualifier and | is the field delimiter. The HTML file uses the ______ element to insert the TDC (the classid shown is the one used for TDC) <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> header object

4 Simple Data Binding II The param element specifies parameters for the ________ element. <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> Sample data in the file object

5 Simple Data Binding III Binding the data to HTML Color Name: <span id = "colorId" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorName"> Color RGB Value: <span id = "colorRGB" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue"> Currently viewing record number <span id = "colorSample" style = "background-color: aqua; color: ; font-size: 30pt">Color Sample

6 Simple Data Binding III Updating data dynamically using JavaScript var recordSet=Colors.recordset; function displayRecordNumber(){ if ( !recordSet.EOF ) recordNumber.innerText = recordSet.absolutePosition; else recordNumber.innerText=" "; } function forward() { recordSet.MoveNext(); if ( recordSet.EOF ) recordSet.MoveFirst(); colorSample.style.backgroundColor = colorRGB.innerText; displayRecordNumber(); }

7 Moving Within a recordset Web applications need the ability to navigate through a ___________. Identifying the data source begins with <object id = "Colors“ … A DHTML recordset object has the following methods Colors.recordset.MoveFirst() Colors.recordset.MoveLast() Colors.recordset.MovePrevious() Colors.recordset.MoveNext() Create buttons that use onclick() to move the pointer to the desired record. See p recordset

8 Binding to an img Example of image.txt containing image file names: image numbers/0.gif numbers/1.gif numbers/2.gif … Identify the data _______ for the web page: <object id = “Images" ______ the data source and data field to an img : <img datascr = “#Images” datafld = “image” Create buttons that use onclick() to call methods like Images.recordset.moveNext() See p source Bind

9 Binding to a table Sample data in the file … Identifying the data source for the web page: <object id = "Colors" … Binding data source to a _______ element: <table datasrc = “#Colors” … Binding data fields to table cells: See p table

10 Sorting table Data (p. 524) Create a list of Sort options Color Name (Ascending) Color Name (Descending) Color RGB Value (Ascending) Color RGB Value (Descending) JavaScript keyword _______ refers to the element in which the statement resides ( select ). After setting the Sort property, the Reset() method of the TDC is invoked. For advanced sorting and filtering, see p this