1 / 29

Chapter 16

Chapter 16. Dynamic HTML: Data Binding with Tabular Data Control. Outline. Introduction Tabular Data Control (TDC) Simple Data Binding Binding to an img Binding to a table Sorting table Data Data Binding Elements. Introduction. Data binding

curran-farrell
Download Presentation

Chapter 16

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 16 Dynamic HTML: Data Binding with Tabular Data Control

  2. Outline • Introduction • Tabular Data Control (TDC) • Simple Data Binding • Binding to an img • Binding to a table • Sorting table Data • Data Binding Elements

  3. Introduction • Data binding • Data no longer reside exclusively on the server • Data can be maintained on the client • Eliminate server activity and network delays • To bind data to XHTML elements, IE uses Data Source Objects (DSOs) • Most popular DSO: Tabular Data Control (TDC) • TDC extracts ordered (delimited) contents from an ASCII (text) file into web pages • TDC is an ActiveX control built into IE

  4. ActiveX Controls • ActiveX Controls allow a client to increase the capabilities of their browser • a Microsoft technology, similar to plug-ins • unlike plug-ins, ActiveX controls are readily and immediately available when visit a page that uses a control • Most controls download and install very quickly • Need to download a control only once. After that, the control is always available for use on your system

  5. ActiveX Controls • To embed an ActiveX control in a Web page, use the <object> element • This element tells your browser to insert an object of a specified type into a page • You can add many types of objects to your pages with the <object> element • e.g. <object attributes> object parameters or alternate HTML for browsers that don't support objects </object>

  6. object Attributes • To identify a specific object type, you must define attributes for your objects • The useful <object> tag attributes for ActiveX objects: • id: An identifier for the specific instance of the object • classid: Identifies the object's class • data: URL for the object's data • height: Sets the object's height • width: Sets the object's width • ……

  7. Tabular Data Control (TDC) • The Tabular Data Control • is very useful if we have relatively small amounts of data and need to update this data frequently and require client-side scripting. • can act like a small database • available in IE 4.0+ • Globally Unique Identifier for the tabular data control is CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83 <object id = "colors" classid = "CLSID:333C7BC4-460F-11D0-BC04 -0080C7055A83"> object parameters </object>

  8. Tabular Data Control (TDC) • Parameters of the object are specified using the <param> tag. The tabular data control has around 7 parameters • Some important parameters: DataURL : The path of the file that contains the data UseHeader : When set to true, it indicates that we want to use the field names for referencing a particular field. The default value is false TextQualifier : The character at the beginning and end of a text that qualifies that text. FieldDelim : The Field Delimiter is used to distinguish between the different data fields of the data file.

  9. HTMLStandardColors.txt

  10. Example • Insert a Tabular Data Control <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>

  11. Simple Data Binding • recordset : creates a reference point to the data file • Properties: • EOF: used to check if we have reached the end of the file • absolutePosition: position within the recordset • Methods: • moveFirst() : Point to the first data item (first row) • moveNext() : Point to the next data item from previous position • moveLast() : Point to the last data item (last row) • ondatasetcomplete : Event handler that fires when the control and its data has loaded.

  12. Simple Data Binding • Example: • To reference a TDC's data file, and display its 2nd row var dataSet=Colors.recordset; dataSet.moveNext(); • To bind an element to a data file <span datasrc = "#Colors" datafld = "ColorName"> </span>

  13. introdatabind.html(1 of 4)

  14. introdatabind.html(2 of 4)

  15. introdatabind.html(3 of 4)

  16. Binding to an img • Many different types of XHTML elements can be bound to data sources • Binding to an img element • Changing the recordset updates the src attribute of the image

  17. images.txt

  18. binding.html(1 of 3)

  19. binding.html(2 of 3)

  20. binding.html(3 of 3)

  21. 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

  22. tablebind.html(1 of 2)

  23. tablebind.html(2 of 2)

  24. Sorting table Data • Sorting data dynamically is governed by the following property and method: • Sort: property that contain the sort string (+-column_name) and control how the data will be sorted • column_name: data will be sorted by this column in asecending order • -column_name: data will be sorted by this column in descending order • reset(): Method that refreshes the displayed data according to the settings of a Sort request.

  25. Sorting Exmples Colors.Sort = ColorName Colors.Reset() Colors.Sort = - ColorName Colors.Reset()

  26. Data Binding Elements • The elements to which a data source is bound determine how the data will be displayed • Different elements may use the data for different purposes. • Element Bindable Property a href div, span contained text img src table cell elements

More Related