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

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.. Lab 5: Embedding XML Data in HTML This

Contents

Overview 1

Review 47

Module 5: Embedding XML Data in HTML

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

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 http://msdn.microsoft.com/xml concerning the use of the Java Data Source Object in Microsoft Internet Explorer 4, for background information

Presentation:

120 Minutes

Lab:

60 Minutes

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

# Overview

! Using Data in Web Browsers

! Data Binding

! Manipulating the Data Source

! Lab 5: Embedding XML Data in HTML

! 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

In this module, you will

create XML data islands

# 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

Delivering Data from the Web Server

! Getting data down to browsers

Database

CGI, Perl, ASP, VBScript, JavaScriptWeb 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

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>

<! Process rows in result set >

<% Do While Not rsCustomerList.EOF %>

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

DatabaseADO

CGI, Perl, ASP, VBScript, JavaScriptWeb server

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

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, JavaScriptWeb server Browser

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

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 http://www.microsoft.com/java 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

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

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:

</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 usbuilt-ing

mechanism for supporting

XML-based data, the

Internet Explorer 5.0 support

mechanisms provide many

additional features

Embedding vs Referencing an XML DSO

! An XML data island can be embedded in an HTML document

! Or referenced 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:

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:

Data islands can be loaded

explicitly (from an external

file) or implicitly (inline)

# 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

http://msdn.microsoft.com/library

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

Mapping XML Data to an ADO Recordset

Price

19.9915.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:

It would be mapped to the following ADO recordset

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

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">

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

Demonstration: Binding HTML Elements to XML Data

In this demonstration, you will bind an existing XML data island to some HTML elements

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

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

LABELs have been

populated with the

appropriate field values for

the first row

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

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

The following example shows how to bind an HTML TABLE element to the XML data island named xmldso:

<TABLE BORDER=1 DATASRC="#xmldso">

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>

Accessing Repeating Elements

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

In order to display repeating

XML elements, you must

first create nested tables

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">

! 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

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

Accessing XML Attributes

! XML attributes are treated as child elements

! Bind the attribute to a column

'Binding the author attribute

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

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:

straightforward, care must

be taken when binding

elements

3 Create a TABLE template to display the title and price fields of the XML data

<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

! Display the author field using a nested table

1 Create another column in the THEAD section of the table for the Author heading

2 Create another column in the TBODY section of the table and insert a

nested table in the TD tag Set the DATASRC attribute of the table to the XML data island, and then set the DATAFLD attribute to “author”

<TD>

<TABLE DATASRC="#xmldso" DATAFLD="author">

</TABLE>

</TD>

3 Create one row with one column in the nested table Set the DATAFLD

attribute of the column to “$Text”

<TR><TD><SPAN DATAFLD="$Text"></SPAN></TD></TR>

4 Open the file binding.htm in the browser to view the results

Your completed code should look like the following:

<TABLE border=2 width="100%" DATASRC=#xmldso>

</TD>

</TR>

</TBODY>

</TABLE>