XP
New Perspectives on XML
Binding XML Data with Internet Explorer
1
XP
Using XML as a Data Source
• Data binding is a technique where the Web page’s
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.
Creating Web Pages with XML
Tutorial 2
2
XP
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.
Creating Web Pages with XML
Tutorial 2
3
XP
Opening the Web Page
Open the file FP1text and save as FP1.htm.
Open and view FR1.htm using Internet Explorer.
hyperlink to the
page’s author
page title text
subtitle text
descriptive text
information about an
employee
employee photograph
employee name
buttons to display
different employees
Creating Web Pages with XML
Tutorial 2
4
XP
Using Data Binding to Create a Final
Web Page
This figure shows how data binding will be used to create a final Web page
Creating Web Pages with XML
Tutorial 2
5
XP
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.
Creating Web Pages with XML
Tutorial 2
6
XP
Fields, Records, and Recordsets
This figure shows fields, records, and a recordset of an XML document
Creating Web Pages with XML
Tutorial 2
7
XP
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:
<xml id=“id” src=“URL”></xml>
• Here, id is the id name assigned to the data island
• URL is the filename and location of the external XML file
Creating Web Pages with XML
Tutorial 2
8
XP
Data Islands
• For example:
<xml id=“Company” src=“Company.xml”></xml>
• This creates a data island named Company
attached to Company.xml.
Creating Web Pages with XML
Tutorial 2
9
XP
Data Islands
• To insert a data island directly into the HTML file, use this
syntax:
<xml id=“id”>
xml code
</xml>
• While this technique can be used, it is not recommended.
After all, the philosophy of XML is to separate data
content from data formatting.
Creating Web Pages with XML
Tutorial 2
10
XP
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.
Creating Web Pages with XML
Tutorial 2
11
XP
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.
Creating Web Pages with XML
Tutorial 2
12
XP
Creating a Data Island
This figure shows how to create the data island
XML document containing data for
the Web page
name of data island
Creating Web Pages with XML
Tutorial 2
13
XP
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:
<tag datasrc=“#id” datafld=“field”>
• 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.
Creating Web Pages with XML
Tutorial 2
14
HTML Tags that Support DataXP
Binding in Internet Explorer
This figure shows
HTML tags that
support data
binding in
Internet
Explorer
Creating Web Pages with XML
Tutorial 2
15
XP
Binding XML Elements to HTML
Tags
This figure shows how to bind XML elements to HTML tags
data source of the bound element
bound element
Placeholder text is deleted
Creating Web Pages with XML
Tutorial 2
16
XP
Binding XML Elements to HTML
Tags Continued
This figure shows how to bind the rest of the FPINFO.XML elements
Creating Web Pages with XML
Tutorial 2
17
XP
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.
Creating Web Pages with XML
Tutorial 2
18
XP
Binding to an XML Attribute
• This code has the ID attribute as part of the
Employee element:
<Employee ID=“E304”>
<Name>Alice Ashman</Name>
<Department>Accounting</Department>
</Employee>
Creating Web Pages with XML
Tutorial 2
19
XP
Binding to an XML Attribute
• It is interpreted by the DSO as:
<Employee>
<ID>E304</ID>
<Name>Alice Ashman</Name>
<Department>Accounting</Department>
</Employee>
Creating Web Pages with XML
Tutorial 2
20
XP
Binding to an XML Attribute
• Attribute are more complicated when they are part
of a field element:
<Employee>
<Name ID="E304">Alice Ashman</Name>
<Department>Accounting</Department>
</Employee>
Creating Web Pages with XML
Tutorial 2
21
XP
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:
<Employee>
<Name>
<ID>E304</ID>
Alice Ashman
</Name>
<Department>Accounting</Department>
</Employee>
Creating Web Pages with XML
Tutorial 2
22
XP
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:
<Employee>
<Name>
<ID>E304</ID>
<$Text>Alice Ashman</$Text>
</Name>
<Department>Accounting</Department>
</Employee>
Creating Web Pages with XML
Tutorial 2
23
XP
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.
Creating Web Pages with XML
Tutorial 2
24
XP
Binding to an XML Attribute
This figure shows STAFF_INFO data displayed in the Web page
}
bound
element
Creating Web Pages with XML
Tutorial 2
bound
element
25
XP
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
Creating Web Pages with XML
Tutorial 2
26
XP
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.
Creating Web Pages with XML
Tutorial 2
27
XP
The Data Source Object
This figure shows a few available recordset methods
Creating Web Pages with XML
Tutorial 2
28
XP
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 <button>
as shown below:
<button onClick=“Staff_Info.recordset.moveLast( )”>
Creating Web Pages with XML
Tutorial 2
29
XP
The Data Source Object
• When the user clicks the button, IE runs the
command indicated by the onClick event handler,
displaying the last record.
Creating Web Pages with XML
Tutorial 2
30
XP
Assigning a Recordset Method
This figure shows how to enter the movefirst( ) method
Move to the 1st record in
the recordset when this
button is clicked
Creating Web Pages with XML
Tutorial 2
31
Assigning a Recordset Method
Continued
XP
This figure shows how to enter the remaining recordset methods
move to the
previous record
move to the next
record
move to the last
record
Creating Web Pages with XML
Tutorial 2
32
XP
Table Binding
• Using table data binding, each record can be
displayed in a different row of a table. The
syntax is:
<table datasrc=“#id”>
<tr>
<td><span datafld=“field1”></span></td>
<td><span datafld=“field2”></span></td>
</tr>
</table>
Creating Web Pages with XML
Tutorial 2
33
XP
Table Binding
• In the example, id is the name of the data island,
field1, field2 are the fields from the recordset.
Creating Web Pages with XML
Tutorial 2
34
XP
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.
Creating Web Pages with XML
Tutorial 2
35
XP
Page Binding
• To specify the page size, add the dataPageSize
attribute to the <table> tag:
dataPageSize=“number”
• number is the number of records you want
displayed in a single page.
Creating Web Pages with XML
Tutorial 2
36
XP
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:
<table id=“id”>
• 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.
Creating Web Pages with XML
Tutorial 2
37
XP
Table Methods and Properties
These figures show some table methods and properties
Creating Web Pages with XML
Tutorial 2
38
XP
Table Methods and Properties
• To run these commands, add the command to the
onClick event handler of a <button> tag. For
example, to move to the last page in a data table
named “StaffTable”, you enter the attribute:
onClick=“StaffTable.lastPage( )”
Creating Web Pages with XML
Tutorial 2
39
XP
Hierarchical Records
This figure shows the layout of the EMP2.XML document
Creating Web Pages with XML
Tutorial 2
40
XP
Hierarchical Records
• To bind the Employee fields in the previous slide to a
table, you create a table as follows:
<table datasrc=“#Staff_Info” datafld=“Employee”>
<tr>
<td><span datafld=“Name”></span></td>
<td><span datafld=“Position”></span></td>
<td><span datafld=“Phone”></span></td>
…
</tr>
</table>
Creating Web Pages with XML
Tutorial 2
41
XP
Draft of the Final Web Page
This figure shows the draft of the final Web page
employee
information
grouped by
department
Creating Web Pages with XML
Tutorial 2
42
XP
The Final Web Page
This figure shows the final Web page
Creating Web Pages with XML
Tutorial 2
43
XP
Summary
• Data binding is a technique where the Web page’s 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.
Creating Web Pages with XML
Tutorial 2
44