1 / 10

Chapter 16 DHTML: Data Binding

Chapter 16 DHTML: Data Binding. CIS 275—Web Application Development for Business I. Introduction. client. Data-binding technology takes place on the _______, not the server. Changes to the data do not propagate back to the server.

cassandra-lara
Download Presentation

Chapter 16 DHTML: Data Binding

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Introduction client • 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. 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: • @ColorName@|@ColorHexRGBValue@ • Format: @fieldname1@|@fieldname2@| … where @ 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-BC04-0080C7055A83"> header object

  4. Simple Data Binding II • The param element specifies parameters for the ________ element. <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt" /> <param name = "UseHeader" value = "TRUE" /> <param name = "TextQualifier" value = "@" /> <param name = "FieldDelim" value = "|" /> </object> • Sample data in the file @ColorName@|@ColorHexRGBValue@ @aqua@|@#00FFFF@ @black@|@#000000@ object

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

  6. Updating data dynamically using JavaScript <script type = "text/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(); } </script> Simple Data Binding III <body onload = "displayRecordNumber()" onclick = "forward()">

  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. 517. 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. 520. source Bind

  9. Binding to a table • Sample data in the file @ColorName@|@ColorHexRGBValue@ @aqua@|@#00FFFF@ @black@|@#000000@ … • 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: <td><span datafld = “Colorname”></span></td> <td><span datafld = “Colorname”></span></td> • See p. 522. table

  10. Sorting table Data (p. 524) • Create a list of Sort options <select onchange = "Colors.Sort = this.value; Colors.Reset();"> <option value = "ColorName">Color Name (Ascending)</option> <option value = "-ColorName">Color Name (Descending)</option> <option value = "ColorHexRGBValue">Color RGB Value (Ascending)</option> <option value = "-ColorHexRGBValue">Color RGB Value (Descending)</option> </select> • 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. 526. this

More Related