Introduction to Cocoon, XML XSL - Viewing your document in an HTML browser (Page 7 of 9 )
We now have our xml file and a dtd to verify the validity of the document. You could view the xml file in an HTML browser but it would be quite uninteresting. The browser will load the xml file exactly as it appears in the text file. Your data will be presented correctly but users will want it to be more readable. Our next step is to create a stylesheet that contains HTML formatting information so that you can view the xml document as an html document.
To begin create a file called 'address-html.xsl' and open it using a text editor. As always the first line of the file is:
<?xml version="1.0"?>
Next we declare our document element and namespace
by adding this line:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
The first part of the tag (xsl:stylesheet) is called the document element. Basically it tells the xml processor that the following document is an xsl:stylesheet. To close the document element we must end our document with:
<./xsl:stylesheet>
All data in the document must be enclosed within these tags.
The next part of the tag (xmlns:xsl="http://www.w3.org/1999/XSL/Transform") declares the namespace. XMLNamespaces (xmlns) are used to provide a way for the xml parser to make sense out of colliding vocabularies. Trying to create a namespace that is guaranteed to be unique in any and every context would be impossible. Without xmlns it is likely that your tags will collide with other tags at some point. For example suppose in our contact book we wanted to add the contact's job title. To do this we would add:
<title>Nuclear Technician</title>
to our xml file and update the dtd. We now have a problem because HTML also uses the tags <title> </title> but it means something totally different. The XMLNamespace is used to sort out which tags are which. As an aside, the link ("http://www.w3.org/1999/XSL/Transform) does not actually point to anything.
Next we create our first xsl template. A template is a set of instructions and literal results that are executed when certain conditions are met by the processor. The first template we will create lays out the HTML page:
<xsl:template match="contact">
<html>
<head>
<title>
<xsl:value-of select="name/last-name"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="name/first-name"/>
</title>
</head>
<body bgcolor="#ffffff">
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
The match="contact" attribute of the template tag tells the processor to use the following template when it comes across a contact element.
The statement <xsl:value-of select=" "> is where we actually select data from the xml document. In this case we select name/last-name, name/first-name and use that for the title of page. You must also use <xsl:text> some text </xsl:text> where you want regular text in the HTML. With this template the title of the page will be "Simpson, Homer". Otherwise the template contains standard HTML that will layout the page. In the body of the HTML page we use xsl:apply-templates to tell the processor to apply the templates for the other elements of the xml document.
To fill in the body of the html document we will create templates for each of the elements of the xml document.
<xsl:template match="name">
<h1 align="left">
<xsl:apply-templates/>
</h1>
</xsl:template>
Matches the name elements and formats the name
with an h1 tag.
<xsl:template match="address">
<i><xsl:text>Address:
</xsl:text></i><br/>
<xsl:value-of select="street"/><br/>
<xsl:value-of select="city"/><br/>
<xsl:value-of select="state"/><br/>
<xsl:value-of select="country"/><br/>
</xsl:template>
This simply matches the address element and prints out each address element line by line.
<xsl:template match="phone"><br/>
<xsl:text>Phone number: </xsl:text>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="e-mail"><br/>
<xsl:text>Email: </xsl:text>
<a>
<xsl:attribute name="href">
<xsl:text>mailto:</xsl:text><xsl:apply-templates/>
</xsl:attribute>
<xsl:apply-templates/>
</a>
</xsl:template>
The last two templates match phone and e-mail and print the data out. For each element we grab the data, add some text and add it to the result tree. In the template that matches e-mail we also add html formatting to add a mailto: link to the e-mail address. The user only has to click on the email address link to create an email addressed to the contact. Since this page will be viewed in a web browser it seems likely that the user will want to send an email to the contact so why not make is easier?
Now that we have an xml and xsl document we need to tell the xml document to use the xsl stylesheet. To do this open up homer.xml in a browser and add the following processing instruction under the cocoon-process PI (<?cocoon-process type="xslt"?>)
<?xml-stylesheet href="address-html.xsl? type="text/xsl"?>
Everything is ready for viewing your first xml/xsl page in a browser. If tomcat is not running start it up and point your browser to the following URL:
http://localhost:8080/cocoon/address/homer.xml
If you see any Cocoon errors read it carefully. The error messages are generally quite good at telling you what is wrong. Xml is much more strict than html. Among other things case if followed strictly and all tags must be properly terminated. If you have xml syntax problems, Cocoon will usually tell you what is wrong.
Next: Viewing your document in a WAP browser >>
More XML Articles
More By Olivier Eymere
