New%20Perspectives%20on%20XML

1
New Perspectives on XML

• Binding XML Data with Internet Explorer

2
Using XML as a Data Source

• Data binding is a technique where the Web pages
  content is drawn from a data source.
• Data binding allows you to attach data from an
  XML document to a Web page.
• Data binding frees the data from the format in
  which it is displayed so the same data source can
  be combined with several different Web pages.

3
Using XML as a Data Source

• In this tutorial, the data source is an XML
  document containing information about the
  employees at Freezing Point.
• The Web pages use placeholders which we will
  later populate with data from two XML documents.

4
Opening the Web Page

• Open the file FP1text and save as FP1.htm.
• Open and view FR1.htm using Internet Explorer.

hyperlink to the pages author
subtitle text
information about an employee
employee photograph
employee name
buttons to display different employees
5
Using Data Binding to Create a Final Web Page

• This figure shows how data binding will be used
  to create a final Web page

6
Fields, Records, and Recordsets

• Data in a data source is organized by fields,
  records, and recordsets.
• A field is an element that contains a single item
  of information such as an employees last name.
• A record is a collection of those fields.
• A recordset is a collection of records.

7
Fields, Records, and Recordsets
This figure shows fields, records, and a
recordset of an XML document
8
Data Islands

• The first step in data binding is to attach the
  Web page to a recordset. The attached data is
  called a data island. They can be either external
  files or code entered into the HTML file.
• The syntax to create a data island from an
  external file is
• ltxml idid srcURLgtlt/xmlgt
• Here, id is the id name assigned to the data
  island
• URL is the filename and location of the external
  XML file

9
Data Islands

• For example
• ltxml idCompany srcCompany.xmlgtlt/xmlgt
• This creates a data island named Company attached
  to Company.xml.

10
Data Islands

• To insert a data island directly into the HTML
  file, use this syntax
• ltxml ididgt
• xml code
• lt/xmlgt
• While this technique can be used, it is not
  recommended. After all, the philosophy of XML is
  to separate data content from data formatting.

11
Data Islands

• Data islands are stored by the XML parser as a
  Data Source Object (DSO).
• The DSO takes care of the interaction between the
  Web page and the data island.
• Also, program code can be written to control the
  actions of the DSO such as specifying which
  records will be displayed in the Web page at any
  one time.

12
Data Islands

• If the XML document is not well formed or valid,
  IE will not create a DSO.
• The DSO is created only once for each session.
• This means that if the contents of the data
  source are modified after the DSO is created, the
  changes will not be reflected in the Web page
  until it is refreshed or until the next time the
  page is opened.

13
Creating a Data Island
This figure shows how to create the data island
14
Binding XML Elements to HTML Tags

• After the data island has been created, the
  elements in the XML document need to be bound to
  the HTML file.
• The syntax is
• lttag datasrcid datafldfieldgt
• Here, tag is the name of the HTML tag, id is the
  name of the data island, and field is the name of
  the field in the data source.

15
HTML Tags that Support Data Binding in Internet
Explorer
This figure shows HTML tags that support data
binding in Internet Explorer
16
Binding XML Elements to HTML Tags
This figure shows how to bind XML elements to
HTML tags
17
Binding XML Elements to HTML Tags Continued
This figure shows how to bind the rest of the
FPINFO.XML elements
18
Binding to an XML Attribute

• Attributes, like the Status attribute of the
  Employee element, are treated by the DSO as
  fields. If the attribute is part of a record
  element, it is easy to bind attribute values to a
  Web page.

19
Binding to an XML Attribute

• This code has the ID attribute as part of the
  Employee element
• ltEmployee IDE304gt
• ltNamegtAlice Ashmanlt/Namegt
• ltDepartmentgtAccountinglt/Departmentgt
• lt/Employeegt

20
Binding to an XML Attribute

• It is interpreted by the DSO as
• ltEmployeegt
• ltIDgtE304lt/IDgt
• ltNamegtAlice Ashmanlt/Namegt
• ltDepartmentgtAccountinglt/Departmentgt
• lt/Employeegt

21
Binding to an XML Attribute

• Attribute are more complicated when they are part
  of a field element
• ltEmployeegt
• ltName ID"E304"gtAlice Ashmanlt/Namegt
• ltDepartmentgtAccountinglt/Departmentgt
• lt/Employeegt

22
Binding to an XML Attribute

• In the above code, the attribute is still treated
  by the DSO as a field element. A DSO treats the
  above code as
• ltEmployeegt
• ltNamegt
• ltIDgtE304lt/IDgt
• Alice Ashman
• lt/Namegt
• ltDepartmentgtAccountinglt/Departmentgt
• lt/Employeegt

23
Binding to an XML Attribute

• However, this leaves the text "Alice Ashman"
  unassociated with a field. Remember to reference
  all character data within an element using the
  Text field. The DSO interprets this code as
• ltEmployeegt
• ltNamegt
• ltIDgtE304lt/IDgt
• ltTextgtAlice Ashmanlt/Textgt
• lt/Namegt
• ltDepartmentgtAccountinglt/Departmentgt
• lt/Employeegt

24
Binding to an XML Attribute

• If the attribute is part of a field element, it
  is still treated by the DSO as a field element.
• The field element containing the attribute
  becomes a record element.
• It is a good idea not to use attributes in field
  elements if you plan to do data binding.

25
Binding to an XML Attribute

• This figure shows STAFF_INFO data displayed in
  the Web page

bound element
bound element
26
The Data Source Object

• ActiveX Data Objects (ADO) is a data-access
  technology developed by Microsoft. ADO allows you
  to work with the Data Source Object by applying a
  method or by changing one of the properties of
  the DSO.
• The syntax for applying a method is
• id.recordset.method

27
The Data Source Object

• Here, id is the name of the data island in the
  Web document and method is the name of the method
  supported by ADO.
• There are several methods that can be applied to
  DSOs.

28
The Data Source Object

• This figure shows a few available recordset
  methods

29
The Data Source Object

• For example, if you want to display the last
  record in a DSO whose id is Staff_Info, run the
  following method
• Staff_Info.recordset.moveLast( )
• The simplest way to run a method is to assign the
  method to the onClick event handler of a ltbuttongt
  as shown below
• ltbutton onClickStaff_Info.recordset.moveLast(
  )gt

30
The Data Source Object

• When the user clicks the button, IE runs the
  command indicated by the onClick event handler,
  displaying the last record.

31
Assigning a Recordset Method

• This figure shows how to enter the movefirst( )
  method

32
Assigning a Recordset Method Continued

• This figure shows how to enter the remaining
  recordset methods

33
Table Binding

• Using table data binding, each record can be
  displayed in a different row of a table. The
  syntax is
• lttable datasrcidgt
• lttrgt
• lttdgtltspan datafldfield1gtlt/spangtlt/tdgt
  
• lttdgtltspan datafldfield2gtlt/spangtlt/tdgt
• lt/trgt
• lt/tablegt

34
Table Binding

• In the example, id is the name of the data
  island, field1, field2 are the fields from the
  recordset.

35
Page Binding

• As you add more records to your XML document, a
  table can become long and unwieldy. One way to
  fix this is to give the user the option of
  limiting the number of records displayed at any
  one time.
• The user can then move forward of backward that
  number of records at a time. This is called
  paging.

36
Page Binding

• To specify the page size, add the dataPageSize
  attribute to the lttablegt tag
• dataPageSizenumber
• number is the number of records you want
  displayed in a single page.

37
Navigating a Table Page

• A unique identifier must be assigned to a table
  using the ID attribute before writing a command
  to navigate a table page. The syntax to do this
  is
• lttable ididgt
• Here, id is the name you assign to the table
  object.
• This is needed because the commands to navigate
  the table pages act on the table itself not the
  recordset.

38
Table Methods and Properties

• These figures show some table methods and
  properties

39
Table Methods and Properties

• To run these commands, add the command to the
  onClick event handler of a ltbuttongt tag. For
  example, to move to the last page in a data table
  named StaffTable, you enter the attribute
• onClickStaffTable.lastPage( )

40
Hierarchical Records

• This figure shows the layout of the EMP2.XML
  document

41
Hierarchical Records

• To bind the Employee fields in the previous slide
  to a table, you create a table as follows
• lttable datasrcStaff_Info
  datafldEmployeegt
• lttrgt
• lttdgtltspan datafldNamegtlt/spangtlt/tdgt
• lttdgtltspan datafldPositiongtlt/spangtlt/td
  gt
• lttdgtltspan datafldPhonegtlt/spangtlt/tdgt
• lt/trgt
• lt/tablegt

42
Draft of the Final Web Page

• This figure shows the draft of the final Web page

43
The Final Web Page

• This figure shows the final Web page

44
Summary

• Data binding is a technique where the Web pages
  content is drawn from a data source.
• The first step in data binding is to attach the
  Web page to a recordset. The attached data is
  called a data island. They can be either external
  files or code entered into the HTML file.
• ActiveX Data Objects (ADO) is a data-access
  technology developed by Microsoft. ADO allows you
  to work with the Data Source Object by applying a
  method or by changing one of the properties of
  the DSO.