Académique Documents
Professionnel Documents
Culture Documents
HTML was designed to display data and to focus on how data looks.
Before you continue you should have a basic understanding of the following:
• HTML / XHTML
• JavaScript or VBScript
If you want to study these subjects first, find the tutorials on our Home page.
What is XML?
The Extensible Markup Language (XML) became a W3C Recommendation 10. February 1998.
You can read more about XML standards in our W3C tutorial.
XML was designed to describe data and to focus on what data is.
HTML was designed to display data and to focus on how data looks.
Maybe it is a little hard to understand, but XML does not DO anything. XML was created to
structure, store and to send information.
1
The following example is a note to Tove from Jani, stored as XML:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The note has a header and a message body. It also has sender and receiver information. But still,
this XML document does not DO anything. It is just pure information wrapped in XML tags. Someone
must write a piece of software to send, receive or display it.
XML tags are not predefined. You must "invent" your own tags.
The tags used to mark up HTML documents and the structure of HTML documents are predefined.
The author of HTML documents can only use tags that are defined in the HTML standard (like <p>,
<h1>, etc.).
XML allows the author to define his own tags and his own document structure.
The tags in the example above (like <to> and <from>) are not defined in any XML standard. These
tags are "invented" by the author of the XML document.
It is important to understand that XML is not a replacement for HTML. In future Web development it
is most likely that XML will be used to describe the data, while HTML will be used to format and
display the same data.
We have been participating in XML development since its creation. It has been amazing to see how
quickly the XML standard has been developed and how quickly a large number of software vendors
have adopted the standard.
We strongly believe that XML will be as important to the future of the Web as HTML has been to the
foundation of the Web and that XML will be the most common tool for all data manipulation and
data transmission.
XML Joke
2
Question: When should I use XML?
It is important to understand that XML was designed to store, carry, and exchange data.
XML was not designed to display data.
When HTML is used to display data, the data is stored inside your HTML. With XML, data can be
stored in separate XML files. This way you can concentrate on using HTML for data layout and
display, and be sure that changes in the underlying data will not require any changes to your HTML.
XML data can also be stored inside HTML pages as "Data Islands". You can still concentrate on using
HTML only for formatting and displaying the data.
In the real world, computer systems and databases contain data in incompatible formats. One of the
most time-consuming challenges for developers has been to exchange data between such systems
over the Internet.
Converting the data to XML can greatly reduce this complexity and create data that can be read by
many different types of applications.
Expect to see a lot about XML and B2B (Business To Business) in the near future.
XML is going to be the main language for exchanging financial information between businesses over
the Internet. A lot of interesting B2B applications are under development.
Since XML data is stored in plain text format, XML provides a software- and hardware-independent
way of sharing data.
This makes it much easier to create data that different applications can work with. It also makes it
easier to expand or upgrade a system to new operating systems, servers, applications, and new
browsers.
3
With XML, plain text files can be used to store data.
XML can also be used to store data in files or in databases. Applications can be written to store and
retrieve information from the store, and generic applications can be used to display the data.
Since XML is independent of hardware, software and application, you can make your data available
to other than only standard HTML browsers.
Other clients and applications can access your XML files as data sources, like they are accessing
databases. Your data can be made available to all kinds of "reading machines" (agents), and it is
easier to make your data available for blind people, or people with other disabilities.
The Wireless Markup Language (WML), used to markup Internet applications for handheld devices
like mobile phones, is written in XML.
If they DO have sense, all future applications will exchange their data in XML.
The future might give us word processors, spreadsheet applications and databases that can read
each other's data in a pure text format, without any conversion utilities in between.
We can only pray that Microsoft and all the other software vendors will agree.
The syntax rules of XML are very simple and very strict. The rules are very easy to learn,
and very easy to use.
Because of this, creating software that can read and manipulate XML is very easy.
4
<body>Don't forget me this weekend!</body>
</note>
The first line in the document - the XML declaration - defines the XML version and the character
encoding used in the document. In this case the document conforms to the 1.0 specification of XML
and uses the ISO-8859-1 (Latin-1/West European) character set.
The next line describes the root element of the document (like it was saying: "this document is a
note"):
<note>
The next 4 lines describe 4 child elements of the root (to, from, heading, and body):
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
And finally the last line defines the end of the root element:
</note>
Can you detect from this example that the XML document contains a Note to Tove from Jani? Don't
you agree that XML is pretty self-descriptive?
In HTML some elements do not have to have a closing tag. The following code is legal in HTML:
<p>This is a paragraph
<p>This is another paragraph
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Note: You might have noticed from the previous example that the XML declaration did not have a
closing tag. This is not an error. The declaration is not a part of the XML document itself. It is not an
XML element, and it should not have a closing tag.
With XML, the tag <Letter> is different from the tag <letter>.
5
Opening and closing tags must therefore be written with the same case:
<Message>This is incorrect</message>
<message>This is correct</message>
In HTML some elements can be improperly nested within each other like this:
In XML all elements must be properly nested within each other like this:
All XML documents must contain a single tag pair to define a root element.
All elements can have sub elements (child elements). Sub elements must be correctly nested within
their parent element:
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
XML elements can have attributes in name/value pairs just like in HTML. In XML the attribute value
must always be quoted. Study the two XML documents below. The first one is incorrect, the second
is correct:
6
</note>
The error in the first document is that the date attribute in the note element is not quoted.
because HTML reduces multiple, consecutive white space characters to a single white space.
Do you know what a typewriter is? Well, a typewriter is a mechanical device which was used last
century to produce printed documents. :-)
After you have typed one line of text on a typewriter, you have to manually return the printing
carriage to the left margin position and manually feed the paper up one line.
In Windows applications, a new line is normally stored as a pair of characters: carriage return (CR)
and line feed (LF). The character pair bears some resemblance to the typewriter actions of setting a
new line. In Unix applications, a new line is normally stored as a LF character. Macintosh
applications use only a CR character to store a new line.
Comments in XML
There is nothing special about XML. It is just plain text with the addition of some XML tags enclosed
in angle brackets.
Software that can handle plain text can also handle XML. In a simple text editor, the XML tags will
be visible and will not be handled specially.
In an XML-aware application however, the XML tags can be handled specially. The tags may or may
not be visible, or have a functional meaning, depending on the nature of the application.
7
XML Elements are extensible and they have relationships.
<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note>
Let's imagine that we created an application that extracted the <to>, <from>, and <body>
elements from the XML document to produce this output:
MESSAGE
To: Tove
From: Jani
Imagine that the author of the XML document added some extra information to it:
<note>
<date>2002-08-01</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
No. The application should still be able to find the <to>, <from>, and <body> elements in the XML
document and produce the same output.
To understand XML terminology, you have to know how relationships between XML elements are
named, and how element content is described.
8
My First XML
Introduction to XML
• What is HTML
• What is XML
XML Syntax
<book>
<title>My First XML</title>
<prod id="33-657" media="paper"></prod>
<chapter>Introduction to XML
<para>What is HTML</para>
<para>What is XML</para>
</chapter>
<chapter>XML Syntax
<para>Elements must have a closing tag</para>
<para>Elements must be properly nested</para>
</chapter>
</book>
Book is the root element. Title, prod, and chapter are child elements of book. Book is the parent
element of title, prod, and chapter. Title, prod, and chapter are siblings (or sister elements)
because they have the same parent.
An XML element is everything from (including) the element's start tag to (including) the element's
end tag.
An element can have element content, mixed content, simple content, or empty content. An
element can also have attributes.
In the example above, book has element content, because it contains other elements. Chapter
has mixed content because it contains both text and other elements. Para has simple content (or
text content) because it contains only text. Prod has empty content, because it carries no
information.
In the example above only the prod element has attributes. The attribute named id has the
value "33-657". The attribute named media has the value "paper".
9
Element Naming
Take care when you "invent" element names and follow these simple rules:
Any name can be used, no words are reserved, but the idea is to make names descriptive. Names
with an underscore separator are nice.
Avoid "-" and "." in names. For example, if you name something "first-name," it could be a mess if
your software tries to subtract name from first. Or if you name something "first.name," your
software may think that "name" is a property of the object "first."
Element names can be as long as you like, but don't exaggerate. Names should be short and
simple, like this: <book_title> not like this: <the_title_of_the_book>.
XML documents often have a corresponding database, in which fields exist corresponding to
elements in the XML document. A good practice is to use the naming rules of your database for the
elements in the XML documents.
Non-English letters like éòá are perfectly legal in XML element names, but watch out for problems if
your software vendor doesn't support them.
The ":" should not be used in element names because it is reserved to be used for something called
namespaces (more later).
XML elements can have attributes in the start tag, just like HTML.
XML Attributes
From HTML you will remember this: <IMG SRC="computer.gif">. The SRC attribute provides
additional information about the IMG element.
<img src="computer.gif">
<a href="demo.asp">
Attributes often provide information that is not a part of the data. In the example below, the file
type is irrelevant to the data, but important to the software that wants to manipulate the element:
10
<file type="gif">computer.gif</file>
Attribute values must always be enclosed in quotes, but either single or double quotes can be used.
For a person's sex, the person tag can be written like this:
<person sex="female">
or like this:
<person sex='female'>
Note: If the attribute value itself contains double quotes it is necessary to use single quotes, like in
this example:
Note: If the attribute value itself contains single quotes it is necessary to use double quotes, like in
this example:
<person sex="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>
<person>
<sex>female</sex>
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>
In the first example sex is an attribute. In the last, sex is a child element. Both examples provide
the same information.
There are no rules about when to use attributes, and when to use child elements. My experience is
that attributes are handy in HTML, but in XML you should try to avoid them. Use child elements if
the information feels like data.
My Favorite Way
11
The following three XML documents contain exactly the same information:
<note date="12/11/2002">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
<note>
<date>12/11/2002</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
<note>
<date>
<day>12</day>
<month>11</month>
<year>2002</year>
</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
If you use attributes as containers for data, you end up with documents that are difficult to read and
maintain. Try to use elements to describe data. Use attributes only to provide information that is
not relevant to the data.
Don't end up like this (this is not how XML should be used):
12
<note day="12" month="11" year="2002"
to="Tove" from="Jani" heading="Reminder"
body="Don't forget me this weekend!">
</note>
Sometimes I assign ID references to elements. These ID references can be used to access XML
elements in much the same way as the NAME or ID attributes in HTML. This example demonstrates
this:
<messages>
<note id="p501">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
<note id="p502">
<to>Jani</to>
<from>Tove</from>
<heading>Re: Reminder</heading>
<body>I will not!</body>
</note>
</messages>
The ID in these examples is just a counter, or a unique identifier, to identify the different notes in
the XML file, and not a part of the note data.
What I am trying to say here is that metadata (data about data) should be stored as attributes, and
that data itself should be stored as elements.
XML Validations:
A "Well Formed" XML document is a document that conforms to the XML syntax rules that were
described in the previous chapters:
13
• XML tags are case sensitive
• XML elements must be properly nested
• XML attribute values must always be quoted
A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a
Document Type Definition (DTD):
XML DTD
The purpose of a DTD is to define the legal building blocks of an XML document. It defines the
document structure with a list of legal elements. You can read more about DTD, and how to validate
your XML documents in our DTD tutorial.
A Document Type Definition defines the legal building blocks of an XML document. It
defines the document structure with a list of legal elements.
If the DTD is included in your XML source file, it should be wrapped in a DOCTYPE definition with the
following syntax:
Example XML document with a DTD: (Open it in IE5, and select view source):
14
<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
!DOCTYPE note (in line 2) defines that this is a document of the type note.
!ELEMENT note (in line 3) defines the note element as having four elements:
"to,from,heading,body".
!ELEMENT to (in line 4) defines the to element to be of the type "#PCDATA".
!ELEMENT from (in line 5) defines the from element to be of the type "#PCDATA"
and so on.....
If the DTD is external to your XML source file, it should be wrapped in a DOCTYPE definition with the
following syntax:
This is the same XML document as above, but with an external DTD: (Open it in IE5, and select
view source)
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
With DTD, each of your XML files can carry a description of its own format with it.
15
With a DTD, independent groups of people can agree to use a common DTD for interchanging data.
Your application can use a standard DTD to verify that the data you receive from the outside world
is valid.
The main building blocks of both XML and HTML documents are tags like
<body>....</body>.
Seen from a DTD point of view, all XML documents (and HTML documents) are made up by the
following simple building blocks:
• Elements
• Attributes
• Entities
• PCDATA
• CDATA
Elements
Elements are the main building blocks of both XML and HTML documents.
Examples of HTML elements are "body" and "table". Examples of XML elements could be "note" and
"message". Elements can contain text, other elements, or be empty. Examples of empty HTML
elements are "hr", "br" and "img".
Examples:
Attributes
Attributes are always placed inside the starting tag of an element. Attributes always come in
name/value pairs. The following "img" element has additional information about a source file:
The name of the element is "img". The name of the attribute is "src". The value of the attribute is
"computer.gif". Since the element itself is empty it is closed by a " /".
Entities
16
Entities are variables used to define common text. Entity references are references to entities.
Most of you will know the HTML entity reference: " ". This "no-breaking-space" entity is used
in HTML to insert an extra space in a document. Entities are expanded when a document is parsed
by an XML parser.
PCDATA
Think of character data as the text found between the start tag and the end tag of an XML element.
PDATA is text that WILL be parsed by a parser. The text will be examined by the parser
for entities and markup.
Tags inside the text will be treated as markup and entities will be expanded.
However, parsed character data should not contain any &, <, or > characters; these need to be
represented by the & < and > entities, respectively.
CDATA
CDATA is text that will NOT be parsed by a parser. Tags inside the text will NOT be treated as
markup and entities will not be expanded.
Declaring an Element
In the DTD, XML elements are declared with an element declaration. An element declaration has the
following syntax:
Empty Elements
17
Empty elements are declared with the category keyword EMPTY:
example:
<!ELEMENT br EMPTY>
XML example:
<br />
Elements with only parsed character data are declared with #PCDATA inside parentheses:
example:
<!ELEMENT from (#PCDATA)>
Elements declared with the category keyword ANY, can contain any combination of parsable data:
Elements with one or more children are defined with the name of the children elements inside
parentheses:
<!ELEMENT element-name
(child-element-name)>
or
<!ELEMENT element-name
(child-element-name,child-element-name,.....)>
example:
<!ELEMENT note (to,from,heading,body)>
When children are declared in a sequence separated by commas, the children must appear in the
same sequence in the document. In a full declaration, the children must also be declared, and the
children can also have children. The full declaration of the "note" element will be:
18
<!ELEMENT element-name (child-name)>
example:
<!ELEMENT note (message)>
The example declaration above declares that the child element message must occur once, and only
once inside the "note" element.
The + sign in the example above declares that the child element message must occur one or more
times inside the "note" element.
The * sign in the example above declares that the child element message can occur zero or more
times inside the "note" element.
The ? sign in the example above declares that the child element message can occur zero or one
times inside the "note" element.
example:
<!ELEMENT note (to,from,header,(message|body))>
The example above declares that the "note" element must contain a "to" element, a "from" element,
a "header" element, and either a "message" or a "body" element.
example:
<!ELEMENT note (#PCDATA|to|from|header|message)*>
The example above declares that the "note" element can contain zero or more occurrences of
parsed character, "to", "from", "header", or "message" elements.
19
Declaring Attributes
XML example:
<payment type="check" />
Value Explanation
CDATA The value is character data
(en1|en2|..) The value must be one from an enumerated list
ID The value is a unique id
IDREF The value is the id of another element
IDREFS The value is a list of other ids
NMTOKEN The value is a valid XML name
NMTOKENS The value is a list of valid XML names
ENTITY The value is an entity
ENTITIES The value is a list of entities
NOTATION The value is a name of a notation
xml: The value is a predefined xml value
Value Explanation
value The default value of the attribute
#REQUIRED The attribute value must be included in the element
#IMPLIED The attribute does not have to be included
#FIXED value The attribute value is fixed
DTD:
<!ELEMENT square EMPTY>
<!ATTLIST square width CDATA "0">
Valid XML:
<square width="100" />
In the example above, the "square" element is defined to be an empty element with a "width"
attribute of type CDATA. If no width is specified, it has a default value of 0.
#IMPLIED
20
Syntax
<!ATTLIST element-name attribute-name
attribute-type #IMPLIED>
Example
DTD:
<!ATTLIST contact fax CDATA #IMPLIED>
Valid XML:
<contact fax="555-667788" />
Valid XML:
<contact />
Use the #IMPLIED keyword if you don't want to force the author to include an attribute, and you
don't have an option for a default value.
#REQUIRED
Syntax
<!ATTLIST element-name attribute_name
attribute-type #REQUIRED>
Example
DTD:
<!ATTLIST person number CDATA #REQUIRED>
Valid XML:
<person number="5677" />
Invalid XML:
<person />
Use the #REQUIRED keyword if you don't have an option for a default value, but still want to force
the attribute to be present.
#FIXED
Syntax
<!ATTLIST element-name attribute-name
attribute-type #FIXED "value">
Example
DTD:
<!ATTLIST sender company CDATA #FIXED "Microsoft">
Valid XML:
<sender company="Microsoft" />
Invalid XML:
<sender company="W3Schools" />
Use the #FIXED keyword when you want an attribute to have a fixed value without allowing the
author to change it. If an author includes another value, the XML parser will return an error.
21
Syntax:
<!ATTLIST element-name
attribute-name (en1|en2|..) default-value>
DTD example:
<!ATTLIST payment type (check|cash) "cash">
XML example:
<payment type="check" />
or
<payment type="cash" />
Use enumerated attribute values when you want the attribute values to be one of a fixed set of legal
values.
Syntax
<!ENTITY entity-name "entity-value">
Example
DTD Example:
<!ENTITY writer "Donald Duck.">
<!ENTITY copyright "Copyright W3Schools.">
XML example:
<author>&writer;©right;</author>
Syntax
<!ENTITY entity-name SYSTEM "URI/URL">
Example
DTD Example:
<!ENTITY writer
SYSTEM "http://www.w3schools.com/dtd/entities.dtd">
<!ENTITY copyright
SYSTEM "http://www.w3schools.com/dtd/entities.dtd">
XML example:
<author>&writer;©right;</author>
22
If you try to open an XML document, the XML Parser might generate an error. By accessing the
parseError object, the exact error code, the error text, and even the line that caused the error can
be retrieved:
Note: The load( ) method is used for files, while the loadXML( ) method is used for strings.
Try it Yourself
To help you validate your xml files, we have created this link so that you can Validate any XML file.
You can read more about the parseError object in our XML DOM tutorial.
DTD Examples:
TV Schedule DTD
23
<!DOCTYPE TVSCHEDULE [
<!ELEMENT TVSCHEDULE (CHANNEL+)>
<!ELEMENT CHANNEL (BANNER,DAY+)>
<!ELEMENT BANNER (#PCDATA)>
<!ELEMENT DAY (DATE,(HOLIDAY|PROGRAMSLOT+)+)>
<!ELEMENT HOLIDAY (#PCDATA)>
<!ELEMENT DATE (#PCDATA)>
<!ELEMENT PROGRAMSLOT (TIME,TITLE,DESCRIPTION?)>
<!ELEMENT TIME (#PCDATA)>
<!ELEMENT TITLE (#PCDATA)>
<!ELEMENT DESCRIPTION (#PCDATA)>
]>
<!DOCTYPE NEWSPAPER [
<!ELEMENT NEWSPAPER (ARTICLE+)>
<!ELEMENT ARTICLE (HEADLINE,BYLINE,LEAD,BODY,NOTES)>
<!ELEMENT HEADLINE (#PCDATA)>
<!ELEMENT BYLINE (#PCDATA)>
<!ELEMENT LEAD (#PCDATA)>
<!ELEMENT BODY (#PCDATA)>
<!ELEMENT NOTES (#PCDATA)>
<!ATTLIST ARTICLE AUTHOR CDATA #REQUIRED>
<!ATTLIST ARTICLE EDITOR CDATA #IMPLIED>
<!ATTLIST ARTICLE DATE CDATA #IMPLIED>
<!ATTLIST ARTICLE EDITION CDATA #IMPLIED>
<!ENTITY NEWSPAPER "Vervet Logic Times">
<!ENTITY PUBLISHER "Vervet Logic Press">
<!ENTITY COPYRIGHT "Copyright 1998 Vervet Logic Press">
]>
<!DOCTYPE CATALOG [
<!ENTITY AUTHOR "John Doe">
<!ENTITY COMPANY "JD Power Tools, Inc.">
<!ENTITY EMAIL "jd@jd-tools.com">
<!ELEMENT PRODUCT
(SPECIFICATIONS+,OPTIONS?,PRICE+,NOTES?)>
<!ATTLIST PRODUCT
24
NAME CDATA #IMPLIED
CATEGORY (HandTool|Table|Shop-Professional) "HandTool"
PARTNUM CDATA #IMPLIED
PLANT (Pittsburgh|Milwaukee|Chicago) "Chicago"
INVENTORY (InStock|Backordered|Discontinued) "InStock">
]>
DTD Summary
This tutorial has taught you how to describe the structure of an XML document.
You have learned how to use a DTD to define the legal elements of an XML document, and how the
DTD can be declared inside your XML document, or as an external reference.
You have learned how to declare the legal elements, attributes, entities, and CDATA sections for
XML documents.
You have also seen how to validate an XML document against a DTD.
XML Schema is used to define the legal elements of an XML document, just like a DTD. We think
that very soon XML Schemas will be used in most Web applications as a replacement for DTDs.
Unlike DTD, XML Schemas has support for data types and namespaces.
25
XML Schema
W3C supports an alternative to DTD called XML Schema. You can read more about XML Schema in
our Schema tutorial.
XML Validator:
The W3C XML specification states that a program should not continue to process an XML document
if it finds an error. The reason is that XML software should be easy to write, and that all XML
documents should be compatible.
With HTML it was possible to create documents with lots of errors (like when you forget an end tag).
One of the main reasons that HTML browsers are so big and incompatible, is that they have their
own ways to figure out what a document should look like when they encounter an HTML error.
To help you syntax-check your xml, we have used Microsoft's XML parser to create an XML validator.
Paste your XML in the text area below, and syntax-check it by pressing the "Validate" button.
You can also syntax-check your XML file by typing the URL of your file into the input field below, and
then press the "Validate" button
Filename:
If you want to syntax-check an error-free XML file, you can paste the following address into the
filename field: http://www.w3schools.com/xml/cd_catalog.xml
Note: If you get the error "Access denied" when accessing this file, it is because your Internet
Explorer security settings do not allow access across domains!
26
Nearly all major browsers have support for XML and XSLT.
Mozilla Firefox
As of version 1.0.2, Firefox has support for XML and XSLT (and CSS).
Mozilla
Mozilla includes Expat for XML parsing and has support to display XML + CSS. Mozilla also has some
support for Namespaces.
Netscape
As of version 8, Netscape uses the Mozilla engine, and therefore it has the same XML / XSLT support
as Mozilla.
Opera
As of version 9, Opera has support for XML and XSLT (and CSS). Version 8 supports only XML +
CSS.
Internet Explorer
As of version 6, Internet Explorer supports XML, Namespaces, CSS, XSLT, and XPath.
Note: Internet Explorer 5 also has XML support, but the XSL part is NOT compatible with the
official W3C XSL Recommendation!
Raw XML files can be viewed in Mozilla, Firefox, Opera, Internet Explorer, and Netscape
6+.
However, to make XML documents display as nice web pages, you will have to add some
display information.
Open the XML file (typically by clicking on a link) - The XML document will be displayed with color-
coded root and child elements. A plus (+) or minus sign (-) to the left of the elements can be
clicked to expand or collapse the element structure. To view the raw XML source (without the + and
- signs), select "View Page Source" or "View Source" from the browser menu.
In Netscape 6:
27
Open the XML file, then right-click in XML file and select "View Page Source". The XML document will
then be displayed with color-coded root and child elements.
In Opera 7 and 8:
In Opera 7: Open the XML file, then right-click in XML file and select "Frame" / "View Source". The
XML document will be displayed as plain text. In Opera 8: Open the XML file, then right-click in XML
file and select "Source". The XML document will be displayed as plain text.
If an erroneous XML file is opened, the browser will report the error.
Viewing some XML documents will help you get the XML feeling.
An XML CD catalog
This is my father's CD collection, stored as XML data (old and boring titles I guess... :-)).
XML documents do not carry information about how to display the data.
Since XML tags are "invented" by the author of the XML document, browsers do not know if a tag
like <table> describes an HTML table or a dining table.
Without any information about how to display the data, most browsers will just display the XML
document as it is.
In the next chapters, we will take a look at different solutions to the display problem, using CSS,
XSL, JavaScript, and XML Data Islands.
With CSS (Cascading Style Sheets) you can add display information to an XML document.
28
Displaying your XML Files with CSS?
Below is an example of how to use a CSS style sheet to format an XML document:
Below is a fraction of the XML file. The second line, <?xml-stylesheet type="text/css"
href="cd_catalog.css"?>, links the XML file to the CSS file:
Note: Formatting XML with CSS is NOT the future of how to style XML documents. XML document
should be styled by using the W3C's XSL standard!
With XSL you can add display information to your XML document.
29
XSL (the eXtensible Stylesheet Language) is far more sophisticated than CSS. One way to use XSL
is to transform XML into HTML before it is displayed by the browser as demonstrated in these
examples:
View the XML file, the XSL style sheet, and View the result.
Below is a fraction of the XML file. The second line, <?xml-stylesheet type="text/xsl"
href="simple.xsl"?>, links the XML file to the XSL file:
If you want to learn more about XSL, please visit our XSL tutorial.
XSL Languages
It started with XSL and ended up with XSLT, XPath, and XSL-FO.
The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an
XML-based Stylesheet Language.
HTML uses predefined tags and the meaning of the tags are well understood.
The <table> element in HTML defines a table - and a browser knows how to display it.
Adding styles to HTML elements is simple. Telling a browser to display an element in a special font
or color, is easy with CSS.
XML does not use predefined tags (we can use any tag-names we like), and the meaning of these
tags are not well understood.
A <table> element could mean an HTML table, a piece of furniture, or something else - and a
browser does not know how to display it.
30
XSL describes how the XML document should be displayed!
The rest of this tutorial is about XSLT - the language for transforming XML documents.
But you can also study our XPath Tutorial and our XSL-FO Tutorial.
Introduction to XSLT
XSLT is a language for transforming XML documents into XHTML documents or to other
XML documents.
Before you continue you should have a basic understanding of the following:
• HTML / XHTML
• XML / XML Namespaces
• XPath
If you want to study these subjects first, find the tutorials on our Home page.
What is XSLT?
31
XSLT is used to transform an XML document into another XML document, or another type of
document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by
transforming each XML element into an (X)HTML element.
With XSLT you can add/remove elements and attributes to or from the output file. You can also
rearrange and sort elements, perform tests and make decisions about which elements to hide and
display, and a lot more.
A common way to describe the transformation process is to say that XSLT transforms an XML
source-tree into an XML result-tree.
XSLT uses XPath to find information in an XML document. XPath is used to navigate through
elements and attributes in XML documents.
If you want to study XPath first, please read our XPath Tutorial.
In the transformation process, XSLT uses XPath to define parts of the source document that should
match one or more predefined templates. When a match is found, XSLT will transform the matching
part of the source document into the result document.
To read more about the XSLT activities at W3C, please read our W3C Tutorial.
XSLT Browsers
Nearly all major browsers have support for XML and XSLT.
Mozilla Firefox
As of version 1.0.2, Firefox has support for XML and XSLT (and CSS).
Mozilla
Mozilla includes Expat for XML parsing and has support to display XML + CSS. Mozilla also has some
support for Namespaces.
Netscape
32
As of version 8, Netscape uses the Mozilla engine, and therefore it has the same XML / XSLT support
as Mozilla.
Opera
As of version 9, Opera has support for XML and XSLT (and CSS). Version 8 supports only XML +
CSS.
Internet Explorer
As of version 6, Internet Explorer supports XML, Namespaces, CSS, XSLT, and XPath.
XSLT – Transformation
xsl:stylesheet
xsl:transform
12 top-level elements. These elements may appear as immediate children of the root and are the
following:
xsl:attribute-set xsl:decimal-format
xsl:import xsl:include
xsl:key xsl:namespace-alias
xsl:output xsl:param
xsl:preserve-space xsl:strip-space
Xsl:template xsl:variable
23 instruction elements. These elements appear in the content of elements that contain templates.
Here we don't mean the xsl:template element. We mean the content of that and several other
elements, such as xsl:for-each and xsl:message, which are composed of literal result elements,
character data, and XSLT instructions that are processed to produce part of the result tree. These
elements are as follows:
xsl:apply-imports xsl:apply-templates
33
xsl:attribute xsl:call-template
xsl:choose xsl:comment
xsl:copy xsl:copy-of
xsl:element xsl:fallback
xsl:for-each xsl:if
xsl:message xsl:number
xsl:otherwise xsl:param
xsl:processing-instruction xsl:sort
xsl:text xsl:value-of
xsl:variable xsl:with-param
xsl:when
The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or
<xsl:transform>.
Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!
The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
or:
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
To get access to the XSLT elements, attributes and features we must declare the XSLT namespace at
the top of the document.
34
Start with a Raw XML Document
Viewing XML Files in Firefox and Internet Explorer: Open the XML file (typically by clicking on
a link) - The XML document will be displayed with color-coded root and child elements. A plus (+) or
minus sign (-) to the left of the elements can be clicked to expand or collapse the element
structure. To view the raw XML source (without the + and - signs), select "View Page Source" or
"View Source" from the browser menu.
Viewing XML Files in Netscape 6: Open the XML file, then right-click in XML file and select "View
Page Source". The XML document will then be displayed with color-coded root and child elements.
Viewing XML Files in Opera 7: Open the XML file, then right-click in XML file and select "Frame" /
"View Source". The XML document will be displayed as plain text.
View "cdcatalog.xml"
Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation template:
35
</body>
</html>
</xsl:template>
</xsl:stylesheet>
View "cdcatalog.xsl"
Add the XSL style sheet reference to your XML document ("cdcatalog.xml"):
If you have an XSLT compliant browser it will nicely transform your XML into XHTML.
The details of the example above will be explained in the next chapters.
An XSL style sheet consists of one or more set of rules that are called templates.
The match attribute is used to associate a template with an XML element. The match attribute can
also be used to define a template for the entire XML document. The value of the match attribute is
an XPath expression (i.e. match="/" defines the whole document).
Ok, let's look at a simplified version of the XSL file from the previous chapter:
36
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Since an XSL style sheet is an XML document itself, it always begins with the XML declaration:
<?xml version="1.0" encoding="ISO-8859-1"?>.
The next element, <xsl:stylesheet>, defines that this document is an XSLT style sheet document
(along with the version number and XSLT namespace attributes).
The <xsl:template> element defines a template. The match="/" attribute associates the
template with the root of the XML source document.
The content inside the <xsl:template> element defines some HTML to write to the output.
The last two lines define the end of the template and the end of the style sheet.
My CD Collection
Title Artist
. .
View the XML file, View the XSL file, and View the result
The result from this example was a little disappointing, because no data was copied from the XML
document to the output.
In the next chapter you will learn how to use the <xsl:value-of> element to select values from the
XML elements.
37
The <xsl:value-of> Element
The <xsl:value-of> element can be used to extract the value of an XML element and add it to the
output stream of the transformation:
Note: The value of the select attribute is an XPath expression. An XPath expression works like
navigating a file system; where a forward slash (/) selects subdirectories.
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
View the XML file, View the XSL file, and View the result
The result from this example was also a little disappointing, because only one line of data was
copied from the XML document to the output.
In the next chapter you will learn how to use the <xsl:for-each> element to loop through the XML
elements, and display all of the records.
The XSL <xsl:for-each> element can be used to select every XML element of a specified node-set:
38
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Note: The value of the select attribute is an XPath expression. An XPath expression works like
navigating a file system; where a forward slash (/) selects subdirectories.
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
Greatest Hits Dolly Parton
Still got the blues Gary More
Eros Eros Ramazzotti
One night only Bee Gees
Sylvias Mother Dr.Hook
Maggie May Rod Stewart
Romanza Andrea Bocelli
When a man loves a woman Percy Sledge
Black angel Savage Rose
1999 Grammy Nominees Many
For the good times Kenny Rogers
Big Willie style Will Smith
Tupelo Honey Van Morrison
Soulsville Jorn Hoel
The very best of Cat Stevens
Stop Sam Brown
Bridge of Spies T`Pau
39
Private Dancer Tina Turner
Midt om natten Kim Larsen
Pavarotti Gala Concert Luciano Pavarotti
The dock of the bay Otis Redding
Picture book Simply Red
Red The Communards
Unchain my heart Joe Cocker
View the XML file, View the XSL file, and View the result
We can also filter the output from the XML file by adding a criterion to the select attribute in the
<xsl:for-each> element.
• = (equal)
• != (not equal)
• < less than
• > greater than
My CD Collection
40
Title Artist
Empire Burlesque Bob Dylan
To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element in the XSL
file:
Note: The select attribute indicates what XML element to sort on.
My CD Collection
Title Artist
Romanza Andrea Bocelli
One night only Bee Gees
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
The very best of Cat Stevens
Greatest Hits Dolly Parton
Sylvias Mother Dr.Hook
41
Eros Eros Ramazzotti
Still got the blues Gary Moore
Unchain my heart Joe Cocker
Soulsville Jorn Hoel
For the good times Kenny Rogers
Midt om natten Kim Larsen
Pavarotti Gala Concert Luciano Pavarotti
1999 Grammy Nominees Many
The dock of the bay Otis Redding
When a man loves a woman Percy Sledge
Maggie May Rod Stewart
Stop Sam Brown
Black angel Savage Rose
Picture book Simply Red
Bridge of Spies T`Pau
Red The Communards
Private Dancer Tina Turner
Tupelo Honey Van Morrison
Big Willie style Will Smith
View the XML file, View the XSL file, and View the result
The <xsl:if> element is used to put a conditional test against the content of the XML file.
To put a conditional if test against the content of the XML file, add an <xsl:if> element to the XSL
document.
Syntax
<xsl:if test="expression">
...
...some output if the expression is true...
...
</xsl:if>
To add a conditional test, add the <xsl:if> element inside the <xsl:for-each> element in the XSL
file:
42
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<xsl:if test="price > 10">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:if>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Note: The value of the required test attribute contains the expression to be evaluated.
The code above will only output the title and artist elements of the CDs that has a price that is
higher than 10.
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
Still got the blues Gary Moore
One night only Bee Gees
Romanza Andrea Bocelli
Black Angel Savage Rose
1999 Grammy Nominees Many
View the XML file, View the XSL file, and View the result
Syntax
<xsl:choose>
43
<xsl:when test="expression">
... some output ...
</xsl:when>
<xsl:otherwise>
... some output ....
</xsl:otherwise>
</xsl:choose>
To insert a multiple conditional test against the XML file, add the <xsl:choose>, <xsl:when>, and
<xsl:otherwise> elements to the XSL file:
The code above will add a pink background-color to the "Artist" column WHEN the price of the CD is
higher than 10.
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
44
Greatest Hits Dolly Parton
Still got the blues Gary Moore
Eros Eros Ramazzotti
One night only Bee Gees
Sylvias Mother Dr.Hook
Maggie May Rod Stewart
Romanza Andrea Bocelli
When a man loves a woman Percy Sledge
Black angel Savage Rose
1999 Grammy Nominees Many
For the good times Kenny Rogers
Big Willie style Will Smith
Tupelo Honey Van Morrison
Soulsville Jorn Hoel
The very best of Cat Stevens
Stop Sam Brown
Bridge of Spies T`Pau
Private Dancer Tina Turner
Midt om natten Kim Larsen
Pavarotti Gala Concert Luciano Pavarotti
The dock of the bay Otis Redding
Picture book Simply Red
Red The Communards
Unchain my heart Joe Cocker
View the XML file, View the XSL file, and View the result
Another Example
45
<xsl:value-of select="artist"/></td>
</xsl:when>
<xsl:when test="price > 9">
<td bgcolor="#cccccc">
<xsl:value-of select="artist"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="artist"/></td>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The code above will add a pink background color to the "Artist" column WHEN the price of the CD is
higher than 10, and a grey background-color WHEN the price of the CD is higher than 9 and lower
or equal to 10.
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
Greatest Hits Dolly Parton
Still got the blues Gary Moore
Eros Eros Ramazzotti
One night only Bee Gees
Sylvias Mother Dr.Hook
Maggie May Rod Stewart
Romanza Andrea Bocelli
When a man loves a woman Percy Sledge
Black angel Savage Rose
1999 Grammy Nominees Many
For the good times Kenny Rogers
Big Willie style Will Smith
Tupelo Honey Van Morrison
Soulsville Jorn Hoel
The very best of Cat Stevens
Stop Sam Brown
Bridge of Spies T`Pau
Private Dancer Tina Turner
Midt om natten Kim Larsen
Pavarotti Gala Concert Luciano Pavarotti
The dock of the bay Otis Redding
46
Picture book Simply Red
Red The Communards
Unchain my heart Joe Cocker
View the XML file, View the XSL file, and View the result
The <xsl:apply-templates> element applies a template to the current element or to the current
element's child nodes.
If we add a select attribute to the <xsl:apply-templates> element it will process only the child
element that matches the value of the attribute. We can use the select attribute to specify the order
in which the child nodes are processed.
My CD Collection
47
Title: Empire Burlesque
Artist: Bob Dylan
Title: Eros
Artist: Eros Ramazzotti
Title: Romanza
Artist: Andrea Bocelli
Title: Soulsville
Artist: Jorn Hoel
Title: Stop
Artist: Sam Brown
48
Title: Private Dancer
Artist: Tina Turner
Title: Red
Artist: The Communards
View the XML file, View the XSL file, and View the result.
If your browser supports it, XSLT can be used to transform the document to XHTML in
your browser.
A JavaScript Solution
In the previous chapters we have explained how XSLT can be used to transform a document from
XML to XHTML. We did this by adding an XSL style sheet to the XML file and let the browser do the
transformation.
Even if this works fine, it is not always desirable to include a style sheet reference in an XML file
(e.g. it will not work in a non XSLT aware browser.)
• do browser-specific testing
• use different style sheets according to browser and user needs
That is the beauty of XSLT! One of the design goals for XSLT was to make it possible to transform
data from one format to another, supporting different browsers and different user needs.
XSLT transformation on the client side is bound to be a major part of the browsers work tasks in the
future, as we will see a growth in the specialized browser market (Braille, aural browsers, Web
printers, handheld devices, etc.)
49
Look at the XML document that you have seen in the previous chapters:
Notice that the XML file does not have a reference to the XSL file.
IMPORTANT: The above sentence indicates that an XML file could be transformed using many
different XSL style sheets.
Here is the source code needed to transform the XML file to XHTML on the client:
50
<html>
<body>
<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>
Tip: If you don't know how to write JavaScript, you can study our JavaScript tutorial.
The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the
XML file into memory. The second block of code creates another instance of the parser and loads the
XSL file into memory. The last line of code transforms the XML document using the XSL document,
and displays the result as XHTML in your browser. Nice!
Since not all browsers support XSLT, one solution is to transform the XML to XHTML on
the server.
To make XML data available to all kind of browsers, we must transform the XML document on the
SERVER and send it as XHTML back to the browser.
That's another beauty of XSLT. One of the design goals for XSLT was to make it possible to
transform data from one format to another on a server, returning readable data to all kinds of
browsers.
Look at the XML document that you have seen in the previous chapters:
51
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
.
</catalog>
Notice that the XML file does not have a reference to the XSL file.
IMPORTANT: The above sentence indicates that an XML file could be transformed using many
different XSL style sheets.
Here is the ASP source code needed to transform the XML file to XHTML on the server:
<%
'Load XML
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("cdcatalog.xml"))
52
'Load XSL
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("cdcatalog.xsl"))
'Transform file
Response.Write(xml.transformNode(xsl))
%>
Tip: If you don't know how to write ASP, you can study our ASP tutorial.
The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the
XML file into memory. The second block of code creates another instance of the parser and loads the
XSL file into memory. The last line of code transforms the XML document using the XSL document,
and sends the result as XHTML to your browser. Nice!
Now, we will show how to open, edit, and save an XML file that is stored on the server.
We will use XSL to transform the XML document into an HTML form. The values of the XML elements
will be written to HTML input fields in an HTML form. The HTML form is editable. After editing the
data, the data is going to be submitted back to the server and the XML file will be updated (this part
is done with ASP).
53
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<form method="post" action="edittool.asp">
<h2>Tool Information (edit):</h2>
<table border="0">
<xsl:for-each select="tool/field">
<tr>
<td>
<xsl:value-of select="@id"/>
</td>
<td>
<input type="text">
<xsl:attribute name="id">
<xsl:value-of select="@id" />
</xsl:attribute>
<xsl:attribute name="name">
<xsl:value-of select="@id" />
</xsl:attribute>
<xsl:attribute name="value">
<xsl:value-of select="value" />
</xsl:attribute>
</input>
</td>
</tr>
</xsl:for-each>
</table>
<br />
<input type="submit" id="btn_sub" name="btn_sub" value="Submit" />
<input type="reset" id="btn_res" name="btn_res" value="Reset" />
</form>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The XSL file above loops through the elements in the XML file and creates one input field for each
XML "field" element. The value of the XML "field" element's "id" attribute is added to both the "id"
and "name" attributes of each HTML input field. The value of each XML "value" element is added to
the "value" attribute of each HTML input field. The result is an editable HTML form that contains the
values from the XML file.
Then, we have a second style sheet: "tool_updated.xsl". This is the XSL file that will be used to
display the updated XML data. This style sheet will not result in an editable HTML form, but a static
HTML table:
54
<table border="1">
<xsl:for-each select="tool/field">
<tr>
<td><xsl:value-of select="@id" /></td>
<td><xsl:value-of select="value" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The HTML form in the "tool.xsl" file above has an action attribute with a value of "edittool.asp".
The "edittool.asp" page contains two functions: The loadFile() function loads and transforms the
XML file for display and the updateFile() function applies the changes to the XML file:
<%
function loadFile(xmlfile,xslfile)
Dim xmlDoc,xslDoc
'Load XML file
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async = false
xmlDoc.load(xmlfile)
'Load XSL file
set xslDoc = Server.CreateObject("Microsoft.XMLDOM")
xslDoc.async = false
xslDoc.load(xslfile)
'Transform file
Response.Write(xmlDoc.transformNode(xslDoc))
end function
function updateFile(xmlfile)
Dim xmlDoc,rootEl,f
Dim i
'Load XML file
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async = false
xmlDoc.load(xmlfile)
'Set the rootEl variable equal to the root element
Set rootEl = xmlDoc.documentElement
'Loop through the form collection
for i = 1 To Request.Form.Count
'Eliminate button elements in the form
if instr(1,Request.Form.Key(i),"btn_")=0 then
'The selectSingleNode method queries the XML file for a
'single node that matches a query. This query requests
'the value element that is the child of a field element
'that has an id attribute which matches the current key
'value in the Form Collection. When there is a match -
'set the text property equal to the value of the current
'field in the Form Collection.
set f = rootEl.selectSingleNode("field[@id='" & _
55
Request.Form.Key(i) & "']/value")
f.Text = Request.Form(i)
end if
next
'Save the modified XML file
xmlDoc.save xmlfile
'Release all object references
set xmlDoc=nothing
set rootEl=nothing
set f=nothing
'Load the modified XML file with a style sheet that
'allows the client to see the edited information
loadFile xmlfile,server.MapPath("tool_updated.xsl")
end function
'If the form has been submitted update the
'XML file and display result - if not,
'transform the XML file for editing
if Request.Form("btn_sub")="" then
loadFile server.MapPath("tool.xml"),server.MapPath("tool.xsl")
else
updateFile server.MapPath("tool.xml")
end if
%>
Tip: If you don't know how to write ASP, you can study our ASP tutorial.
Note: We are doing the transformation and applying the changes to the XML file on the server. This
is a cross-browser solution. The client will only get HTML back from the server - which will work in
any browser.
XML Editors
If you are serious about XML, you will benefit from using a professional XML Editor.
XML is Text-based
One great thing about XML is that XML files can be created and edited using a simple text-editor like
Notepad.
However, when you start working with XML, you will soon find that it is better to edit XML
documents using a professional XML editor.
Many web developers use Notepad to edit both HTML and XML documents because Notepad is
included with the most common OS and it is simple to use. Personally I often use Notepad for quick
editing of simple HTML, CSS, and XML files.
But, if you use Notepad for XML editing, you will soon run into problems.
Notepad does not know that you are writing XML, so it will not be able to assist you.
56
Why an XML Editor?
Today XML is an important technology, and development projects use XML-based technologies like:
To be able to write error-free XML documents, you will need an intelligent XML editor!
XML Editors
Professional XML editors will help you to write error-free XML documents, validate your XML against
a DTD or a schema, and force you to stick to a valid XML structure.
Altova's XMLSpy
At W3Schools we have been using XMLSpy for many years. XMLSpy is our favorite XML editor. These
are some of the features we especially like:
• Easy to use
• Syntax coloring
• Automatic tag completion
• Context-sensitive entry helpers
• Automatic well-formedness check
• Built in DTD and/or XML Schema-based validation
• Easy switching between text view and grid view
• Built in graphical XML Schema editor
• Powerful conversion utilities
• Database import and export
• Built in templates for most XML document types
• Built in XPath 1.0/2.0 analyzer
• XSLT 1.0/2.0 editor, profiler, and debugger
• XQuery editor, profiler, and debugger
• SOAP client and debugger
• Graphical WSDL editor
57
• Powerful project management capabilities
• Code generation in Java, C++, and C#
XSLT Summary
This tutorial has taught you how to use XSLT to transform XML documents into other formats, like
XHTML.
You have learned how to add/remove elements and attributes to or from the output file.
You have also learned how to rearrange and sort elements, perform tests and make decisions about
which elements to hide and display.
XSL includes 3 languages: XSLT, XPath and XSL-FO, so the next step is to learn about XPath and
XSL-FO.
XPath
XPath is a major element in the W3C's XSL standard. An understanding of XPath is fundamental for
advanced use of XML.
Without any XPath knowledge, you will not be able to create XSLT documents.
If you want to learn more about the XPath, please visit our XPath tutorial.
XSL-FO
XSL-FO describes the formatting of XML data for output to screen, paper or other media.
XSL-FO documents are XML files with information about the output layout and output content.
If you want to learn more about XSL-FO, please visit our XSL-FO tutorial.
With Internet Explorer, the unofficial <xml> tag can be used to create an XML data
island.
58
XML Data Embedded in HTML
Here is how it works; assume we have the following XML document ("note.xml"):
Then, in an HTML document, you can embed the XML file above with the <xml> tag. The id
attribute of the <xml> tag defines an ID for the data island, and the src attribute points to the XML
file to embed:
<html>
<body>
<xml id="note" src="note.xml"></xml>
</body>
</html>
However, the embedded XML data is, up to this point, not visible for the user.
The next step is to format and display the data in the data island by binding it to HTML elements.
In the next example, we will embed an XML file called "cd_catalog.xml" into an HTML file.
View "cd_catalog.xml".
<html>
<body>
</body>
</html>
Example explained:
59
The datasrc attribute of the <table> tag binds the HTML table element to the XML data island. The
datasrc attribute refers to the id attribute of the data island.
<td> tags cannot be bound to data, so we are using <span> tags. The <span> tag allows the
datafld attribute to refer to the XML element to be displayed. In this case, it is datafld="ARTIST" for
the <ARTIST> element and datafld="TITLE" for the <TITLE> element in the XML file. As the XML is
read, additional rows are created for each <CD> element.
Using such a standard makes it easier for both news producers and news consumers to produce,
receive, and archive any kind of news information across different hardware, software, and
programming languages.
<nitf>
<head>
<title>Colombia Earthquake</title>
</head>
<body>
<headline>
<hl1>143 Dead in Colombia Earthquake</hl1>
</headline>
<byline>
<bytag>By Jared Kotler, Associated Press Writer</bytag>
</byline>
<dateline>
<location>Bogota, Colombia</location>
<date>Monday January 25 1999 7:28 ET</date>
</dateline>
</body>
</nitf>
XML Parser:
To read and update, create and manipulate an XML document, you will need an XML
parser.
60
Examples
To manipulate an XML document, you need an XML parser. The parser loads the document into your
computer's memory. Once the document is loaded, its data can be manipulated using the DOM. The
DOM treats the XML document as a tree.
To learn more about the XML DOM, please read our XML DOM tutorial.
There are some differences between Microsoft's XML parser and the XML parser used in Mozilla
browsers. In this tutorial we will show you how to create cross browser scripts that will work in both
Internet Explorer and Mozilla browsers.
Microsoft's XML parser is a COM component that comes with Internet Explorer 5 and higher. Once
you have installed Internet Explorer, the parser is available to scripts.
Microsoft's XML parser supports all the necessary functions to traverse the node tree, access the
nodes and their attribute values, insert and delete nodes, and convert the node tree back to XML.
JavaScript:
VBScript:
set xmlDoc=CreateObject("Microsoft.XMLDOM")
ASP:
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
The following code fragment loads an existing XML document ("note.xml") into Microsoft's XML
parser:
61
The first line of the script above creates an instance of the XML parser. The second line turns off
asynchronized loading, to make sure that the parser will not continue execution of the script before
the document is fully loaded. The third line tells the parser to load an XML document called
"note.xml".
Mozilla's XML parser supports all the necessary functions to traverse the node tree, access the
nodes and their attribute values, insert and delete nodes, and convert the node tree back to XML.
To create an instance of the XML parser in Mozilla browsers, use the following code:
JavaScript:
var xmlDoc=document.implementation.createDocument("ns","root",null);
The first parameter, ns, defines the namespace used for the XML document. The second parameter,
root, is the XML root element in the XML file. The third parameter, null, is always null because it is
not implemented yet.
The following code fragment loads an existing XML document ("note.xml") into Mozillas' XML parser:
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
The first line of the script above creates an instance of the XML parser. The second line tells the
parser to load an XML document called "note.xml".
The following example is a cross browser example that loads an existing XML document
("note.xml") into the XML parser:
<html>
<head>
<script type="text/javascript">
var xmlDoc;
function loadXML()
{
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("note.xml");
getmessage();
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation &&
document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
62
xmlDoc.onload=getmessage;
}
else
{
alert('Your browser cannot handle this script');
}
}
function getmessage()
{
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="loadXML()">
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</p>
</body>
</html>
Output:
Important Note
To extract the text (Jani) from an XML element like: <from>Jani</from>, the correct syntax is:
getElementsByTagName("from")[0].childNodes[0].nodeValue
IMPORTANT: getElementsByTagName returns an array of nodes. The array contains all elements
with the specified name within the XML document. In this case there is only one "from" element, but
you still have to specify the array index ( [0] ).
The following code is a cross-browser example on how to load and parse an XML string:
<html>
<body>
<script type="text/javascript">
63
var text="<note>";
text=text+"<to>Tove</to>";
text=text+"<from>Jani</from>";
text=text+"<heading>Reminder</heading>";
text=text+"<body>Don't forget me this weekend!</body>";
text=text+"</note>";
// code for IE
if (window.ActiveXObject)
{
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(text);
}
// code for Mozilla, Firefox, Opera, etc.
else
{
var parser=new DOMParser();
var doc=parser.parseFromString(text,"text/xml");
}
// documentElement always represents the root node
var x=doc.documentElement;
document.write("Text of first child element: ");
document.write(x.childNodes[0].childNodes[0].nodeValue);
document.write("<br />");
document.write("Text of second child element: ");
document.write(x.childNodes[1].childNodes[0].nodeValue);
</script>
</body>
</html>
Output:
Note: Internet Explorer uses the loadXML() method to parse an XML string, while Mozilla browsers
uses the DOMParser object.
XML Namespaces:
Name Conflicts
Since element names in XML are not predefined, a name conflict will occur when two different
documents use the same element names.
<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
64
</table>
<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>
If these two XML documents were added together, there would be an element name conflict because
both documents contain a <table> element with different content and definition.
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
Now there will be no name conflict because the two documents use a different name for their
<table> element (<h:table> and <f:table>).
Using Namespaces
<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table xmlns:f="http://www.w3schools.com/furniture">
65
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
Instead of using only prefixes, we have added an xmlns attribute to the <table> tag to give the
prefix a qualified name associated with a namespace.
The XML namespace attribute is placed in the start tag of an element and has the following syntax:
xmlns:namespace-prefix="namespaceURI"
When a namespace is defined in the start tag of an element, all child elements with the same prefix
are associated with the same namespace.
Note that the address used to identify the namespace is not used by the parser to look up
information. The only purpose is to give the namespace a unique name. However, very often
companies use the namespace as a pointer to a real Web page containing information about the
namespace.
Try to go to http://www.w3.org/TR/html4/.
Default Namespaces
Defining a default namespace for an element saves us from using prefixes in all the child elements.
It has the following syntax:
xmlns="namespaceURI"
<table xmlns="http://www.w3.org/TR/html4/">
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>
<table xmlns="http://www.w3schools.com/furniture">
<name>African Coffee Table</name>
<width>80</width>
66
<length>120</length>
</table>
When you start using XSL, you will soon see namespaces in real use. XSL style sheets are used to
transform XML documents into other formats, like HTML.
If you take a close look at the XSL document below, you will see that most of the tags are HTML
tags. The tags that are not HTML tags have the prefix xsl, identified by the namespace
"http://www.w3.org/1999/XSL/Transform":
XML CDATA:
Parsed Data
When an XML element is parsed, the text between the XML tags is also parsed:
The parser does this because XML elements can contain other elements, as in this example, where
the <name> element contains two other elements (first and last):
67
<name><first>Bill</first><last>Gates</last></name>
<name>
<first>Bill</first>
<last>Gates</last>
</name>
Escape Characters
If you place a character like "<" inside an XML element, it will generate an error because the parser
interprets it as the start of a new element. You cannot write something like this:
To avoid this, you have to replace the "<" character with an entity reference, like this:
Note: Only the characters "<" and "&" are strictly illegal in XML. Apostrophes, quotation marks and
greater than signs are legal, but it is a good habit to replace them.
CDATA
If your text contains a lot of "<" or "&" characters - as program code often does - the XML element
can be defined as a CDATA section.
<script>
<![CDATA[
function matchwo(a,b)
{
if (a < b && a < 0) then
{
return 1
}
68
else
{
return 0
}
}
]]>
</script>
In the example above, everything inside the CDATA section is ignored by the parser.
A CDATA section cannot contain the string "]]>", therefore, nested CDATA sections are not allowed.
Also make sure there are no spaces or line breaks inside the "]]>" string.
XML Encoding:
To let your XML parser understand these characters, you should save your XML
documents as Unicode.
Save the XML file below as Unicode (note that the document does not contain any encoding
attribute):
<?xml version="1.0"?>
<note>
<from>Jani</from>
<to>Tove</to>
<message>Norwegian: æøå. French: êèé</message>
</note>
The file above, note_encode_none_u.xml will NOT generate an error in IE 5+, Firefox, or Opera, but
it WILL generate an error in Netscape 6.2.
If you add an encoding attribute to XML files saved as Unicode, windows encoding values will
generate an error.
The following encoding (open it), will NOT give an error message:
69
The following encoding (open it), will NOT give an error message:
The following encoding (open it), will NOT give an error message:
The following encoding (open it), will NOT generate an error in IE 5+, Firefox, or Opera, but it WILL
generate an error in Netscape 6.2.
Error Messages
If you try to load an XML document into Internet Explorer, you can get two different errors
indicating encoding problems:
You will get this error message if a character in the XML document does not match the encoding
attribute. Normally you will get this error message if your XML document contains "foreign"
characters, and the file was saved with a single-byte encoding editor like Notepad, and no encoding
attribute was specified.
You will get this error message if your file was saved as Unicode/UTF-16 but the encoding attribute
specified a single-byte encoding like Windows-1252, ISO-8859-1 or UTF-8. You can also get this
error message if your document was saved with single-byte encoding, but the encoding attribute
specified a double-byte encoding like UTF-16.
Conclusion
The conclusion is that the encoding attribute has to specify the encoding used when the document
was saved. My best advice to avoid errors is:
XML files can be stored on an Internet server exactly the same way as HTML files.
70
Start Windows Notepad and write the following lines:
Save the file on your web server with a proper name like "note.xml".
To generate an XML response from the server - simply write the following code and save it as an
ASP file on the web server:
<%
response.ContentType="text/xml"
response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.Write("<note>")
response.Write("<from>Jani</from>")
response.Write("<to>Tove</to>")
response.Write("<message>Remember me this weekend</message>")
response.Write("</note>")
%>
Note that the content type of the response must be set to "text/xml".
See how the ASP file will be returned from the server.
If you don't know how to write ASP, please visit our ASP tutorial
XML can be generated from a database without any installed XML software.
To generate an XML database response from the server, simply write the following code and save it
as an ASP file on the web server:
<%
response.ContentType = "text/xml"
set conn=Server.CreateObject("ADODB.Connection")
conn.provider="Microsoft.Jet.OLEDB.4.0;"
conn.open server.mappath("/db/database.mdb")
sql="select fname,lname from tblGuestBook"
set rs=Conn.Execute(sql)
rs.MoveFirst()
response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.write("<guestbook>")
while (not rs.EOF)
response.write("<guest>")
71
response.write("<fname>" & rs("fname") & "</fname>")
response.write("<lname>" & rs("lname") & "</lname>")
response.write("</guest>")
rs.MoveNext()
wend
rs.close()
conn.close()
response.write("</guestbook>")
%>
See the real life database output from the ASP file above.
The example above uses ASP with ADO. If you don't know how to use ADO, please visit our ADO
tutorial.
XML Application:
Note: This example uses a Data Island, which only works in Internet Explorer.
To get your XML document "inside" an HTML page, add an XML Data Island to the HTML page:
72
With the example code above, the XML file "cd_catalog.xml" will be loaded into an "invisible" Data
Island called "xmldso". The async="false" attribute is added to make sure that all the XML data is
loaded before any other HTML processing takes place.
To make the XML data visible on the HTML page, you must "bind" the Data Island to an HTML
element.
To bind the XML data to an HTML table, add a datasrc attribute to the table element, and add
datafld attributes to the span elements inside the table data:
If you have IE 5.0 or higher: See how the XML data is displayed inside an HTML table.
You don't have to use the HTML table element to display XML data. Data from a Data Island can be
displayed anywhere on an HTML page.
All you have to do is to add some <span> or <div> elements to your page. Use the datasrc
attribute to bind the elements to the Data Island, and the datafld attribute to bind each element to
an XML element, like this:
<br />Title:
<span datasrc="#xmldso" datafld="TITLE"></span>
<br />Artist:
<span datasrc="#xmldso" datafld="ARTIST"></span>
<br />Year:
<span datasrc="#xmldso" datafld="YEAR"></span>
or like this:
<br />Title:
<div datasrc="#xmldso" datafld="TITLE"></div>
<br />Artist:
<div datasrc="#xmldso" datafld="ARTIST"></div>
<br />Year:
<div datasrc="#xmldso" datafld="YEAR"></div>
73
If you have IE 5.0 or higher: See how the XML data is displayed inside the HTML elements.
Note that if you use an HTML <div> element, the data will be displayed on a new line.
With the examples above, you will only see one line of your XML data. To navigate to the next line
of data, you have to add some scripting to your code.
To add navigation to the XML Data Island, create a script that calls the movenext() and
moveprevious() methods of the Data Island.
<script type="text/javascript">
function movenext()
{
x=xmldso.recordset
if (x.absoluteposition < x.recordcount)
{
x.movenext()
}
}
function moveprevious()
{
x=xmldso.recordset
if (x.absoluteposition > 1)
{
x.moveprevious()
}
}
</script>
If you have IE 5.0 or higher: See how you can navigate through the XML records.
If you use what you have learned on this page, and a little imagination, you can easily develop this
into a full application.
If you have IE 5.0 or higher: See how you can add a little fancy to this application.
The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0
/ Firefox, Opera 9, and Netscape 7.
74
With an HTTP request, a web page can make a request to, and get a response from a web server -
without reloading the page. The user will stay on the same page, and he or she will not notice that
scripts might request pages, or send data to a server in the background.
By using the XMLHttpRequest object, a web developer can change a page with data from
the server after the page has loaded.
Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When
you start typing in Google's search box, a JavaScript sends the letters off to a server and the server
returns a list of suggestions.
The XMLHttpRequest object is a JavaScript object, and is not specified in any W3C recommendation.
However, the W3C DOM Level 3 "Load and Save" specification contains some similar functionality,
but these are not implemented in any browsers yet. So, at the moment, if you need to send an
HTTP request from a browser, you will have to use the XMLHttpRequest object.
Example
<script type="text/javascript">
var xmlhttp
function loadXMLDoc(url)
{
xmlhttp=null
// code for Mozilla, etc.
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest()
}
// code for IE
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
else
{
alert("Your browser does not support XMLHTTP.")
75
}
}
function state_Change()
{
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
{
// if "OK"
if (xmlhttp.status==200)
{
// ...some code here...
}
else
{
alert("Problem retrieving XML data")
}
}
}
</script>
The syntax is a little bit different in VBScript: Try it yourself using VBScript
Note: An important property in the example above is the onreadystatechange property. This
property is an event handler which is triggered each time the state of the request changes. The
states run from 0 (uninitialized) to 4 (complete). By having the function xmlhttpChange() check for
the state changing, we can tell when the process is complete and continue only if it has been
successful.
All the examples here use the async mode (the third parameter of open() set to true).
The async parameter specifies whether the request should be handled asynchronously or not. True
means that script continues to run after the send() method, without waiting for a response from the
server. false means that the script waits for a response before continuing script processing. By
setting this parameter to false, you run the risk of having your script hang if there is a network or
server problem, or if the request is long (the UI locks while the request is being made) a user may
even see the "Not Responding" message. It is safer to send asynchronously and design your code
around the onreadystatechange event!
More Examples
76
Methods
Method Description
abort() Cancels the current request
getAllResponseHeaders() Returns the complete set of http headers as a string
getResponseHeader("headername") Returns the value of the specified http header
open("method","URL",async,"uname","pswd") Specifies the method, URL, and other optional
attributes of a request
Properties
Property Description
onreadystatechange An event handler for an event that fires at every state change
readyState Returns the state of the object:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseText Returns the response as a string
responseXML Returns the response as XML. This property returns an XML document
object, which can be examined and parsed using W3C DOM node tree
methods and properties
status Returns the status as a number (e.g. 404 for "Not Found" or 200 for
"OK")
statusText Returns the status as a string (e.g. "Not Found" or "OK")
Usually, we save data in databases. However, if we want to make the data more portable,
we can store the data in an XML file.
77
Storing data in XML files is useful if the data is to be sent to applications on non-Windows platforms.
Remember that XML is portable across all platforms and the data will not need to be converted!
First we will learn how to create and save an XML file. The XML file below will be named "test.xml"
and will be stored in the c directory on the server. We will use ASP and Microsoft's XMLDOM object
to create and save the XML file:
<%
Dim xmlDoc, rootEl, child1, child2, p
'Create an XML document
Set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
'Create a root element and append it to the document
Set rootEl = xmlDoc.createElement("root")
xmlDoc.appendChild rootEl
'Create and append child elements
Set child1 = xmlDoc.createElement("child1")
Set child2 = xmlDoc.createElement("child2")
rootEl.appendChild child1
rootEl.appendChild child2
'Add an XML processing instruction
'and insert it before the root element
Set p=xmlDoc.createProcessingInstruction("xml","version='1.0'")
xmlDoc.insertBefore p,xmlDoc.childNodes(0)
'Save the XML file to the c directory
xmlDoc.Save "c:\test.xml"
%>
If you open the saved XML file it will look something like this ("test.xml"):
<?xml version="1.0"?>
<root>
<child1 />
<child2 />
</root>
We will first look at the HTML form that will be used in this example: The HTML form below asks for
the user's name, country, and e-mail address. This information will then be written to an XML file for
storage.
"customers.htm":
<html>
<body>
<form action="saveForm.asp" method="post">
<p><b>Enter your contact information</b></p>
First Name: <input type="text" id="fname" name="fname"><br />
Last Name: <input type="text" id="lname" name="lname"><br />
Country: <input type="text" id="country" name="country"><br />
Email: <input type="text" id="email" name="email"><br />
<input type="submit" id="btn_sub" name="btn_sub" value="Submit">
<input type="reset" id="btn_res" name="btn_res" value="Reset">
78
</form>
</body>
</html>
The action for the HTML form above is set to "saveForm.asp". The "saveForm.asp" file is an ASP
page that will loop through the form fields and store their values in an XML file:
<%
dim xmlDoc
dim rootEl,fieldName,fieldValue,attID
dim p,i
'Do not stop if an error occurs
On Error Resume Next
Set xmlDoc = server.CreateObject("Microsoft.XMLDOM")
xmlDoc.preserveWhiteSpace=true
'Create a root element and append it to the document
Set rootEl = xmlDoc.createElement("customer")
xmlDoc.appendChild rootEl
'Loop through the form collection
for i = 1 To Request.Form.Count
'Eliminate button elements in the form
if instr(1,Request.Form.Key(i),"btn_")=0 then
'Create a field and a value element, and an id attribute
Set fieldName = xmlDoc.createElement("field")
Set fieldValue = xmlDoc.createElement("value")
Set attID = xmlDoc.createAttribute("id")
'Set the value of the id attribute equal to the name of
'the current form field
attID.Text = Request.Form.Key(i)
'Append the id attribute to the field element
fieldName.setAttributeNode attID
'Set the value of the value element equal to
'the value of the current form field
fieldValue.Text = Request.Form(i)
'Append the field element as a child of the root element
rootEl.appendChild fieldName
'Append the value element as a child of the field element
fieldName.appendChild fieldValue
end if
next
'Add an XML processing instruction
'and insert it before the root element
Set p = xmlDoc.createProcessingInstruction("xml","version='1.0'")
xmlDoc.insertBefore p,xmlDoc.childNodes(0)
'Save the XML file
xmlDoc.save "c:\Customer.xml"
'Release all object references
set xmlDoc=nothing
set rootEl=nothing
set fieldName=nothing
set fieldValue=nothing
set attID=nothing
set p=nothing
'Test to see if an error occurred
if err.number<>0 then
response.write("Error: No information saved.")
else
response.write("Your information has been saved.")
79
end if
%>
Note: If the XML file name specified already exists, it will be overwritten!
The XML file that will be produced by the code above will look something like this ("Customer.xml"):
Internet Explorer 5 introduced DHTML behaviors. Behaviors are a way to add DHTML
functionality to HTML elements with the ease of CSS.
IE5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements
with the ease of CSS.
How do behaviors work? By using XML we can link behaviors to any element in a web page and
manipulate that element.
DHTML behaviors do not use a <script> tag. Instead, they are using a CSS attribute called
"behavior". This "behavior" specifies a URL to an HTC file which contains the actual behavior (The
HTC file is written in XML).
Syntax
behavior: url(some_filename.htc)
Note: The behavior attribute is only supported by IE 5 and higher, all other browsers will ignore it.
This means that Mozilla, Firefox, Netscape and other browsers will only see the regular content and
IE 5+ can see the DHTML behaviors.
Example
The following HTML file has a <style> element that defines a behavior for the <h1> element:
80
<html>
<head>
<style type="text/css">
h1 { behavior: url(behave.htc) }
</style>
</head>
<body>
<h1>Mouse over me!!!</h1>
</body>
</html>
<script type="text/javascript">
function hig_lite()
{
element.style.color='red'
}
function low_lite()
{
element.style.color='blue'
}
</script>
The behavior file contains a JavaScript and the event handlers for the script.
The following HTML file has a <style> element that defines a behavior for elements with an id of
"typing":
<html>
<head>
<style type="text/css">
#typing
{
behavior:url(typing.htc);
font-family:'courier new';
}
</style>
</head>
<body>
<span id="typing" speed="100">IE5 introduced DHTML behaviors.
Behaviors are a way to add DHTML functionality to HTML elements
with the ease of CSS.<br /><br />How do behaviors work?<br />
By using XML we can link behaviors to any element in a web page
and manipulate that element.</p>
</span>
</body>
</html>
81
The XML document "typing.htc" is shown below:
Try it yourself
XML Editors:
If you are serious about XML, you will benefit from using a professional XML Editor.
XML is Text-based
One great thing about XML is that XML files can be created and edited using a simple text-editor like
Notepad.
However, when you start working with XML, you will soon find that it is better to edit XML
documents using a professional XML editor.
Many web developers use Notepad to edit both HTML and XML documents because Notepad is
included with the most common OS and it is simple to use. Personally I often use Notepad for quick
editing of simple HTML, CSS, and XML files.
But, if you use Notepad for XML editing, you will soon run into problems.
Notepad does not know that you are writing XML, so it will not be able to assist you.
82
Today XML is an important technology, and development projects use XML-based technologies like:
To be able to write error-free XML documents, you will need an intelligent XML editor!
XML Editors
Professional XML editors will help you to write error-free XML documents, validate your XML against
a DTD or a schema, and force you to stick to a valid XML structure.
Altova's XMLSpy
At W3Schools we have been using XMLSpy for many years. XMLSpy is our favorite XML editor. These
are some of the features we especially like:
• Easy to use
• Syntax coloring
• Automatic tag completion
• Context-sensitive entry helpers
• Automatic well-formedness check
• Built in DTD and/or XML Schema-based validation
• Easy switching between text view and grid view
• Built in graphical XML Schema editor
• Powerful conversion utilities
• Database import and export
• Built in templates for most XML document types
• Built in XPath 1.0/2.0 analyzer
• XSLT 1.0/2.0 editor, profiler, and debugger
• XQuery editor, profiler, and debugger
• SOAP client and debugger
• Graphical WSDL editor
• Powerful project management capabilities
• Code generation in Java, C++, and C#
83
XML Quiz:
False
True
4. What is the correct syntax of the declaration which defines the XML version?
<?xml version="1.0"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
No
84
Yes
<?xml version="1.0"?>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
No
Yes
<?xml version="1.0"?>
<note>
<to age="29">Tove</to>
<from>Jani</from>
</note>
No
Yes
85
12. Is this a "well formed" XML document?
<?xml version="1.0"?>
<note>
<to age=29>Tove</to>
<from>Jani</from>
</note>
No
Yes
False
True
<h1>
<1dollar>
All 3 names are incorrect
<Note>
<first name>
<age>
All 3 names are incorrect
<NAME>
<phone number>
All 3 names are incorrect
<xmldocument>
<7eleven>
True
False
86
<?xml-stylesheet type="text/xsl" href="mystyle.xsl" ?>
<stylesheet type="text/xsl" href="mystyle.xsl" />
<link type="text/xsl" href="mystyle.xsl" />
XPath Introduction:
Before you continue you should have a basic understanding of the following:
87
• HTML / XHTML
• XML / XML Namespaces
If you want to study these subjects first, find the tutorials on our Home page.
What is XPath?
XPath uses path expressions to select nodes or node-sets in an XML document. These path
expressions look very much like the expressions you see when you work with a traditional computer
file system.
XPath includes over 100 built-in functions. There are functions for string values, numeric values,
date and time comparison, node and QName manipulation, sequence manipulation, Boolean values,
and more.
XPath is a major element in the XSLT standard. Without XPath knowledge you will not be able to
create XSLT documents.
XQuery and XPointer are both built on XPath expressions. XQuery 1.0 and XPath 2.0 share the same
data model and support the same functions and operators.
XPath was designed to be used by XSLT, XPointer and other XML parsing software.
You can read more about the XPath standard in our W3C tutorial.
In XPath, there are seven kinds of nodes: element, attribute, text, namespace,
processing-instruction, comment, and document (root) nodes.
88
XPath Terminology
Nodes
In XPath, there are seven kinds of nodes: element, attribute, text, namespace, processing-
instruction, comment, and document (root) nodes. XML documents are treated as trees of nodes.
The root of the tree is called the document node (or root node).
Atomic values
J K. Rowling
"en"
Items
Relationship of Nodes
Parent
In the following example; the book element is the parent of the title, author, year, and price:
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
89
Children
In the following example; the title, author, year, and price elements are all children of the book
element:
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
Siblings
In the following example; the title, author, year, and price elements are all siblings:
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
Ancestors
In the following example; the ancestors of the title element are the book element and the bookstore
element:
<bookstore>
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
Descendants
In the following example; descendants of the bookstore element are the book, title, author, year,
and price elements:
<bookstore>
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
90
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
XPath uses path expressions to select nodes or node-sets in an XML document. The node
is selected by following a path or steps.
Selecting Nodes
XPath uses path expressions to select nodes in an XML document. The node is selected by following
a path or steps. The most useful path expressions are listed below:
Expression Description
nodename Selects all child nodes of the node
/ Selects from the root node
// Selects nodes in the document from the current node that match the selection no
matter where they are
. Selects the current node
.. Selects the parent of the current node
@ Selects attributes
Examples
In the table below we have listed some path expressions and the result of the expressions:
91
bookstore//book Selects all book elements that are descendant of the bookstore
element, no matter where they are under the bookstore element
//@lang Selects all attributes that are named lang
Predicates
Predicates are used to find a specific node or a node that contains a specific value.
Examples
In the table below we have listed some path expressions with predicates and the result of the
expressions:
Wildcard Description
* Matches any element node
@* Matches any attribute node
node() Matches any node of any kind
Examples
In the table below we have listed some path expressions and the result of the expressions:
92
//title[@*] Selects all title elements which have any attribute
By using the | operator in an XPath expression you can select several paths.
Examples
In the table below we have listed some path expressions and the result of the expressions:
XPath Axes
AxisName Result
ancestor Selects all ancestors (parent, grandparent, etc.) of the current
node
ancestor-or-self Selects all ancestors (parent, grandparent, etc.) of the current
node and the current node itself
attribute Selects all attributes of the current node
child Selects all children of the current node
descendant Selects all descendants (children, grandchildren, etc.) of the
current node
descendant-or-self Selects all descendants (children, grandchildren, etc.) of the
current node and the current node itself
following Selects everything in the document after the closing tag of the
current node
93
following-sibling Selects all siblings after the current node
namespace Selects all namespace nodes of the current node
parent Selects the parent of the current node
preceding Selects everything in the document that is before the start tag
of the current node
preceding-sibling Selects all siblings before the current node
self Selects the current node
An absolute location path starts with a slash ( / ) and a relative location path does not. In both
cases the location path consists of one or more steps, each separated by a slash:
• an axis (defines the tree-relationship between the selected nodes and the current node)
• a node-test (identifies a node within an axis)
• zero or more predicates (to further refine the selected node-set)
axisname::nodetest[predicate]
Examples
Example Result
child::book Selects all book nodes that are children of the current node
attribute::lang Selects the lang attribute of the current node
child::* Selects all children of the current node
attribute::* Selects all attributes of the current node
child::text() Selects all text child nodes of the current node
child::node() Selects all child nodes of the current node
descendant::book Selects all book descendants of the current node
ancestor::book Selects all book ancestors of the current node
ancestor-or-self::book Selects all book ancestors of the current node - and the
current as well if it is a book node
child::*/child::price Selects all price grandchildren of the current node
94
XPath Operators
Let's try to learn some basic XPath syntax by looking at some examples.
"books.xml":
95
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
Selecting Nodes
We will use the Microsoft XMLDOM object to load the XML document and the selectNodes() function
to select nodes from the XML document:
set xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("books.xml")
xmlDoc.selectNodes(path expression)
The following example selects all the book nodes under the bookstore element:
xmlDoc.selectNodes("/bookstore/book")
The following example selects only the first book node under the bookstore element:
xmlDoc.selectNodes("/bookstore/book[0]")
Note: IE5 and later has implemented that [0] should be the first node, but according to the W3C
standard it should have been [1]!!
A Workaround!
To solve the [0] and [1] problem in IE5+, you can set the SelectionLanguage to XPath.
96
The following example selects only the first book node under the bookstore element:
Try it yourself
The following example selects the text from all the price nodes:
xmlDoc.selectNodes("/bookstore/book/price/text()")
The following example selects all the price nodes with a price higher than 35:
xmlDoc.selectNodes("/bookstore/book[price>35]/price")
The following example selects all the title nodes with a price higher than 35:
xmlDoc.selectNodes("/bookstore/book[price>35]/title")
XPath Summary
This tutorial has taught you how to find information in an XML document.
You have learned how to use XPath to navigate through elements and attributes in an XML
document.
You have also learned how to use some of the standard functions that are built-in in XPath.
The next step is to learn about XSLT, XQuery, XLink, and XPointer.
XSLT
97
XSLT is the style sheet language for XML files.
With XSLT you can transform XML documents into other formats, like XHTML.
If you want to learn more about XSLT, please visit our XSLT tutorial.
XQuery
XQuery is designed to query anything that can appear as XML, including databases.
If you want to learn more about XQuery, please visit our XQuery tutorial.
XLink and XPointer define a standard way of creating hyperlinks in XML documents.
If you want to learn more about XLink and XPointer, please visit our XLink and XPointer tutorial.
Introduction to XSL-FO:
Before you study XSL-FO you should have a basic understanding of XML and XML Namespaces.
If you want to study these subjects first, please read our XML Tutorial.
What is XSL-FO?
XSL-FO is an XML-based markup language describing the formatting of XML data for output to
screen, paper or other media.
98
Yes it is, but we will give you an explanation:
Styling is both about transforming and formatting information. When the World Wide Web
Consortium (W3C) made their first XSL Working Draft, it contained the language syntax for both
transforming and formatting XML documents.
Later, the XSL Working Group at W3C split the original draft into separate Recommendations:
The rest of this tutorial is about formatting XML documents: XSL-FO, also called XSL.
XSL-FO became a W3C Recommendation 15. October 2001. Formally named XSL.
To read more about the XSL activities at W3C please read our W3C Tutorial.
XSL-FO Documents
XSL-FO documents are XML files with output information. They contain information about the output
layout and output contents.
XSL-FO documents are stored in files with a .fo or a .fob file extension. It is also quite common to
see XSL-FO documents stored with an .xml extension, because this makes them more accessible to
XML editors.
<fo:layout-master-set>
<fo:simple-page-master master-name="A4">
<!-- Page template goes here -->
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="A4">
<!-- Page content goes here -->
</fo:page-sequence>
</fo:root>
99
Structure explained
XSL-FO documents are XML documents, and must always start with an XML declaration:
The <fo:root> element is the root element of XSL-FO documents. The root element also declares
the namespace for XSL-FO:
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<!-- The full XSL-FO document goes here -->
</fo:root>
<fo:layout-master-set>
<!-- All page templates go here -->
</fo:layout-master-set>
Each <fo:simple-page-master> element contains a single page template. Each template must have
a unique name (master-name):
<fo:simple-page-master master-name="A4">
<!-- One page template goes here -->
</fo:simple-page-master>
One or more <fo:page-sequence> elements describe the page contents. The master-reference
attribute refers to the simple-page-master template with the same name:
<fo:page-sequence master-reference="A4">
<!-- Page content goes here -->
</fo:page-sequence>
Note: The master-reference "A4" does not actually describe a predefined page format. It is just a
name. You can use any name like "MyPage", "MyTemplate", etc.
XSL-FO Areas
The XSL formatting model defines a number of rectangular areas (boxes) to display output.
All output (text, pictures, etc.) will be formatted into these boxes and then displayed or printed to a
target media.
• Pages
• Regions
• Block areas
• Line areas
100
• Inline areas
XSL-FO Pages
XSL-FO output is formatted into pages. Printed output will normally go into many separate pages.
Browser output will often go into one long page.
XSL-FO Regions
XSL-FO Block areas define small block elements (the ones that normally starts with a new line) like
paragraphs, tables and lists.
XSL-FO Block areas can contain other Block areas, but most often they contain Line areas.
XSL-FO Inline areas define text inside Lines (bullets, single character, graphics, and more).
"Blocks" of content "Flows" into "Pages" and then to the output media.
XSL-FO output is normally nested inside <fo:block> elements, nested inside <fo:flow> elements,
nested inside <fo:page-sequence> elements:
101
<fo:page-sequence>
<fo:flow flow-name="xsl-region-body">
<fo:block>
<!-- Output goes here -->
</fo:block>
</fo:flow>
</fo:page-sequence>
XSL-FO Example
<fo:layout-master-set>
<fo:simple-page-master master-name="A4">
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="A4">
<fo:flow flow-name="xsl-region-body">
<fo:block>Hello W3Schools</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
Hello W3Schools
XSL-FO Flow
102
XSL-FO Page Sequences
Each output page refers to a page master which defines the layout.
XSL-FO Flow
XSL-FO pages are filled with content from the <fo:flow> element.
The <fo:flow> element contains all the elements to be printed to the page.
When the page is full, the same page master will be used over (and over) again until all the text is
printed.
Where To Flow?
The value of the flow-name attribute defines where the content of the <fo:flow> element will go.
XSL-FO Pages:
XSL-FO uses page templates called "Page Masters" to define the layout of pages.
XSL-FO uses page templates called "Page Masters" to define the layout of pages. Each template
must have a unique name:
<fo:simple-page-master master-name="intro">
<fo:region-body margin="5in" />
</fo:simple-page-master>
<fo:simple-page-master master-name="left">
<fo:region-body margin-left="2in" margin-right="3in" />
</fo:simple-page-master>
103
<fo:simple-page-master master-name="right">
<fo:region-body margin-left="3in" margin-right="2in" />
</fo:simple-page-master>
In the example above, three <fo:simple-page-master> elements, define three different templates.
Each template (page-master) has a different name.
The first template is called "intro". It could be used as a template for introduction pages.
The second and third templates are called "left" and "right". They could be used as templates for
even and odd page numbers.
Note that the region-before, region-after, region-start, and region-end is a part of the body region.
To avoid text in the body region to overwrite text in these regions, the body region must have
margins at least the size of these regions.
104
Margin Top
REGION BEFORE
M R M
a E R a
r G E r
g I G g
i O I i
REGION BODY
n N O n
N
L S R
e T E i
f A N g
t R D h
T t
REGION AFTER
Margin Bottom
XSL-FO Example
<fo:simple-page-master master-name="A4"
page-width="297mm" page-height="210mm"
margin-top="1cm" margin-bottom="1cm"
margin-left="1cm" margin-right="1cm">
<fo:region-body margin="3cm"/>
<fo:region-before extent="2cm"/>
<fo:region-after extent="2cm"/>
<fo:region-start extent="2cm"/>
<fo:region-end extent="2cm"/>
</fo:simple-page-master>
The code above defines a "Simple Page Master Template" with the name "A4".
The width of the page is 297 millimeters and the height is 210 millimeters.
105
The top, bottom, left, and right margins of the page are all 1 centimeter.
The before, after, start, and end regions (of the body) are all 2 centimeters.
The width of the body in the example above can be calculated by subtracting the left and right
margins and the region-body margins from the width of the page itself:
Note that the regions (region-start and region-end) are not a part of the calculation. As described
earlier, these regions are parts of the body.
XSL-FO Blocks:
XSL-FO output is normally nested inside <fo:block> elements, nested inside <fo:flow> elements,
nested inside <fo:page-sequence> elements:
<fo:page-sequence>
<fo:flow flow-name="xsl-region-body">
<fo:block>
<!-- Output goes here -->
</fo:block>
</fo:flow>
</fo:page-sequence>
<fo:block
border-width="1mm">
This block of output will have a one millimeter border around it.
</fo:block>
Since block areas are rectangular boxes, they share many common area properties:
space before
margin
106
border
padding
content
space after
The space before and space after is the empty space separating the block from the other blocks.
The border is the rectangle drawn around the external edge of the area. It can have different
widths on all four sides. It can also be filled with different colors and background images.
The padding is the area between the border and the content area.
The content area contains the actual content like text, pictures, graphics, or whatever.
Block Margin
• margin
• margin-top
• margin-bottom
• margin-left
• margin-right
Block Border
• border-style
• border-before-style
• border-after-style
• border-start-style
• border-end-style
• border-top-style (same as border-before)
• border-bottom-style (same as border-after)
• border-left-style (same as border-start)
• border-right-style (same as border-end)
• border-color
• border-before-color
• border-after-color
• border-start-color
107
• border-end-color
• border-top-color (same as border-before)
• border-bottom-color (same as border-after)
• border-left-color (same as border-start)
• border-right-color (same as border-end)
• border-width
• border-before-width
• border-after-width
• border-start-width
• border-end-width
• border-top-width (same as border-before)
• border-bottom-width (same as border-after)
• border-left-width (same as border-start)
• border-right-width (same as border-end)
Block Padding
• padding
• padding-before
• padding-after
• padding-start
• padding-end
• padding-top (same as padding-before)
• padding-bottom (same as padding-after)
• padding-left (same as padding-start)
• padding-right (same as padding-end)
Block Background
• background-color
• background-image
• background-repeat
• background-attachment (scroll or fixed)
<fo:block
font-size="12pt"
font-family="sans-serif">
This block of output will be written in a 12pt sans-serif font.
</fo:block>
Font attributes:
108
• font-family
• font-weight
• font-style
• font-size
• font-variant
Text attributes:
• text-align
• text-align-last
• text-indent
• start-indent
• end-indent
• wrap-option (defines word wrap)
• break-before (defines page breaks)
• break-after (defines page breaks)
• reference-orientation (defines text rotation in 90" increments)
Example
<fo:block
font-size="14pt" font-family="verdana" color="red"
space-before="5mm" space-after="5mm">
W3Schools
</fo:block>
<fo:block
text-indent="5mm"
font-family="verdana" font-size="12pt"
space-before="5mm" space-after="5mm">
At W3Schools you will find all the Web-building tutorials you
need, from basic HTML and XHTML to advanced XML, XSL, Multimedia
and WAP.
</fo:block>
Result:
W3Schools
At W3Schools you will find all the Web-building
tutorials you need, from basic HTML and XHTML to
advanced XML, XSL, Multimedia and WAP.
When you look at the example above, you can see that it will take a lot of code to produce a
document with many headers and paragraphs.
Normally XSL-FO document do not combine formatting information and content like we have done
here.
With a little help from XSLT we can put the formatting information into templates and write a
cleaner content.
109
You will learn more about how to combine XSL-FO with XSLT templates in a later chapter in this
tutorial.
XSL-FO Lists:
<fo:list-block>
<fo:list-item>
<fo:list-item-label>
<fo:block>*</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block>Volvo</fo:block>
</fo:list-item-body>
</fo:list-item>
<fo:list-item>
<fo:list-item-label>
<fo:block>*</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block>Saab</fo:block>
</fo:list-item-body>
</fo:list-item>
</fo:list-block>
* Volvo
* Saab
XSL-FO Tables:
110
XSL-FO Tables
The XSL-FO table model is not very different from the HTML table model.
• fo:table-and-caption
• fo:table
• fo:table-caption
• fo:table-column
• fo:table-header
• fo:table-footer
• fo:table-body
• fo:table-row
• fo:table-cell
XSL-FO uses the <fo:table-and-caption> element to define a table. It contains a <fo:table> and
an optional <fo:caption> element.
<fo:table-and-caption>
<fo:table>
<fo:table-column column-width="25mm"/>
<fo:table-column column-width="25mm"/>
<fo:table-header>
<fo:table-row>
<fo:table-cell>
<fo:block font-weight="bold">Car</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block font-weight="bold">Price</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-header>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block>Volvo</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block>$50000</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row>
<fo:table-cell>
<fo:block>SAAB</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block>$48000</fo:block>
</fo:table-cell>
111
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:table-and-caption>
Car Price
Volvo $50000
SAAB $48000
<fo:block
font-size="14pt" font-family="verdana" color="red"
space-before="5mm" space-after="5mm">
W3Schools
</fo:block>
<fo:block
text-indent="5mm"
font-family="verdana" font-size="12pt"
space-before="5mm" space-after="5mm">
At W3Schools you will find all the Web-building tutorials you
need, from basic HTML and XHTML to advanced XML, XSL, Multimedia
and WAP.
</fo:block>
Result:
W3Schools
At W3Schools you will find all the Web-building
tutorials you need, from basic HTML and XHTML to
advanced XML, XSL, Multimedia and WAP.
112
<header>
W3Schools
</header>
<paragraph>
At W3Schools you will find all the Web-building tutorials you
need, from basic HTML and XHTML to advanced XML, XSL, Multimedia
and WAP.
</paragraph>
<xsl:template match="header">
<fo:block
font-size="14pt" font-family="verdana" color="red"
space-before="5mm" space-after="5mm">
<xsl:apply-templates/>
</fo:block>
</xsl:template>
<xsl:template match="paragraph">
<fo:block
text-indent="5mm"
font-family="verdana" font-size="12pt"
space-before="5mm" space-after="5mm">
<xsl:apply-templates/>
</fo:block>
</xsl:template>
XQuery Tutorial:
The best way to explain XQuery is to say that XQuery is to XML what SQL is to database
tables.
XQuery is designed to query XML data - not just XML files, but anything that can appear
as XML, including databases.
Before you continue you should have a basic understanding of the following:
• HTML / XHTML
• XML / XML Namespaces
• XPath
If you want to study these subjects first, find the tutorials on our Home page.
113
What is XQuery?
XQuery is a language for finding and extracting elements and attributes from XML documents.
"Select all CD records with a price less than $10 from the CD collection stored in the XML document
called cd_catalog.xml"
XQuery 1.0 and XPath 2.0 share the same data model and support the same functions and
operators. If you have already studied XPath you will have no problems with understanding XQuery.
"books.xml":
114
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
Functions
doc("books.xml")
Path Expressions
The following path expression is used to select all the title elements in the "books.xml" file:
doc("books.xml")/bookstore/book/title
(/bookstore selects the bookstore element, /book selects all the book elements under the bookstore
element, and /title selects all the title elements under each book element)
115
Predicates
XQuery uses predicates to limit the extracted data from XML documents.
The following predicate is used to select all the book elements under the bookstore element that
have a price element with a value that is less than 30:
doc("books.xml")/bookstore/book[price<30]
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
We will use the "books.xml" document in the examples below (same XML file as in the previous
chapter).
doc("books.xml")/bookstore/book[price>30]/title
The expression above will select all the title elements under the book elements that are under the
bookstore element that have a price element with a value that is higher than 30.
The following FLWOR expression will select exactly the same as the path expression above:
for $x in doc("books.xml")/bookstore/book
where $x/price>30
return $x/title
for $x in doc("books.xml")/bookstore/book
where $x/price>30
order by $x/title
116
return $x/title
The for clause selects all book elements under the bookstore element into a variable called $x.
The where clause selects only book elements with a price element with a value greater than 30.
The order by clause defines the sort-order. Will be sort by the title element.
The return clause specifies what should be returned. Here it returns the title elements.
We will use the "books.xml" document in the examples below (same XML file as in the previous
chapters).
for $x in doc("books.xml")/bookstore/book/title
order by $x
return $x
The expression above will select all the title elements under the book elements that are under the
bookstore element, and return the title elements in alphabetical order.
Now we want to list all the book-titles in our bookstore in an HTML list. We add <ul> and <li> tags
to the FLWOR expression:
<ul>
{
for $x in doc("books.xml")/bookstore/book/title
order by $x
return <li>{$x}</li>
}
</ul>
<ul>
<li><title lang="en">Everyday Italian</title></li>
117
<li><title lang="en">Harry Potter</title></li>
<li><title lang="en">Learning XML</title></li>
<li><title lang="en">XQuery Kick Start</title></li>
</ul>
Now we want to eliminate the title element, and show only the data inside the title element:
<ul>
{
for $x in doc("books.xml")/bookstore/book/title
order by $x
return <li>{data($x)}</li>
}
</ul>
<ul>
<li>Everyday Italian</li>
<li>Harry Potter</li>
<li>Learning XML</li>
<li>XQuery Kick Start</li>
</ul>
In XQuery, there are seven kinds of nodes: element, attribute, text, namespace,
processing-instruction, comment, and document (root) nodes.
XQuery Terminology
Nodes
In XQuery, there are seven kinds of nodes: element, attribute, text, namespace, processing-
instruction, comment, and document (root) nodes. XML documents are treated as trees of nodes.
The root of the tree is called the document node (or root node).
118
Atomic values
J K. Rowling
"en"
Items
Relationship of Nodes
Parent
In the following example; the book element is the parent of the title, author, year, and price:
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
Children
In the following example; the title, author, year, and price elements are all children of the book
element:
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
Siblings
In the following example; the title, author, year, and price elements are all siblings:
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
119
</book>
Ancestors
In the following example; the ancestors of the title element are the book element and the bookstore
element:
<bookstore>
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
Descendants
In the following example; descendants of the bookstore element are the book, title, author, year,
and price elements:
<bookstore>
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
XQuery is case-sensitive and XQuery elements, attributes, and variables must be valid
XML names.
• XQuery is case-sensitive
• XQuery elements, attributes, and variables must be valid XML names
• An XQuery string value can be in single or double quotes
• An XQuery variable is defined with a $ followed by a name, e.g. $bookstore
• XQuery comments are delimited by (: and :), e.g. (: XQuery Comment :)
120
Look at the following example:
for $x in doc("books.xml")/bookstore/book
return if ($x/@category="CHILDREN")
then <child>{data($x/title)}</child>
else <adult>{data($x/title)}</adult>
Notes on the "if-then-else" syntax: parentheses around the if expression are required. else is
required, but it can be just else ().
<adult>Everyday Italian</adult>
<child>Harry Potter</child>
<adult>Learning XML</adult>
<adult>XQuery Kick Start</adult>
XQuery Comparisons
The difference between the two comparison methods are shown below.
$bookstore//book/@q > 10
The expression above returns true if any q attributes
have values greater than 10.
$bookstore//book/@q gt 10
The expression above returns true if there is only one
q attribute returned by the expression, and its value
is greater than 10. If more than one q is returned,
an error occurs.
121