XML-XSL Example - Tutorial
This is a simple XML-XSL example - just to get you started with this wonderful technology.
XML (eXtensible Markup Language) is a format to represent e.g. data. XSL (eXtensible Stylesheet Language)
is a language to add styling information to the XML data. You will get the whole idea by reading below.
First of all, we have the XML data "test.xml":
We have the "document"-tag to encapsule the whole XML data. Then there are 2 child nodes, "menu" and
"content". In these nodes we have several other nodes. One especially noteworthy thing is the "include"
in the "content". Below at the XSL style sheet you'll see that we can do neat things by including
other templates for any tag. You can name the "include" as "foobar", as long as you change it aswell
in the XSL file.
test.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<document>
<menu>
<item>
<name>Captain</name>
<url>http://www.captain.at</url>
</item>
<item>
<name>Jupiter</name>
<url>http://www.jupiterradio.com</url>
</item>
<item>
<name>Plants</name>
<url>http://www.bryophyllum.com</url>
</item>
</menu>
<content>
<news>
<title>
test1
</title>
<news>
test 1 text
</news>
</news>
<news>
<title>
test2
</title>
<news>
<font face="courier">
<strong>test 2 text ≡</strong>
</font>
</news>
<include>
<data>
<item>
include-text1
</item>
<item>
include-text2
</item>
</data>
</include>
</news>
</content>
</document>
Now it's time to add some styling information to the non-human-readable XML data with test.xsl (see below for
the whole source code):
First we have
<xsl:template match="document">
This marks a template, which will be applied to the "document"-tag. The "document"-tag
is the encapsulating tag in the XML data, so this is our main template.
Regular HTML follows, such as the head, body, regular CSS style sheets etc.
Now we use our first sub-template
<xsl:apply-templates select="menu" />
"menu" is a child node of "document" (see XML above) and for this node, the sub-template "menu"
will be used:
<xsl:template match="menu">
[...]
</xsl:template>
Now we need to do something with the "content" XML data. I've directly included this into the
main-template, but you can also create an extra sub-template for that.
Here we find a new XSL command: for-each
<xsl:for-each select="content/news">
The 'select' marks the XML data which is looped thru. Since our main-template already is attached to
"document" with
<xsl:template match="document">
and we want to loop thru each "news" in "content" the select is set to "content/news".
Sometimes you need to branch in a loop, depending on a condition. This is made with:
<xsl:choose>
<xsl:when test="position() mod 2 = 0">
[...]
</xsl:when>
<xsl:otherwise>
[...]
</xsl:otherwise>
</xsl:choose>
In our case, we just alternate the background color of the table cells.
Time for the promised "include" stuff:
<xsl:apply-templates select="include" />
If an "include" child node is present in the XML data, xsl:apply-template includes
the sub-template "include". In this sub-template we can process the data present
in the "include" XML node.
In the "include" XML node, we have a grouping tag "data" and several child nodes "item".
We loop thru the "item"s with the xsl:for-each again. Since we want to display the
value of the "item", we use the xsl:value-of and select ".":
<xsl:for-each select="data/item">
<strong><xsl:value-of select="."/></strong><br/>
</xsl:for-each>
Below is the complete XSL style-sheet:
test.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="document">
<html>
<head>
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css.css"/>
</head>
<body>
<table>
<tr>
<td valign="top">
<xsl:apply-templates select="menu" />
</td>
<td valign="top">
<table border="1">
<xsl:for-each select="content/news">
<xsl:choose>
<xsl:when test="position() mod 2 = 0">
<tr><td class="text">
<xsl:number value="position()" format="1" />.
<strong><xsl:value-of select="title"/></strong><br/>
<xsl:copy-of select="news"/>
<br/><br/>
<xsl:apply-templates select="include" />
</td></tr>
</xsl:when>
<xsl:otherwise>
<tr><td bgcolor="#cccccc" class="text">
<xsl:number value="position()" format="1" />.
<strong><xsl:value-of select="title"/></strong><br/>
<xsl:copy-of select="news"/>
<br/><br/>
<xsl:apply-templates select="include" />
</td></tr>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</table>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="include">
captain was here<br/>
<xsl:for-each select="data/item">
<strong><xsl:value-of select="."/></strong><br/>
</xsl:for-each>
</xsl:template>
<xsl:template match="menu">
<table border="1">
<xsl:for-each select="item">
<tr>
<td>
<A class="text">
<xsl:attribute name="href">
<xsl:value-of select="url"/>
</xsl:attribute>
<xsl:value-of select="name"/>
</A>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
This is the regular CSS style sheet, included in our main-XSL-template.
css.css
.text {
line-height: 16px;
color: #222299;
font-family: sans-serif;
font-size: 10px
}
a { text-decoration: none}
a:hover { text-decoration: underline}
As you can see, XML-XSL is a really handy technology.
Usually the XSL style sheet is cached by the browser, and just the XML-data is loaded each time
the page is reloaded.
Last-Modified: Sat, 04 Feb 2006 16:02:59 GMT
