Data Binding

1
Data Binding

• Your data changes, so why embed it in HTML code?

2
Huh? What? Separate Code and Data?

• Your page contains HTML code, and
• Data files separate

3
Advantages

• Easier to maintain HTML and data separately
• More flexibility in presentation
• Subset of data (what is requested) is faster
• User can filter and sort as desired
• Data load is asynchronous

4
Data Source Objects ( DSO )

• Template that can be filled with data that can be
  linked to the browser
• How data transported
• How manipulated
• Whether data can be updated
• How data is stored
• Object Model to be used with scripts

5
Where are these DSOs?

• IE includes several Active-X controls (guess
  where they work?)
• Write your own
• Find with other editors (Cold Fusion)
• Read more on data binding msdn.microsoft.com/libra
  ry/default.asp?url/workshop/author/databind/data
  _binding.asp

6
Data from DSO to the page

• Usually ActiveX control or Java applet
• Data consumers render the data
• HTML tags such as span, table, or
• External objects such as ActiveX or Java
• Binding Agents built in to IE

7
Tabular Data Control ( TDC )Added to page with
object element

• This ActiveX DSO uses delimited text file (plain
  text separated by characters, no db)
• Catalog ID Description Price
• 12345 Wing-tip tennis shoes 119.95
• 12346 Steel-toe sneakers 69.95
• Field Delimiter is your choice
• Each line is a record
• You can also include a TextQualifier

UseHeader is TRUE
8
Tabular Data Control ( TDC )

• Make sample delimited text file with your choice
  of TextQualifier (optional) and Field Delimiter
• Catalog ID Description Price
• 12345 Wing-tips 119.95
• 12346 Steel-toes 69.95
• Header plus 2 records
• TextQualifier
• Field Delimiter

9
Whats the code like?

• lttitlegtTDC demonstrating classidlt/titlegt
• ltobject idcatalogTDC"
• classid"CLSID333C7BC4-460F-11D0-BC04-0080C7055A8
  3"gt
• ltparam name"TextQualifier" value"gt
• ltparam name "FieldDelim" value ""gt
• ltparam name "DataURL" value "herbs.txt"gt
• ltparam name "UseHeader" value "true"gt
• lt/objectgt
• Notice that this code is in HEAD section

Pick a name
Copy this classid
10
Use FrontPage to setup TDC

• TDC is an ActiveX component, and FrontPage sets
  up to use
• Insert Web Component Advanced Controls
  ActiveX Control
• Tabular Data Control is not in list, so Customize
  button
• Check TDC and you are ready to use

11
Using FP to insert TDC

• ltobject classid"clsid333C7BC4-460F-11D0-BC04-008
  0C7055A83" id"CTDCCtl1"gt
• ltparam name"RowDelim" value""gt
• ltparam name"FieldDelim" value","gt
• ltparam name"TextQualifier" value"quot"gt
• ltparam name"EscapeChar" valuegt
• ltparam name"UseHeader" value"0"gt
• ltparam name"SortAscending" value"-1"gt
• ltparam name"SortColumn" valuegt
• ltparam name"FilterValue" valuegt
• ltparam name"FilterCriterion" value"??"gt
• ltparam name"FilterColumn" valuegt
• ltparam name"CharSet" valuegt
• ltparam name"Language" valuegt
• ltparam name"CaseSensitive" value"-1"gt
• ltparam name"Sort" valuegt
• ltparam name"Filter" valuegt
• ltparam name"AppendData" value"0"gt
• ltparam name"DataURL" valuegt
• ltparam name"ReadyState" value"4"gt

12
Scripts may control data access

• ltscript typetext/javascript" for"window"
  event"onload"gt
• herbRSherbTDC.recordSet
• herbRS.MoveFirst()
• lt/scriptgt

recordSet points to Record
13
Data can also be in Excel csv

• Rather than use text file, data may also be
  stored in Excel comma delimited file
• (check out img filter folder)

14
HTML Elements to Bind (Single-Value)
HTML Element Binds To Supports Updating a href
No button innerText No div innerText No fra
me src No img src No
15
Manipulating Data

• Sorting and Filtering
• Adding, Changing and Deleting
• Data Events

16
Other Data Controls

• Remote Data Service (RDS)
• OBJECT classid"clsidBD96C556-65A3-11D0-983A-00C0
  4FC29E33"
• Obtains info from ODBC db

17
but mostly only works in IE !