Formatting wdfulldata.xml for display

Phil Holmes

The portable way to display XML data with formatting is to use XML stylesheets, which are written using XML Stylesheet Language, XSL. The transformation from XML using a stylesheet is called XSLT - XSL Transformation. I'm definitely not an expert on this, but can explain one way of using XSLT to display Weather Display's wdfulldata.xml file.

To start with, we need to add a reference to a stylesheet in the heading of the xml page. To do this in WD, open the wdfulldata.htm file (note the different extension here) and at the top, change:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!-- File Name: wdfulldata.xml -->
To:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="wdfulldata.xsl"?>

This makes the XML parser (the browser you use to view the XML) use the stylesheet called wdfulldata.xsl.

Next, create a file called wdfulldata.xsl. At the top, add this text:

<?xml version="1.0" encoding="ISO-8859-1"?>

This simply describes the type of file and the character encoding. Next, add:

<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

This describes the namespace, and is mandatory. Now add the following:

<xsl:template match="/">
<html>
<body>
<xsl:for-each select="WXDATA/PARAM">
   
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
   

Now save the file. If you now upload this to be in the same remote directory as your wdfulldata.xml (and assuming this file has been uploaded after you changed the wdfulldata.htm, then you should see something like this. A blank page. I have to say, this was a step forward for me, since it at least has no parser errors!

Finally (just to show this working), add the following lines in the gap in the text above (between the <xsl:for-each select="WXDATA/PARAM"> and </xsl:for-each>)

<h4>Weather on 
<xsl:value-of select="date"/> at
<xsl:value-of select="time"/>.
</h4>
<p>Temperature: <xsl:value-of select="temp"/><br/>
Humidity: <xsl:value-of select="hum"/>%<br/>
</p> 

When you've done that, you should get something like this. The full text of the .xsl file should look 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 BGCOLOR="#ffffff">
				<xsl:for-each select="WXDATA/PARAM">
					<h4>Weather on 
						<xsl:value-of select="date"/> at
						<xsl:value-of select="time"/>.
					</h4>
					<p>Temperature: <xsl:value-of select="temp"/><br />
						Humidity: <xsl:value-of select="hum"/>%<br/>
					</p>
				</xsl:for-each>
			</body>
		</html>
   </xsl:template>
</xsl:stylesheet>

Gotchas

The major issue that may need to be overcome is that of the mime-type of the document. In the XML document we added the part of a line saying 'type="text/xsl"'. This specifies that the stylesheet is a text file, of type xsl. If the server marks it as another type of file in the headers it returns, then this can upset the browser and make it fail to display the XML file properly.

How it works

Strictly, I don't know exactly, since my expertise on this is limited. However, in essence the following explains what's happening:

Line Meaning
<xsl:template match="/">
Select the text from all of the XML document (the "/" is the "root")
<xsl:for-each select="WXDATA/PARAM">
Each time the tags <WXDATA><PARAM> are found, process the select instructions below
<xsl:value-of select="date"/>
Replace this tag with the contents of the tag <date></date> in the XML file

So all that's needed is to write some HTML to format the page, and to put <xsl:value-of select="tagname"/> where we want to put data from the XML file. Simple. Whether it's easier that writing cutom pages is anybody's guess, though!

Return to Phil's weather page.