Web Design & Development

Writing XML

XML Syntax

XML can be considered user friendly because you are basically inventing your own tags and structure. However, it is also unforgiving if you stray from the proper format. Here are the basic rules you need to follow:

All XML documents must have a root element
All XML doucments must contain a single tag pair to define a root elements
All other elements must be within the root element.
All elements can have sub-elements also known as child elements
Child elements must be nested within their parent element.
All XML tags are case sensitive
All XML attribute values must be quoted
All XML elements must have a closing tag or must self terminate
All XML elements must be properly named
- Names can contain letters, numbers and other characters
- Names must not start with a number or punctuation character
- Names must not start with the letters xml, XML or Xml
- Names cannot contain spaces although underscores (_) are fine

The following example is a set of notes stored as XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<moonlanding>
<note date="07/19/1969">
<to>Buzz Aldrin</to>
<from>Neil A. Armstrong</from>
<heading>Moon Landing Soon</heading>
<body>Almost there</body>
</note>
<note date="07/20/1969">
<to>Buzz Aldrin</to>
<from>Neil A. Armstrong</from>
<heading>Moon Landing</heading>
<body>We made it!</body>
</note>
</moonlanding>

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.). 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.

Great! So now we have defined our elements in our XML. What next? Well, if you put the above code in a text file and called it demo.xml and then opened it in your web browser it would look like this: demo.xml which was not what we intended. But again, XML is all about storing data. Now we need to make it display like a Web page. That requires the use of Extensible StyleSheet Language (XSL).

Extensible StyleSheet Language (XSL)

XSL tells our browser (or at least browsers above and beyond the versions IE 5.0 amd Netscape 6.0) how to display our data.

XSL's description is actually intertwined with the XML description above. However, here is a basic description, "while many XML applications currently support cascading style sheets (CSS), a more extensible stylesheet specification exists, called the Extensible Style Sheet Language. By using XSL, you ensure that your XML documents are formatted the same no matter which application or platform they appear on." (Spainhour & Eckstein, p. 125)

XSL is a powerful set of constructs that allows developers to:

transform XML into XHTML
filter and sort XML data
define parts of an XML document
format XML data based on the data value
output XML data to different devices

XSL consists of three parts:

XSLT for transforming XML documents
XPath for defining parts of an XML document
XSL Formating Objects for formatting XML documents

Lets make an XSL document for our above XML:

<?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>
<head>
<title>Apollo Lands</title>
</head>
<body>
<h2>Apollo Lands</h2>

<xsl:for-each select="moonlanding/note"><P />
Note header: <xsl:value-of select="heading" />
</xsl:for-each>

</body>
</html>
</xsl:template>
</xsl:stylesheet>

and lets call the above "demo.xsl".

Now that we have this stylesheet template, we need to tell our XML document that we want to use it so we add a tag to the XML document itself so the code looks like this:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="demo.xsl"?>
<moonlanding>
<note date="07/19/1969">
<to>Buzz Aldrin</to>
<from>Neil A. Armstrong</from>
<heading>Moon Landing Soon</heading>
<body>Almost there</body>
</note>
<note date="07/20/1969">
<to>Buzz Aldrin</to>
<from>Neil A. Armstrong</from>
<heading>Moon Landing</heading>
<body>We made it!</body>
</note>
</moonlanding>

Now try it again: demo2.xml

Using Data Stored in a File

OK, thats all good, but lets say I want to have data in one location and be able to use that data on the Web. Then what? Well, first you make the data file. My sample looks like this:

<?xml version="1.0" encoding="ISO-8859-1"?>
<collection>
<title>Anne's List</title>
<book id="1">
<title>The Little Prince</title>
<type>Paperback</type>
</book>
<book id="2">
<title>The Power of Now</title>
<type>Hardback</type>
</book>
<book id="3">
<title>And Then You Are a Genious</title>
<type>Hardback</type>
</book>
<book id="4">
<title>Shipping News</title>
<type>Paperback</type>
</book>
</collection>

I'll call this one anne_list.xml

Great but its ugly. Lets make an XSL that tells it what it should look like and also ask it to get the data from the above. That would look something like this:

<?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>
<table border="1">
<tr>
<th>TITLE</th>
<th>TYPE</th>
</tr>
<xsl:for-each select="collection/book">
<tr>
<td><xsl:value-of select="title" /></td>
<td><xsl:value-of select="type" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

And I will call that anne_list.xsl (notice this is a style sheet)

Next I have to tell my above anne_list.xml file to use this style sheet. I will add this to the top like this:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="anne_list.xsl"?>
<collection>
<title>Anne's List</title>
<book id="1">
<title>The Little Prince</title>
<type>Paperback</type>
</book>
<book id="2">
<title>The Power of Now</title>
<type>Hardback</type>
</book>
<book id="3">
<title>And Then You Are a Genious</title>
<type>Hardback</type>
</book>
<book id="4">
<title>Shipping News</title>
<type>Paperback</type>
</book>
</collection>

Lets call this one anne_list2.xml so you can see the difference. Cool huh? Thats all you really need

Additional Control of your Document

You will likely want to look into the following elements and functions that can be used in XSL template to further control the data:

sort - which would look like this:

<xsl:for-each select="collection/book">
<xsl:sort select="title"/>

<xsl:for-each select="collection/book">
<xsl:if test="type='Paperback'">

choose

<xsl:choose>
<xsl:when test="type='Paperback'">
<td bgcolor="red"><xsl:value-of select="title" /></td>
<td bgcolor="red"><xsl:value-of select="type" /></td>
</xsl:when>
<xsl:otherwise>
<td bgcolor="blue"><xsl:value-of select="title" /></td>
<td bgcolor="blue"><xsl:value-of select="type" /></td>
</xsl:otherwise>
</xsl:choose>

contains

<xsl:for-each select="collection/book[title=contains(title,'The')]">

starts-with

<xsl:for-each select="collection/book[title=starts-with(title,'The')]">

Lets try some of these like this:

<?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>
<table border="1">
<tr>
<th>TITLE</th>
<th>TYPE</th>
</tr>
<xsl:for-each select="collection/book[title=contains(title,'The')]">
<xsl:sort select="title"/>
<xsl:choose>
<xsl:when test="type='Paperback'">
<td bgcolor="red"><xsl:value-of select="title" /></td>
<td bgcolor="red"><xsl:value-of select="type" /></td>
</xsl:when>
<xsl:otherwise>
<td bgcolor="blue"><xsl:value-of select="title" /></td>
<td bgcolor="blue"><xsl:value-of select="type" /></td>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Lets call this one anne_list2.xsl and then call it again from a new xml file: anne_list3.xml

Adding Images to your XML/XSL

Lets take a look at the following XML file. Notice there is now an area called "pic". It could have been called anything.

We will call this dvdcollection.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="dvdcollection.xsl"?>
<dvds>
<name id="1">
<dvdtitle>A Bridge Too Far</dvdtitle>
<starring>Michael Caine, Sean Connery, Gene Hackman, Anthony Hopkins, Robert Redford</starring>
<director>Richard Attenborough</director>
<rating>PG</rating>
<dvdreleasedate>May 1, 2001</dvdreleasedate>
<runtime>176</runtime>
<pic>images/abridgetoofar.jpeg</pic>
</name>
<name id="2">
<dvdtitle>Barefoot in the Park</dvdtitle>
<starring>Robert Redford, Jane Fonda</starring>
<director>Gene Saks</director>
<rating>G</rating>
<dvdreleasedate>August 19, 2003</dvdreleasedate>
<runtime>105</runtime>
<pic>images/barefootinthepark.jpeg</pic>
</name>
</dvds>

Great, not that thats done, we need an XSL file that will call the images so they appear on the screen. Lets call this one dvdcollection.xsl:

<?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>
<head>
<title>DVD Collection</title>
</head>
<body>
<h2 style="text-align:center">Sample DVD Collection</h2>

<table cellpadding="4">
<tr style="background-color:orange;">
<th>Picture</th>
<th>Title</th>
<th>Rating</th>
<th>DVD Release Date</th>
<th>Runtime</th>
</tr>
<xsl:for-each select="dvds/name">
<xsl:sort select="dvdtitle"/>
<tr>
<td><img src="{pic}" alt="dvds" /></td>
<td><xsl:value-of select="dvdtitle" /></td>
<td><xsl:value-of select="rating" /></td>
<td><xsl:value-of select="dvdreleasedate" /></td>
<td><xsl:value-of select="runtime" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Then of course you need the actual images. For this demo you need to make a directory called "images" wherever you put your XML and XSL files. Then put these in that images directory:

Click here to see what should have happened.

Document Type Definitions (DTD)

However, if you are going to share data between applications or servers or the like you are going to want to create a DTD. This is not required to run XML but it is required if you want to share the data with more than one program or application. Basically a DTD defines the buidling blocks used in the XML document. It defines the structure with a list of legal parameters. Using a DTD the XML files can carry a description of its own format along with it.

Additional Control of your Document

Elements and functions that can be used in XSL template to further control the data:

SORT

<xsl:for-each select="collection/book">
<xsl:sort select="title"/>

IF

<xsl:for-each select="collection/book">
<xsl:if test="type='Paperback'">

CHOOSE

<xsl:choose>
<xsl:when test="type='Paperback'">
<td bgcolor="red"><xsl:value-of select="title" /></td>
<td bgcolor="red"><xsl:value-of select="type" /></td>
</xsl:when>
<xsl:otherwise>
<td bgcolor="blue"><xsl:value-of select="title" /></td>
<td bgcolor="blue"><xsl:value-of select="type" /></td>
</xsl:otherwise>
</xsl:choose>

CONTAINS

<xsl:for-each select="collection/book[title=contains(title,'The')]">

STARTS-WITH

<xsl:for-each select="collection/book[title=starts-with(title,'The')]">

SAMPLE

<?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>
<table border="1">
<tr>
<th>title</th>
<th>TYPE</th>
</tr>

<xsl:for-each select="collection/book[title=contains(title,'The')]">
<xsl:sort select="title" />
<xsl:choose>
<xsl:when test="type='Paperback'">
<tr>
<td bgcolor="red"><xsl:value-of select="title" /></td>
<td bgcolor="red"><xsl:value-of select="author" /></td>
</tr>
</xsl:when>
<xsl:otherwise>
<tr>
<td bgcolor="blue"><xsl:value-of select="title" /></td>
<td bgcolor="blue"><xsl:value-of select="title" /></td>
</tr>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</table>
</body></html>
</xsl:template>
</xsl:stylesheet>

NON-WEB REFERENCES:

Spainhour, S. & Eckstein, R. (1999) Webmaster in a Nutshell. O'Reilly and Associates, Inc. Sebastopol, CA.