Tài liệu Module 5: Embedding XML Data in HTML pptx

Contents
Overview 1
Using Data in Web Browsers 2
Data Binding 10
Manipulating the Data Source 24
Lab 5: Embedding XML Data in HTML 37
Review 47

Module 5: Embedding
XML Data in HTML


Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual
property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you any
license to these patents, trademarks, copyrights, or other intellectual property.

 2000 Microsoft Corporation. All rights reserved.

Microsoft, ActiveX, MSDN, PowerPoint, Visual C++, and Windows are either registered
trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries.

The names of companies, products, people, characters, and/or data mentioned herein are fictitious
and are in no way intended to represent any real individual, company, product, or event, unless
otherwise noted.

Other product and company names mentioned herein may be the trademarks of their respective
owners.


Program Manager: Steve Merrill
Instructional Designers: Sangeeta Nair (NIIT), Vijayalakshmi Narayanaswamy (NIIT)
Subject Matter Experts: Andy Olsen (QA Training), Andy Longshaw (Content Masters)
Content Lead: Janet Robinson
Graphic Artist: Scott Serna (Creative Assets)
Media Management: David Mahlmann
Media Production: Dean Connolly (Art Source), Timothy Demmon (:timebomb Media)
Editing Manager: Jennifer Linn
Editor: Dennis Rae (Wasser)
Production Manager: Miracle Davis
Print Coordinator: Marlene Lambert (Online Training Solutions, Inc)
Build Manager: Julie Challenger
Build Coordinator: Jenny Boe
Test Lead: Eric Myers
Manufacturing Manager: John Williams
Group Product Manager: Steve Elston

Module 5: Embedding XML Data in HTML iii


Instructor Notes
This module deals with XML data islands. The module describes the benefits of
embedding XML data in an HTML page, and then outlines how the XML data
island is exposed as an ADO recordset.
The module then describes how to use data binding so that the contents of the
XML data island can be displayed in data-consuming HTML elements. The
module describes both tabular binding (where the entire contents of the
recordset are displayed at the same time in a table) and current-record data
binding (where only the current record in the recordset is displayed).
Some students may already be familiar with the concept of data binding in
Dynamic HTML, but be aware that this might be an entirely new concept for
other students.
The module also describes how to write script to access an XML data island via
its exposed ADO recordset. This allows more flexibility in how you access the
data, but obviously requires more coding.
After completing this module, students will be able to:
!
Describe the nature of a data island.
!
Describe how to use Data Source Objects (DSO) to display XML data
islands in an HTML page.
!
Create an XML data island in an HTML file.
!
Bind XML data to HTML elements.

Materials and Preparation
This section provides you with the required materials and preparation tasks that
you need to teach this module.
Required Materials
To teach this module, you need the following materials:
!
Microsoft PowerPoint
®
file 1905a_05.ppt
!
Module 5, “Embedding XML Data in HTML”
!
Lab 5, “Embedding XML Data in HTML”

Preparation Tasks
To prepare for this module, you should:
!
Read all of the materials for this module.
!
Complete the labs.
Due to the length of the answers to the labs for this course, we were unable
to include them in the Delivery Guide. Please see Appendix A or the
Student CD for the lab answers.
!
Review the documentation on concerning
the use of the Java Data Source Object in Microsoft Internet Explorer 4, for
background information.

Presentation:
120 Minutes

Lab:
60 Minutes
iv Module 5: Embedding XML Data in HTML


Module Strategy
Use the following strategies to present this module:
!
Using Data in Web Browsers
The first part of this module describes various ways in which recordset data
can be delivered from a Web server to a browser, for example, Remote Data
Objects (RDO). Concentrate on XML issues, for instance, what an XML
data island is and why you would use one.
Internet Explorer 4 supports XML data islands through use of a Java applet.
It is worthwhile to mention this briefly because some students might still be
using Internet Explorer 4, but impress on students that the Internet Explorer
5 DSO is written in Microsoft Visual C++
®
and is faster and recommended.
The Internet Explorer 5 notation for an XML data island uses the <XML>
tag. A common misconception is that <XML> is an XML tag, but it isn’t —
it is a special HTML tag that introduces an XML data island.
!
Data Binding
Data binding is not unique to XML, so some students might already be
familiar with the idea. For others, take time to explain the concept of data-
consuming HTML elements first, before describing how it works with
XML.
Data binding is a simple way of displaying XML data in HTML elements. It

works best if the XML data is symmetric (that is, each element has the same
number and arrangement of child elements). Emphasize that data binding is
not well suited for irregular XML data. Explain that the problem stems from
the inability to elegantly represent irregular XML data in a recordset.
(Recordsets are inherently regular and rectangular in shape.)
Take time to explain the repeated elements example (multiple <author>
elements per <book>). The $Text notation is the generic way of accessing
the text in an element (and all its child elements).
Some students are also baffled by the issue of attributes in an XML data
island. Be prepared to spend some time on this issue.
!
Manipulating the Data Source
The key point in this section is that an XML data island is exposed as an
ADO recordset. After you accept this basic premise, you can effectively
ignore the fact that the data came from an XML data island, and simply treat
it as an ADO recordset.
However, there are certain ADO properties, methods, and events that are not
available because the XML DSO uses the ADO Simple provider. For
example, you cannot use the ADO sort capabilities. The way to achieve
sorting is to associate a style sheet with the XML data island and sort the
data by using this style sheet.
!
Lab 5: Embedding XML Data in HTML
This is a fairly straightforward lab in which students create an ASP page to
deliver an HTML page (with an enclosed XML data island) to the browser.
The XML data island contains details about a single book. An HTML table
is bound to the XML data island in order to display the data in tabular
format. The issue of repeating elements must be addressed because a book
can potentially have many authors.

Module 5: Embedding XML Data in HTML 1


#
##
#

Overview

!
Using Data in Web Browsers
!
Data Binding
!
Manipulating the Data Source
!
Lab 5: Embedding XML Data in HTML
!
Review



This module uses Microsoft
®
Internet Explorer as an XML processor. It
refers to the W3C XML recommendation released on 10 February 1998.

Internet Explorer version 4.0 introduced support for client-side Data Source
Objects (DSO), which allow data binding between HTML elements and any
XML content embedded in a page. Internet Explorer version 5.0 has a built-in

DSO component that handles the process seamlessly.After completing this
module, you will be able to:
!
Describe the nature of a data island.
!
Describe how to use Data Source Objects to display XML data islands in an
HTML page.
!
Create an XML data island in an HTML file.
!
Bind XML data to HTML elements.

Slide Objective
To provide an overview of
the module topics and
objectives.
Lead-in
In this module, you will
create XML data islands
inside an HTML document.
You will then bind the XML
content to HTML elements
by using DSO and the
dynamic data-binding
capabilities of Internet
Explorer.
Note
2 Module 5: Embedding XML Data in HTML

#
##
#

Using Data in Web Browsers
!
Delivering Data from the Web Server
!
Using Client-Side Data Source Objects (DSO)
!
Presentation vs. Data
!
Internet Explorer 4.0 Approach: Using a Java Applet
!
Internet Explorer 5.0 Approach: Using Data Islands
!
Embedding vs. Referencing an XML DSO


In this section, you will learn about some of the methods used for data access
on the Web. You will also learn how XML, Data Source Objects, and DHTML
data binding simplify data access and presentation on the Web.
Slide Objective
To introduce the concept of
data access and data-aware
Web pages.
Lead-in
Data access is now an
integral part of Web sites
and their services. It is the

foundation on which e-
commerce is built.
Module 5: Embedding XML Data in HTML 3


Delivering Data from the Web Server
!
Getting data down to browsers
Database
CGI, Perl, ASP,
VBScript,
JavaScript
Web server
HTML
Browser


Many Web sites include data content that is extracted from databases or data
files. Extracting this data is essential for Web developers, especially in the case
of e-commerce sites, where data is mainly stored in databases.
The typical method of extracting data is to have a script, which runs on the Web
server, that runs an SQL query against the database and then reformats the
resulting data into HTML for display in a browser.
Therefore, getting data from a database and presenting it to the client involves
the following steps: reading data from the database by using ActiveX
®
Data
Objects (ADO), converting the data into an appropriate HTML format, and
sending the HTML data to the browser.
Slide Objective

To provide an overview of
how data is presently
accessed over the Web.
Lead-in
Most Web applications
manipulate some form of
data that is located in a
database. This data must be
displayed to the user in the
HTML format.
4 Module 5: Embedding XML Data in HTML


Reading data from the database by using ADO
The following code is an example of how to read records from the database by
using ADO in an ASP page:
<% 'Create the component instance
Dim cnBooks
Set cnBooks = Server.CreateObject("ADODB.Connection")

'Open the connection
cnBooks.Open "Provider=SQLOLEDB;" & _
"Data Source=ServerName;" & _
"Initial Catalog=LitWareBooks;" & _
"User Id=MyUserName;" & _
"Password=MyPassword;" %>

'Prepare an SQL SELECT statement to execute
Dim sqlQuery
sqlQuery = "SELECT Name FROM Customers"

'get the list of customers from the connection object
Dim rsCustomerList
Set rsCustomerList = cnBooks.Execute(sqlQuery)
%>

Formatting records into HTML
The following code is an example of how to format records into an HTML
table:
<!-- Populate a table with the results -->
<TABLE COLSPAN=8 CELLPADDING=5 BORDER=0>
<TR>
<TD ALIGN=CENTER>
<FONT STYLE="ARIAL" SIZE=2>Name</FONT>
</TD>
</TR>

<!-- Process rows in result set -->
<% Do While Not rsCustomerList.EOF %>
<TR>
<TD ALIGN=LEFT>
<FONT STYLE="ARIAL" SIZE=2>
<%= rsCustomerList("Name").Value %>
</FONT>
</TD>
</TR>
<% rsCustomerList.MoveNext %>
<% Loop %>
</TABLE>

Module 5: Embedding XML Data in HTML 5


Using Client-Side Data Source Objects (DSO)
!
New COM components in IIS 3.0 & Internet Explorer 4.0
!
Send data via HTTP or DCOM
HTTP/DCOM
DSO
Database
ADO
CGI, Perl, ASP,
VBScript,
JavaScript
Web server
HTML
Browser
ADO


Microsoft’s ActiveX Data Objects (ADO) technology provides excellent data
access from a Web browser.
New COM components in Internet Explorer 4.0
The concept of the Data Source Object (DSO) was introduced in Internet
Explorer 4.0. In the Internet Explorer 4.0 version, DSO simply supplied data to
a Web page by using ActiveX components that ran on both the Web server and
the client browser. These ActiveX components took the output of the SQL
query (which may be an ADO Recordset object) and packaged it so that it
could be transported to the Web browser by using HTTP.

Send data via HTTP or DCOM
The ActiveX components on the browser can then re-create the ADO
Recordset object and allow client-side scripting to manipulate the recordset
directly. Some simple display and update operations can even be done without
writing any client-side script at all. This is achieved through HTML data-
binding extensions that allow the rows and fields of the recordset to be
displayed in HTML elements. The data, which populates the table rows, must
be displayed in HTML elements that support data binding, such as SPAN or
DIV elements.
Slide Objective
To discuss some of the
preferred Microsoft
technologies used for data
access over the Web.
Lead-in
Microsoft’s ADO technology
provides excellent data
access from a Web browser.
The associated Data Source
Object mechanism provides
the basis for XML data-
binding support.
6 Module 5: Embedding XML Data in HTML


Presentation vs. Data
HTML
!
HTML intermingles data with its presentation
!

XML separates data from its presentation
!
Extensions to existing DSO techniques allow
embedding of XML within HTML
XML
CGI, Perl, ASP,
VBScript,
JavaScript
Web serverBrowser
XML
Database


Multitier systems depend on many sound principles, one of which is the
separation of services. For the purpose of scalability, deployment, and scope,
multitier systems keep business rules, data, and presentation logic as
independent as possible.
In HTML, data in tables and form elements intermingles with the style and
other presentation details. This makes it difficult to manage intelligent
searching and other tasks that require pure data.
Because XML is raw data, it has the advantage of displaying its structure to the
Web browser without including source or presentation information.
Internet Explorer 5.0 provides an extension to the previous DSO techniques.
Internet Explorer 5.0 provides all of the features of DSO that were in Internet
Explorer 4.0, such as data binding through collaborating ActiveX objects on the
client and Web server. The additional feature is the support for embedded XML
documents called data islands. Internet Explorer 4.0 provides a similar feature
that uses a Java applet.
Both Java applets and data islands allow the client browser to manipulate data
without making calls back to the Web server. The important difference between

the two techniques, however, is that in the data-island technique the client
receives XML data that has some structure and semantics, rather than plain
HTML that only contains the presentation information.
Slide Objective
To provide an overview of
how XML uses DSO to
separate presentation and
data.
Lead-in
The multitier system
encourages the division of
process and the isolation of
business practices. XML
can help separate data from
presentation, both of which
currently are intermingled in
the GUI.
Module 5: Embedding XML Data in HTML 7


Internet Explorer 4.0 Approach: Using a Java Applet
!
Internet Explorer 4.0 introduced a Java applet for
XML DSOs
!
Use the <APPLET> HTML element
<APPLET CODE="com.ms.xml.dso.XMLDSO.class"
ID="xmldso" WIDTH=0 HEIGHT=0 MAYSCRIPT=true>
<PARAM NAME="URL" VALUE="myXML.xml">
</APPLET>

<APPLET CODE="com.ms.xml.dso.XMLDSO.class"
ID="xmldso" WIDTH=0 HEIGHT=0 MAYSCRIPT=true>
<PARAM NAME="URL" VALUE="myXML.xml">
</APPLET>


Internet Explorer 4.0 implements XML DSOs by using a Java-based applet,
rather than with ActiveX components used for implementing RDS. The Java
applet also works in Internet Explorer 5.0. Therefore, in an intranet that uses a
mixture of Internet Explorer 4.0 and 5.0 browsers, this method provides a
potential solution for data access.

This is not a recommended procedure. We have covered this only for the
sake of completeness.

Using the <APPLET> HTML element
The following HTML tag instantiates the DSO Java applet:
<APPLET CODE="com.ms.xml.dso.XMLDSO.class"
ID="xmldso" WIDTH=0 HEIGHT=0 MAYSCRIPT=TRUE>
<PARAM NAME="URL" VALUE="myXML.xml">
</APPLET>

The CODE attribute points to the Microsoft DSO Java applet. The
MAYSCRIPT attribute allows client-side script to manipulate the underlying
recordset. The PARAM tag contains the URL for the source XML file,
myXML.xml.

The Java XML applet is available at At
this site, type the search string XML parser.

Slide Objective
To describe how Internet
Explorer 4.0 supports DSO
and XML documents by
using Java-based applets.
Lead-in
The dynamic data binding of
Internet Explorer 4.0 can be
extended to use XML data
sources as well as
RDS/ADO through ActiveX
components.
Note
Note
8 Module 5: Embedding XML Data in HTML


Internet Explorer 5.0 Approach: Using Data Islands
!
DSO Approach
$
Treats XML as a DSO
$
Can use multiple data islands in the same HTML file
$
Handles symmetric data
$
Requires IDs for each data island
<HTML>
<XML ID="xmldso">

<?xml version="1.0"?>
<booklist>
...
</booklist>
</XML>
<HTML>
<XML ID="xmldso">
<?xml version="1.0"?>
<booklist>
...
</booklist>
</XML>


The DSO approach in Internet Explorer 5.0 places the data — either the ADO
recordset or the XML data — into a data island. This approach offers the
advantage of having the actual XML tags appear within the HTML document
itself, rather than within the URL attachment used in the Internet Explorer 4.0
Java applet. Thus, the data is referenced directly from within the HTML
document.
The data island is defined between the <XML> and </XML> HTML tags.
These tags are Internet Explorer 5.0 extensions.
The following example defines an XML data island named xmldso in an HTML
document:
<HTML>
<XML ID="xmldso">
<?xml version="1.0"?>
<booklist>
…
</booklist>

</XML>

There is nothing to prevent you from including more than one data island in a
page. As long as each data island has a unique ID, the data can be referenced,
and each DSO will be independent.
Slide Objective
To describe how Internet
Explorer 5.0 supports built-
in DSO access by using
data islands.
Lead-in
Although the Java applet
supported by Internet
Explorer 4.0 is a simple
mechanism for supporting
XML-based data, the
Internet Explorer 5.0 support
mechanisms provide many
additional features.
Module 5: Embedding XML Data in HTML 9


Embedding vs. Referencing an XML DSO
!
An XML data island can be embedded in an
HTML document
!
Or referenced from the HTML document
<XML ID="xmldso">
<?xml version="1.0"?>

<someXML>
…
</XML>
<XML ID="xmldso">
<?xml version="1.0"?>
<someXML>
…
</XML>
<XML ID="xmldso" SRC="myXML.xml">
</XML>
<XML ID="xmldso" SRC="myXML.xml">
</XML>


An XML data island can be specified in two different ways: explicitly, by
embedding the XML directly in the HTML document, and implicitly, by
referencing an XML document from the HTML document.
Embedding an XML data island
You can embed XML tags directly in an HTML document by using the
<XML> and </XML> tags as shown in the following code:
<XML ID="xmldso">
<?xml version="1.0"?>
someXML
…
</XML>

Referencing an XML data island
You can also reference an external file that contains XML content by using the
XML tag as shown in the following sample code:
<XML ID="xmldso" SRC="myXML.xml"></XML>

The SRC attribute specifies the required XML file.
Slide Objective
To introduce the data island
syntax.
Lead-in
Data islands can be loaded
explicitly (from an external
file) or implicitly (inline).
10 Module 5: Embedding XML Data in HTML


#
##
#

Data Binding
!
Mapping XML Data to an ADO Recordset
!
Binding Data Islands to DHTML Elements
!
Demonstration: Binding HTML Elements to XML Data
!
Displaying Data in HTML Tables
!
Accessing Repeating Elements
!
Accessing XML Attributes
!

Practice: Binding HTML Elements to XML Data


Data access from the client is very important on a Web site. With XML data
islands, the server can deliver the XML data to the client in a very usable form.
Some of the techniques used in Internet Explorer 4.0 have been modified to
work with data islands on the client.
When an XML data island is embedded or referenced in an HTML document,
you can bind HTML elements directly to the data island. For example, you can
bind an HTML table to an XML data island and define a row element that binds
each column of the table to a different element in the island. This is known as
data binding.
For more information on data binding, search for “Binding the XML Data
Source Object to Data” in the MSDN
™
online library at
/>.
Slide Objective
To introduce the concept of
client-side data binding.
Lead-in
When an XML data island
appears in an HTML page,
the HTML page can access
and manipulate the XML
data in numerous ways.
Module 5: Embedding XML Data in HTML 11


Mapping XML Data to an ADO Recordset

!
XML Data
!
ADO Recordset
<book>
<title>Straight Talk About Computers</title>
<author>Lars Peterson</author>
<price>19.99</price>
</book>
<book>
<title>The Busy Executive’s Database Guide</title>
<author>Mayumi Ohno</author>
<price>15.99</price>
</book>
<book>
<title>Straight Talk About Computers</title>
<author>Lars Peterson</author>
<price>19.99</price>
</book>
<book>
<title>The Busy Executive’s Database Guide</title>
<author>Mayumi Ohno</author>
<price>15.99</price>
</book>
Title
Straight Talk About Computers
The Busy Executive’s Database Guide
Author
Lars Peterson
Mayumi Ohno

Price
19.99
15.99


The XML data within an XML data island is treated as an ADO recordset. Each
main element maps to a record in the ADO recordset, and each child element
maps to a field in that record.
For example, if you have the following XML data in a data island:
<XML ID="xmldso">
<?xml version="1.0"?>
<booklist>
<book>
<title>Straight Talk About Computers</title>
<author>Lars Peterson</author>
<price>19.99</price>
</book>
<book>
<title>The Busy Executive’s Database Guide</title>
<author>Mayumi Ohno</author>
<price>15.99</price>
</book>
</booklist>
</XML>

It would be mapped to the following ADO recordset.
title author price

Straight Talk About Computers Lars Peterson 19.99
The Busy Executive’s Database Guide Mayumi Ohno 15.99

This mapping works best with symmetric XML data. When the data is
symmetric, the DSO ActiveX components can make assumptions about the
structure of the data, for example, that the data is made of rows, with each row
containing the same number of fields.
Slide Objective
To explain how the XML
data in a data island is
treated as an ADO
recordset.
Lead-in
The XML data within an
XML data island is mapped
to an ADO recordset.
12 Module 5: Embedding XML Data in HTML


Binding Data Islands to DHTML Elements
!
Set DSO-specific attributes on HTML elements
$
DATASRC= "#theID" to specify the DSO source
$
DATAFLD= "theField" to retrieve field data
<DIV ID=title DATASRC="#xmldso" DATAFLD="title">
</DIV>
<DIV ID=price DATASRC="#xmldso" DATAFLD="price">
</DIV>
<DIV ID=title DATASRC="#xmldso" DATAFLD="title">
</DIV>

<DIV ID=price DATASRC="#xmldso" DATAFLD="price">
</DIV>


Now that the XML document has been included in the HTML, either by
embedding or referencing, it can be linked to HTML elements to display the
underlying recordset by using DSO.
Using DSO-specific attributes
Individual fields are bound to HTML elements by using their DATASRC and
DATAFLD attributes.
!
The DATASRC attribute specifies the ID of the XML data island.
There must be a number sign (#) character in front of the source name
following the DATASRC attribute.
!
The DATAFLD attribute specifies the field from which data should be
retrieved.
The following HTML binds two DIV elements to the title and price
elements in the xmldso XML data island:
<DIV ID=title DATASRC=#
xmldso
DATAFLD="title"></DIV>
<DIV ID=price DATASRC=#
xmldso
DATAFLD="price"></DIV>


Only a subset of HTML elements can use this DSO binding mechanism. The set
of elements that support DSO is:
A, APPLET, BUTTON, DIV, FRAME, IFRAME, IMG, INPUT (where

TYPE=CHECKBOX, HIDDEN, LABEL, PASSWORD, RADIO, TEXT),
LABEL, MARQUEE, SELECT, SPAN, TABLE, and TEXTAREA.
!
To bind a DSO element to an HTML element
1. Identify the DSO item by setting the ID attribute of the XML element.
2. Set the DATASRC and DATAFLD attributes of the HTML element.

Slide Objective
To introduce the various
extensions to HTML
elements that are used to
support data binding.
Lead-in
Internet Explorer 4 allowed
data binding through RDS
and ActiveX components.
This method can still be
used to bind DHTML
elements to XML data.
Module 5: Embedding XML Data in HTML 13


Demonstration: Binding HTML Elements to XML Data


In this demonstration, you will bind an existing XML data island to some
HTML elements.
Slide Objective
To demonstrate how HTML
elements are bound to an

XML document.
Lead-in
DHTML has always
supported client-side
recordsets via extensions to
HTML elements. This has
been extended in Internet
Explorer 5.0 in order to
support XML data.
Delivery Tip
1. In Notepad or Visual
InterDev, open the page
BookBinding.htm from the
folder
\InetPub\WWWRoot\1905\D
emoCode\Mod05.
2. Move to the XML data
island and note the ID.
3. Move to the two
LABEL

elements at the bottom of
the page, noting that they
have static values.
4. Add DATASRC and
DATAFLD attributes with
the appropriate values to the
LABEL elements:
DATASRC=”#xmldso”
DATAFLD = “title” and

DATAFLD = “price”
5. View the page in the
browser and check that the
LABEL
s have been
populated with the
appropriate field values for
the first row.
14 Module 5: Embedding XML Data in HTML


Displaying Data in HTML Tables
!
Use a TABLE to display multiple rows of data
$
<TABLE DATASRC= "#theID">
!
For each TD, include an HTML element and set the
DATAFLD attribute
!
Set the DATAPAGESIZE attribute for long result sets
<TABLE DATASRC="#xmldso">
<TR><TD><DIV DATAFLD="title"></DIV></TD>
<TD><DIV DATAFLD="isbn"></DIV></TD>
</TR>
</TABLE>
<TABLE DATASRC="#xmldso">
<TR><TD><DIV DATAFLD="title"></DIV></TD>
<TD><DIV DATAFLD="isbn"></DIV></TD>
</TR>

</TABLE>


XML data can also be bound to an HTML TABLE element, where the data-
binding agent automatically populates multiple rows.
Given the following XML data island in an HTML document:
<XML ID="xmldso">
<?xml version="1.0"?>
<booklist>
<book>
<title>a_book_title</title>
<isbn>a_book_isbn</isbn>
</book>
<book>
<title>another_book_title</title>
<isbn>another_book_isbn</isbn>
</book>
</booklist>
</XML>

Slide Objective
To describe the data
repetition-binding agent,
which is capable of
populating a table with
multiple rows.
Lead-in
You just learned how to bind
an HTML element to XML
data. This technique,

however, only supports
single-row population.
Delivery Tip
Because the TD tag doesn’t
have a DATAFLD attribute,
you must use a DIV or
SPAN element inside the
TD tags.
Module 5: Embedding XML Data in HTML 15


The following example shows how to bind an HTML TABLE element to the
XML data island named xmldso:
<TABLE BORDER=1 DATASRC="#xmldso">
<THEAD>
<TR><TH>Title</TH>
<TH>ISBN</TH></TR>
</THEAD>
<TBODY>
<TR><TD><DIV DATAFLD="title"></DIV></TD>
<TD><DIV DATAFLD="isbn"></DIV></TD></TR>
</TBODY>
</TABLE>

The HTML TABLE element has its DATASRC attribute set to #xmldso in
order to bind to the data in the XML data island. The table is defined with two
sections:
!
The first section, THEAD, defines the table column headings.
!

The second section, TBODY, is where the data binding takes place. The
elements in this section, in this case one row, will be repeated for each book
in the data island. Each book will be displayed in its own row, with the book
title displayed in the first column (<TD> elements) and the book ISBN
displayed in the second column.

The DSO and the browser collaborate, using repetition-binding agents, to insert
a new row in the table for each row in the XML data source.
The table resulting from the preceding HTML example would look like the
following illustration when opened in Internet Explorer.

Paging the DSO data
For database calls that bring back large result sets, DSO allows the data from
the server to be displayed in pages. The size of a page can be set through the
DATAPAGESIZE attribute in the HTML TABLE element.
The following example shows how an HTML TABLE can bind to a DSO and
limit the page size to 10 records at a time:
<TABLE DATASRC="#xmldso" DATAPAGESIZE=10>

16 Module 5: Embedding XML Data in HTML


Accessing Repeating Elements
!
Repeating XML data
!
Nested TABLE element
<book>
<title>Gourmet Microwave</title>
<isbn>72-80081-082</isbn>

<author>Charlotte Cooper</author>
<author>Shelley Burke</author>
<author>Regina Murphy</author>
</book>
<book>
<title>Gourmet Microwave</title>
<isbn>72-80081-082</isbn>
<author>Charlotte Cooper</author>
<author>Shelley Burke</author>
<author>Regina Murphy</author>
</book>
<TD>
<TABLE DATASRC="#xmldso" DATAFLD="author">
<TR><TD><SPAN DATAFLD="$Text"></SPAN></TD></TR>
</TABLE>
</TD>
<TD>
<TABLE DATASRC="#xmldso" DATAFLD="author">
<TR><TD><SPAN DATAFLD="$Text"></SPAN></TD></TR>
</TABLE>
</TD>


XML data is hierarchical in nature and doesn’t always fit into a tabular format.
For example, consider the booklist XML data island below:
<XML ID="xmldso">
<booklist>
<book>
<title>Straight Talk About Computers</title>
<isbn>72-80088-005</isbn>

<author>Dean Straight</author>
</book>
<book>
<title>Gourmet Microwave</title>
<isbn>72-80081-082</isbn>
<author>Charlotte Cooper</author>
<author>Shelley Burke</author>
<author>Regina Murphy</author>
</book>
</booklist>
</XML>

This XML data island can be bound to an HTML table, with each book being
displayed in a separate row in the table. This is fine as long as each book
element has one child element or attribute for each column in the table.
However, a book might have multiple authors. Because one of the columns in
the table can be bound to the <author> element of the book, it is difficult to
display more than one author. This is a common occurrence when mapping
hierarchical XML data to a tabular display format.
Slide Objective
To describe how to display
repeating XML elements in
nested tables.
Lead-in
In order to display repeating
XML elements, you must
first create nested tables.
Module 5: Embedding XML Data in HTML 17

The solution is to use nested HTML TABLE elements. The outer TABLE
element takes care of the basic one-book-per-row issue. The inner TABLE
element takes care of the issue of multiple authors for each book.
<TABLE BORDER=1 DATASRC="#xmldso">
<THEAD><TR><TH>Title</TH>
<TH>ISBN</TH>
<TH>Author</TH></TR></THEAD>
<TBODY>
<TR><TD><DIV DATAFLD="title"></DIV></TD>
<TD><DIV DATAFLD="isbn"></DIV></TD>
<TD>
<TABLE BORDER=0 DATASRC="#xmldso" DATAFLD="author">
<TR><TD><SPAN DATAFLD="$Text"></SPAN></TD></TR>
</TABLE>
</TD>
</TR></TBODY>
</TABLE>

On opening the HTML document in Internet Explorer, the document should
look like the following illustration.

!
To display nested XML data
1. Create an outer TABLE element and set the DATASRC attribute to the ID
of the XML data island.
<TABLE DATASRC="#xmldso">

2. Create TD elements for all XML data that is unique, setting the DATAFLD
attributes to the field to be displayed.
<TD><SPAN DATAFLD="title"></SPAN></TD>

3. Create a nested table for repeating data. Set the DATASRC attribute to the
XML data island, and set the DATAFLD attribute to the XML field of the
repeated data.
<TABLE DATASRC="#xmldso" DATAFLD="author">

This TABLE element is bound specifically to the <author> element in the
data island. This allows the browser and the DSO to collaborate, using
repetition-binding agents, to insert a new row in the (nested) table for each
author.
18 Module 5: Embedding XML Data in HTML


4. Create one row with one column in the table and set the DATAFLD
attribute to “$Text”. This value has the effect of removing all text within the
author element, including all its nested textual elements:
<TR><TD><SPAN DATAFLD="$Text"></SPAN></TD></TR>


DSOs work well for ADO recordset data because the data is symmetric. The
symmetric nature of the data allows the DSO ActiveX components to make
assumptions about the structure of the data, for example, that the data would be
made of rows, with each row containing the same number of fields. This is not
generally true of XML data, which may have a complex, asymmetric structure.
Therefore, XML DSO works best for symmetric XML data. When the XML
data is complex, it is better to use the Document Object Model (DOM) for data
manipulation. You will learn more about the DOM in Module 6, “Manipulating
XML Data on the Client Using DOM.”

Delivery Tip

The value “$Text” yields all
the nested elements under a
specific element.
For more information on
$Text, point the students to
the section “Using XML on
the Server” in the XML
Developers Guide.
Module 5: Embedding XML Data in HTML 19


Accessing XML Attributes
!
XML attributes are treated as child elements
!
Bind the attribute to a column
<book isbn="9-001-122-12">
<title>DB Busy Executive</title>
</book>
<book isbn="9-001-122-12">
<title>DB Busy Executive</title>
</book>
<TABLE DATASRC="#xmldso">
<TR>
<TD><SPAN DATAFLD="isbn"></SPAN></TD>
<TD><SPAN DATAFLD="title"></SPAN></TD>
</TR>
</TABLE>
<TABLE DATASRC="#xmldso">
<TR>

<TD><SPAN DATAFLD="isbn"></SPAN></TD>
<TD><SPAN DATAFLD="title"></SPAN></TD>
</TR>
</TABLE>


Accessing attributes of XML elements is simplified in DSO. Because DSO
makes attributes into child elements, all you need to do is treat an attribute as a
simple element and bind it accordingly. For example, consider the following
data island placed in an HTML file:
<booklist>
<book isbn="9-001-122-12">
<title>DB Busy Executive</title>
<author>Mayumi Ohno</author>
<price>19.95</price>
</book>
</booklist>

Attributes and elements are treated equally by DSO. Therefore, binding the
book
attributes and elements is performed as follows:
<TD><SPAN DATAFLD="isbn"></SPAN></TD>
<TD><SPAN DATAFLD="title"></SPAN></TD>
<TD><SPAN DATAFLD="author"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD>


If an element and attribute have the same name, use “!” to access the
element. For example, if the book element had an attribute named author that
contained the name of the main author, and child elements named author for

names of coauthors, you would use the following code to bind the author
attribute element:
'Binding the author attribute
<TD><SPAN DATAFLD="author"></SPAN></TD>
'Binding the author element
<TD><SPAN DATAFLD="!author"></SPAN></TD>


Slide Objective
To illustrate how XML
attributes are accessed in
DSO.
Lead-in
So far we have seen how
XML elements and child
elements can be bound to
HTML elements. We should
also be able to access an
element’s attribute values.
Delivery Tip
Remember to tell students
that in this code sample,
isbn is an attribute and not
an element.
Note
20 Module 5: Embedding XML Data in HTML


Practice: Binding HTML Elements to XML Data

In this practice, you will create an HTML file that displays data in an XML data
island by using DSO data binding.
!
Display an XML data island in an HTML table
1. Create a new file named binding.htm in the folder
\InetPub\WWWRoot\1905\Practices, and then add the HTML and BODY
tags as follows:
<HTML>
<BODY>

</BODY>
</HTML>

2. In the BODY of the binding.htm file, add a data island for the XML data
located in the Books.xml file.
Books.xml is already located in the folder
\InetPub\WWWRoot\1905\Practices.
<XML ID="xmldso" SRC="Books.xml"></XML>

Slide Objective
To prepare students for a
simple practice.
Lead-in
Although the extended
syntax is fairly
straightforward, care must
be taken when binding
elements.
Module 5: Embedding XML Data in HTML 21

3. Create a TABLE template to display the title and price fields of the XML
data.
<TABLE border=2>
<THEAD><TR>
<TD>Title</TD>
<TD>Price</TD>
</TR></THEAD>

<TBODY><TR>
<TD>...data binding for title</TD>
<TD>...data binding for price</TD>
</TR></TBODY>
</TABLE>

4. Bind the table to the XML data island by adding the DATASRC attribute to
the TABLE tag.
<TABLE border=2 DATASRC="#xmldso">

5. Bind the title and price columns to the corresponding fields in the XML data
island.
<TD><SPAN DATAFLD="title"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD>

6. Open the file binding.htm in the browser to view the results. The result
displayed should look like the following.