Chapter 16 DHTML: Data Binding

1
Chapter 16DHTML Data Binding

• CIS 275Web 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 (DSOs).
• 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
• _at_ColorName_at__at_ColorHexRGBValue_at_
• Format _at_fieldname1_at__at_fieldname2_at_ where _at_ 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)
• ltobject id "Colors"
• classid "CLSID333C7BC4-460F-11D0-BC04-0080C70
  55A83"gt

header
object
4
Simple Data Binding II

• The param element specifies parameters for the
  ________ element.
• ltobject id "Colors"
• classid "CLSID333C7BC4-460F-11D0-BC04-0080C70
  55A83"gt
• ltparam name "DataURL" value
  "HTMLStandardColors.txt" /gt
• ltparam name "UseHeader" value "TRUE" /gt
• ltparam name "TextQualifier" value "_at_" /gt
• ltparam name "FieldDelim" value "" /gt
• lt/objectgt
• Sample data in the file
• _at_ColorName_at__at_ColorHexRGBValue_at_
• _at_aqua_at__at_00FFFF_at_
• _at_black_at__at_000000_at_

object
5
Simple Data Binding III

• Binding the data to HTML
• ltpgtltstronggtColor Name lt/stronggt
• ltspan id "colorId" style "font-family
  monospace"
• datasrc "Colors" datafld
  "ColorName"gtlt/spangtltbr /gt
• ltstronggtColor RGB Value lt/stronggt
• ltspan id "colorRGB" style "font-family
  monospace"
• datasrc "Colors" datafld
  "ColorHexRGBValue"gt
• lt/spangtltbr /gt
• Currently viewing record number
• ltspan id "recordNumber" style
  "font-weight 900"gt
• lt/spangtltbr /gt
• ltspan id "colorSample" style
  "background-color aqua
• color 888888 font-size 30pt"gtColor
  Sample
• lt/spangt
• lt/pgt

6
Simple Data Binding III

• Updating data dynamically using JavaScript
• ltscript type "text/javascript"gt
• var recordSetColors.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()
• lt/scriptgt

ltbody onload "displayRecordNumber()" onclick
"forward()"gt
7
Moving Within a recordset

• Web applications need the ability to navigate
  through a ___________.
• Identifying the data source begins with
• ltobject 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
• ltobject id Images"
• ______ the data source and data field to an img
• ltimg 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
• _at_ColorName_at__at_ColorHexRGBValue_at_
• _at_aqua_at__at_00FFFF_at_
• _at_black_at__at_000000_at_
• Identifying the data source for the web page
• ltobject id "Colors"
• Binding data source to a _______ element
• lttable datasrc Colors
• Binding data fields to table cells
• lttdgtltspan datafld Colornamegtlt/spangtlt/tdgt
• lttdgtltspan datafld Colornamegtlt/spangtlt/tdgt
• See p. 522.

table
10
Sorting table Data (p. 524)

• Create a list of Sort options
• ltselect onchange "Colors.Sort this.value
  Colors.Reset()"gt
• ltoption value "ColorName"gtColor Name
  (Ascending)lt/optiongt
• ltoption value "-ColorName"gtColor Name
  (Descending)lt/optiongt
• ltoption value "ColorHexRGBValue"gtColor RGB
  Value (Ascending)lt/optiongt
• ltoption value "-ColorHexRGBValue"gtColor RGB
  Value
• (Descending)lt/optiongt
• lt/selectgt
• 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