Module 2: Overview of XML Technologies

XML Technologies: The Big Picture The purpose of this section is to introduce some XML terminologies — style sheets, data binding, the Document Object Model DOM, and validation!. We will

Contents

Overview 1

XML Technologies: The Big Picture 2

Viewing XML with Style Sheets 7

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, PowerPoint, Visual C++, Windows, and Windows NT 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 provides students with an overview of the principal technologies associated with XML The aim is to provide students with the big picture so that they realize how all the pieces of the XML jigsaw fit together

Apart from cascading style sheets (CSS) and Document Type Definitions (DTDs), all the topics introduced in this module are revisited in greater depth in subsequent modules Therefore, there is no need to discuss topics exhaustively here All that students need at the moment is an appreciation of what’s possible, and an awareness of some of the terminology such as style sheets, data binding, DOM, and validation

After completing this module, students will be able to:

! Explain the use of style sheets

! Explain the use of binding XML data to HTML

! Describe the Document Object Model (DOM)

! Explain the need for validation

! Describe the differences between DTDs and XML schemas

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_02.ppt

! Module 2, “Overview of XML Technologies”

! Animation, “Life Cycle of an XML Document,” in file 1905a_02A005.avi

Preparation Tasks

To prepare for this module, you should:

! Read all of the materials for this module

Presentation:

180 Minutes

Lab:

00 Minutes

Module Strategy

Use the following strategies to present this module:

! XML Technologies: The Big Picture The purpose of this section is to introduce some XML terminologies — style sheets, data binding, the Document Object Model (DOM), and validation There is an animation that shows simplified examples of each topic; all you need to do is briefly introduce the terms before you play the animation

! Viewing XML with Style Sheets Begin by introducing cascading style sheets (CSS) as they relate to HTML (Some students may already be familiar with this.) Describe how CSS style sheets can be applied to XML documents in a similar manner, but make it clear that we are only providing a simple overview of CSS here

Emphasize the limitations of CSS (for example, it doesn’t allow data filtering, reordering, or scripting) Introduce the Extensible Stylesheet Language (XSL) and show the effect of applying different style sheets to an XML document Do not attempt to describe XSL syntax yet; instead, refer students to Module 4: Displaying an XML Document Using XSL

! Binding XML to HTML Discuss the different ways in which a Web server can return information to the browser: HTML, XML, or a combination of both Then discuss the disadvantages of the first two methods: HTML is portable but doesn’t allow the client to manipulate the data intelligently; XML allows the client to process the data, but provides limited means of scripting

Introduce XML data islands as a solution that combines the benefits of HTML and XML Then briefly discuss data binding at a conceptual level

Do not go into the detail; instead, refer students to Module 5: Embedding XML Data in HTML

! Accessing XML with the Document Object Model DOM is a broad subject All students need to know at the moment is that it

is a programming interface to XML data Use the opportunity to describe how XML documents are read into an in-memory tree during parsing Also, compare DOM with other object models that students might be familiar with (for example, Microsoft Excel, ActiveX Data Objects)

In the demonstration, do not dwell on the script that uses the DOM Just discuss the example at a conceptual level and show the effects of running the example in the browser For more details about DOM, refer students to Module 6: Manipulating XML Data on the Client Using DOM

! Validating XML This section contains three main themes: to describe what validation is and why it’s needed, to provide a brief overview of DTDs, and to introduce XML schemas as the preferred validation technique

This is the only place in the course where DTDs are discussed, but they are covered only briefly Be careful not to dismiss DTDs as irrelevant because they are used widely in the XML community even now However, you also need to make students understand why we are concentrating on XML schemas (for example, technical advantages, the BizTalk factor, and Microsoft’s commitment to XML schemas)

For more details about XML schemas, refer students to Module 8:

Validating XML Data Using Schemas

# Overview

! XML Technologies: The Big Picture

! Viewing XML with Style Sheets

After completing this module, you will be able to:

! Explain the use of style sheets

! Explain the use of data binding XML data to HTML

! Describe the Document Object Model (DOM)

! Explain the need for validation

! Describe the differences between DTDs and XML schemas

In this module, you will learn

about some of the XML

technologies currently in

use

Delivery Tip

This is the only section in

the entire course in which

DTDs will be covered

# XML Technologies: The Big Picture

! Introducing XML Terminology

! Animation: Life Cycle of an XML Document

In this section, you will be introduced to some of the terminology used by the XML community, and see how the various XML technologies fit together

Slide Objective

To provide an overview of

XML technologies and their

roles in the life cycle of an

XML document

Lead-in

Some of the most commonly

used XML terms are

schemas, style sheets,

validation, and the DOM

Introducing XML Terminology

Style sheets

Document Object Model (DOM)

To introduce some of the

terms and technologies

This slide is animated so

that it shows each part of

the illustration in stages

The slide is empty initially

Click the icons to reveal the

following parts of the

illustration:

1 The “XML” text in the

middle of the slide

2 The “style sheet” picture

3 The “data binding”

picture

4 The “DOM” picture

5 The “validation” picture

When this document is loaded into Internet Explorer 5, it is displayed as follows

To make the information more presentable to the user, a style sheet can be applied to the XML document to transform the XML into HTML elements For example, a style sheet can be written that transforms the XML data into an HTML table as follows

There are two ways of defining style sheets for an XML document:

! Cascading style sheets (CSS)

! Extensible Style Language (XSL)

We will introduce both techniques in this module, and then cover XSL in detail

in Module 4, “Displaying an XML Document Using XSL.”

Data binding

If you want the browser to display additional information, or to have dynamic elements such as buttons and text fields, you can embed an XML document within an HTML page This is known as an XML data island It is even possible to bind HTML elements directly to the data in an XML data island This is known as data binding

For example, you can define an HTML page that contains an XML data island representing a booklist, plus various HTML labels to display the details for each book in the list You can bind each label to a separate element or attribute

in the XML data island so that the book details are displayed in the browser You can also define HTML buttons to let the user navigate through the books in the data island For example, you can provide a Next button that causes the next book to be displayed in the HTML labels, and a Previous button to move to the previous book

We will show the effects of data binding in this module, and then discuss data binding in greater detail in Module 5, “Embedding XML Data in HTML.”

The Document Object Model (DOM)

The Document Object Model (DOM) defines a programming interface that allows you to write programs or script to read, modify, extend, or delete data in

an XML document

For example, you can write script that runs on the Web server and uses the DOM to create an XML document to send to the browser Alternatively, you can write client-side script that builds an XML document at the client and then submits the XML data to the Web server when appropriate

We will introduce the basic concepts of DOM in this module For more detailed information, refer to Module 6, “Manipulating XML Data on the Client Using DOM.”

Validation

One of the aims of XML is to enable data to be exchanged between applications and organizations in a meaningful and self-describing manner One issue that often arises is the need to validate the content and structure of an XML document to ensure that it contains the elements and attributes you expect

At the time of this writing, there are two ways of performing validation on an XML document:

! Document Type Definitions (DTDs)

! XML schemas

We will introduce both techniques in this module, and then cover XML schemas in more detail in Module 8, “Validating XML Data Using Schemas.”

Animation: Life Cycle of an XML Document

To see an animation on the life cycle of an XML document, run the “Life cycle

of an XML document” media element on the Student CD-ROM

Lead-in

In this animation, you will

see how style sheets, data

binding, the DOM, and

validation all play a role in

the life cycle of an XML

# Viewing XML with Style Sheets

! Introducing Cascading Style Sheets (CSS)

! Using Cascading Style Sheets with XML

! Demonstration: Applying a Cascading Style Sheet

to an XML Document

! XSL Style Sheets for XML

! Applying XSL Style Sheets

! Demonstration: Applying an XSL Style Sheet to an XML Document

! Practice: Attaching Style Sheets to an XML Document

In this section, you will learn how to format XML data

You will learn about cascading style sheets (CSS) and how they are used with XML documents You will also learn about XSL style sheets and how to apply them for formatting XML data

Lead-in

When presenting data to

users, it is most effective

and efficient to present

formatted data

The same is true with XML

Although XML data is

inherently structured, it is

not suitable to display to the

user in its raw form

Instead, the XML data can

be transformed into a more

presentable format such as

HTML, which browsers can

understand and display

properly

Introducing Cascading Style Sheets (CSS)

! Style sheets can be used to define formatting for data

! HTML can be styled by using cascading style sheets

<HEAD>

<STYLE TYPE="text/css">

H1 {font-family:Comic Sans MS; font-size:36pt}

P {font-family:Arial; font-size:16pt; color:red}

H1 {font-family:Comic Sans MS; font-size:36pt}

P {font-family:Arial; font-size:16pt; color:red}

Cascading style sheets (CSS) provide one way of defining the formatting styles

for elements in an HTML document The following example shows how cascading style sheets are used to define formatting rules for <H1> and <P> elements in an HTML document The styles are defined by using a <STYLE> element, which is usually placed in the <HEAD> of the document

<HEAD>

<STYLE TYPE="text/css">

H1 {font-family:Comic Sans MS; font-size:36pt}

P {font-family:Arial; font-size:16pt; color:red}

In the following example, the <STYLE> element contains two entries:

! The first entry defines the style rules for <H1> elements It specifies that

<H1> elements should be displayed in Comic Sans MS, 36pt font style

! The second entry defines the style rules for <P> elements It specifies that

<P> elements should be displayed in Arial, 16pt and red font style

Slide Objective

To introduce the concept of

style sheets and cascading

style sheets in particular

Lead-in

The need to format HTML

data led to the use of

cascading style sheets

Instead of defining the style sheet rules within the HTML document, you can also create a separate css file (for example MyStyles.css) and link the style sheet to the HTML document as follows:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="MyStyles.css">

Using Cascading Style Sheets with XML

! Formatting XML documents with cascading style sheets

! Attaching the style sheet to an XML document

<?xml-stylesheet type="text/css" href="Employees.css"?>

employee {display:block; margin:10px}

name {display:inline; font-family:Comic Sans MS;

color:red}

salary {display:inline; font-family:Arial;

font-size:24pt}

employee {display:block; margin:10px}

name {display:inline; font-family:Comic Sans MS;

color:red}

salary {display:inline; font-family:Arial;

font-size:24pt}

Cascading style sheets were originally used for formatting HTML documents

However, they can also be used to define formatting styles for XML documents By using cascading style sheets, you can achieve simple styling effects on XML data

Consider the XML document shown in the slide, which contains information about employees in a company Notice the processing instruction at the beginning of the XML document:

<?xml-stylesheet type="text/css" href="Employees.css"?>

This processing instruction applies a cascading style sheet called Employees.css

to the XML document

Employees.css is also shown in the slide The cascading style sheet defines a set

of style properties for each element in the XML document, except for the outermost <employees> element Following is a brief description of these style properties:

! The first entry defines the style properties for <employee> elements We have specified that each employee should be displayed on a new line (This

is the meaning of the display:block style property.)

! The second and third entries define the style properties for the <name> and

<salary> elements, respectively In each case, we specify “display:inline”,

so that the elements are displayed on the same line We have also specified the desired font face, font size, and color for these elements

For more information about cascading style sheets, visit the Web site http://www.w3.org/Style/CSS

Slide Objective

To provide an overview of

how to use cascading style

sheets for formatting XML

Demonstration: Applying a Cascading Style Sheet to an XML

Document

In this demonstration, you will see the effects of applying a cascading style sheet to an XML document First, you will view an XML document in Internet Explorer 5 without a style sheet attached You will then attach a style sheet and see how it affects the document as it is displayed in the browser

In this demonstration, you

will see the effect of

applying a cascading style

sheet to an XML document

You will see how the style

sheet appears in the

browser without the style

sheet, and then see how the

cascading style sheet

improves the presentation

for the user

Delivery Tip

1 In Notepad, open the file

Employees.xml from the

folder

\InetPub\WWWRoot\1905\D

emoCode\Mod02\Css

2 Note the <employee>

elements and the <name>

and <salary> child

elements

3 Launch Internet Explorer

5 and open Employees.xml

The document is displayed

This is the same style sheet

that we used in the previous

line, as specified in the

cascading style sheet

XSL Style Sheets for XML

$ New elements/attributes to be added

$ Elements/attributes to be sorted and ordered

$ Loops, decision-making, and script to be used for extra sophistication

Although HTML programmers use cascading style sheets extensively, they are quite limited in scope Therefore, the preferred way of styling XML documents

is to use the Extensible Stylesheet Language (XSL)

The most common use of XSL style sheets is to translate XML tags into HTML tags The XML tags define the data itself, whereas the HTML tags define how that data should be rendered in the browser

Another use of XSL is to translate one set of XML tags into a different XML

format This usage is more appropriate in a business-to-business (B2B)

e-commerce scenario For example, consider the example of a Company A that wishes to order more supplies from one of its suppliers The supplier issues its catalog in XML, which is a different format from the one used by Company A

In this case, an XSL style sheet can be used to convert the supplier’s XML tags into the format needed by Company A’s applications

XSL style sheets consist of a set of rules that are applied to different elements and attributes in an XML document XSL uses pattern-matching syntax to pick out specific elements and attributes

For example, you can specify a pattern that matches all <employee> elements

in the XML document and displays these elements in an HTML table Some of the advantages of using XSL for styling XML documents are:

! XSL allows new elements/attributes to be added, rather than just styling existing content

! XSL allows elements/attributes to be sorted and reordered, rather than being restricted to their original order

! XSL allows loops, decision-making, and script to be used for extra sophistication

Slide Objective

To describe XSL style

sheets

Lead-in

Cascading style sheets

have several limitations

Applying XSL Style Sheets

! Attach an XML document to an XSL style sheet

! Example: Employees.xml includes Employees.xsl

<?xml-stylesheet type="text/xsl"

href="URL for XSL file" ?>

<?xml-stylesheet type="text/xsl"

href="URL for XSL file" ?>

<?xml-stylesheet type="text/xsl" href="Employees.xsl"?>

processor The XSL processor then transforms the XML document according to the transformation rules defined in the XSL style sheet

If you have a style sheet named Employees.xsl, it can be attached at the beginning of the Employees.xml document as follows:

<?xml-stylesheet type="text/xsl" href="Employees.xsl" ?>

To describe how to apply

XSL style sheets for

formatting data

Demonstration: Applying an XSL Style Sheet to an XML Document

In this demonstration, you will see the effects of applying various XSL style sheets to an XML document The XML document contains information about different employees

! The first XSL style sheet displays the employees in separate rows in the browser

! The second XSL style sheet displays the employees in an HTML table

! The third XSL style sheet filters and reorders employees in the HTML table The table now contains only employees earning more than 50,000, with the employees ordered by first name

In this demonstration, you

will see the effect of

applying an XSL style sheet

to an XML document You

will see how the document

appears in the browser

without the style sheet, and

then see how the XSL style

sheet improves the

presentation for the user

Delivery Tip

For the demonstration, do

not show the students the

contents of the xsl files

Only tell them how to attach

the style sheets

1 In Notepad, open the file

Employees.xml from the

folder

\InetPub\WWWRoot\1905\D

emoCode\Mod02\Xsl

2 Note the <employee>

elements and the various

child elements

3 Open Employees.xml in

Internet Explorer 5

4 Edit Employees.xml and

attach the Employees1.xsl

style sheet:

<?xml-stylesheet

type="text/xsl"

href="Employees1.xsl"?>

5 Refresh the view in

Internet Explorer 5 and then

view the source

6 Edit Employees.xml so

that it uses Employees2.xsl

7 Refresh the view in

Internet Explorer 5 and then

view the source

8 Edit Employees.xml so

that it uses Employees3.xsl

9 Refresh the view in

Internet Explorer 5 and then

view the source

Practice: Attaching Style Sheets to an XML Document

In this practice, you will apply a cascading style sheet to an XML document in order to define simple formatting for XML data

Next, you will apply an XSL style sheet to show how it provides more flexibility and functionality than a cascading style sheet

! View an XML document without a style sheet

1 In Notepad, open employees.xml from the folder

\InetPub\WWWRoot\1905\Practices and examine the contents

This file contains some simple XML data for employees in a company

2 Start Internet Explorer 5 and view employees.xml The document is displayed as a hierarchy of elements:

Slide Objective

To introduce the practice

Lead-in

In this practice, you will

apply a cascading style

sheet and then an XSL style

sheet to an XML document

The demonstration will

illustrate how XSL is more

powerful and flexible than

cascading style sheets

! Apply a cascading style sheet

1 Edit employees.xml in Notepad Add the following statement after the XML declaration on the first line to attach a cascading style sheet to the

document:

<?xml-stylesheet type="text/css" href="employees.css"?>

2 Save employees.xml and refresh the view of this file in Internet Explorer 5 The cascading style sheet causes the document to be displayed in a more visually appealing format, as shown in the following illustration

! Apply an XSL style sheet

1 Edit employees.xml in Notepad Change the style sheet directive to attach the employees.xsl XSL style sheet

<?xml-stylesheet type="text/xsl" href="employees.xsl"?>

2 Save employees.xml and refresh the view of this file in Internet Explorer 5 The XSL style sheet causes the document to be displayed in a visually appealing format, as shown in the following illustration

Observe that the table rows are highlighted as the mouse moves over the table Also notice that a message box is displayed when you click one of the rows This is done by associating script with the various parts of the table

# Binding XML to HTML

! Sending Data to the Client

! Creating an XML Data Island

! Binding XML Data to HTML Elements

! Displaying XML Data in an HTML Table

! Demonstration: Binding XML Data to HTML Elements

In this section, you will learn how to embed XML data in an HTML page, and how to bind XML elements to HTML elements in order to display the

information in the browser

Slide Objective

To provide an overview of

the topics in this section

Lead-in

The XML Data Source

Object (DSO) allows you to

bind HTML elements to an

XML data set

Sending Data to the Client

! Options for sending data from server to client

HTML page

HTML elementsHTML script

3

There are three main ways in which data can be delivered from a Web server to

a Web browser

HTML page

A Web server can return an HTML page containing elements such as

<TABLE>, <DIV>, and so on The HTML page can also contain client-side script enclosed in <SCRIPT> tags

XML document

A Web server can return an XML document, thereby allowing the client to perform intelligent client-side processing An XSL style sheet can be used to specify the visual presentation of the XML document

XML data island

An XML data island is a piece of XML data enclosed in an HTML page This approach allows the Web server to return meaningful data to the client, while retaining the presentation features of HTML The HTML page can also contain client-side script that allows dynamic content to be defined for the Web page

Slide Objective

To discuss the options for

sending data from a Web

server to a Web browser

Lead-in

There are three main ways

in which a Web server can

deliver data to a browser

Delivery Tip

The slide is animated so

that it only shows the Client

and Web server boxes

initially Click the slide to

reveal the following

additional parts of the

Creating an XML Data Island

! Embed an XML data island in an HTML page

$ Inline XML

$ Reference an XML file

Internet Explorer 5 includes a Microsoft® Visual C++® ActiveX® control known as the XML Data Source Object (DSO), which manages XML data islands in an HTML page When you define an XML data island, the XML DSO reads and parses the XML data and exposes it to the rest of the HTML page for data binding or scripting

Almost anything that can be contained within a well-formed XML document can also be contained inside a data island In Internet Explorer 5, you can the use the <XML> element to create a data island The XML data can be included within the HTML, or it can be in an external file