5.2 Transforming XML to XHTML using XSLT

5.2 Transforming XML to XHTML using XSLT

5.2.1 Basic elements in XSLT

Browsers (or user agents) support XSLT while the XSLT standard is still in a draft condition. Therefore not all browsers are fully compatible with the W3C standard recommendation. For example, IE5 was released in March 1999 and supports the working draft (WD document) of the XSLT transform at that time. However, the final release of the XSLT standard is different to the working draft and therefore IE5 is not fully W3C XSLT compatible.

In order to support the standard, it is recommended that the latest browsers such as IE6+. and NS6+. are used in this chapter.

In this section, you are going to learn more about the basic elements in XSLT and how they can be used for the transformation. Based on the official W3C recommendation, some of the basic XSLT elements are listed in Table 5.1.

Table 5.1. Basic elements in XSLT

Basic element	Description of its functionality
xsl:apply-imports	To apply a template from an imported style sheet
xsl:apply-templates	To apply a template to the current element
xsl:attribute	To add an attribute to the nearest containing element
xsl:attribute-set	To define a named set of attributes
xsl:call-template	To call a named template
xsl:choose	To choose between a number of alternatives based on conditions
xsl:comment	To write an XML comment
xsl:copy	To copy the current node without child nodes and attributes to the output
xsl:copy-of	To copy the current node with child nodes and attributes to the output
xsl:decimal-format	To define the character or string to be used when converting numbers into strings, with the format number function
xsl:element	To add a new element node to the output
xsl:fallback	To define an alternative for not implemented instructions
xsl:for-each	To create a loop in the output stream
xsl:if	To write a conditional statement
xsl:import	To import a style sheet
xsl:include	To include a style sheet
xsl:key	To define a key
xsl:message	To write a message to the output
xsl:namespacealias	To map one namespace to another namespace
xsl:number	To write a formatted number to the output
xsl:otherwise	To indicate what should happen when none of the <xsl:when> elements inside an <xsl:choose> element is satisfied
xsl:output	To control the transformed output
xsl:param	To define parameters
xsl:preserve-space	To define the handling of white space
xsl:processing-instruction	To write a processing instruction to the output
xsl:sort	To define sorting
xsl:strip-space	To define the handling of white space
xsl:stylesheet	To define the root element of the style sheet
xsl:template	To define a template for output
xsl:text	To write text to the output
xsl:transform	To define the root element of the style sheet
xsl:value-of	To create a text node and insert a value into the result tree
xsl:variable	To declare a variable
xsl:when	To define a condition to be tested and perform an action if the condition is true. This element is always a child element of <xsl:choose>
xsl:with-param	To pass parameters to templates

To provide a full account of each of these elements is not the objective of this chapter or this book. For our practical purposes, we concentrate on application examples and some frequently used elements. Let's begin with some basic XSLT techniques to convert an XML page to XHTML.

5.2.2 Simple XSLT. for XML pages

Basically, XSL or XSLT is a style sheet language that can be used to transform an XML page into other formats. It is a powerful language and has many applications on XML and related subjects. As an introduction, simple XSLTs are presented in this section to convert XML documents into XHTML. We begin with the simple elements introduced in section 5.1.

For our very first XML page, consider the following document:

Example: ex05-08.xml - XML Page With Simple XSLT

 1: <?xml version="1.0" encoding="ISO-8859-1"?>
 2:
 3: <street>
 4:   <profile>
 5:     <name>Charlie</name>
 6:     <job>Engineer</job>
 7:     <sex>male</sex>
 8:     <phone>123456789</phone>
 9:     <location>England</location>
10:     <address>No.10 Richmond Road, West Yorkshire, England</address>
11:      <age>20</age>
12:    </profile>
13:    <profile>
14:      <name>Peter</name>
15:      <job>Clerk</job>
16:      <sex>male</sex>
17:      <phone>223224225</phone>
18:      <age>25</age>
19:      <location>England</location>
20:      <address>No.11 Richmond Road, West Yorkshire, England</address>
21:    </profile>
22:    <profile>
23:      <name>Mary</name>
24:      <job>Secretary</job>
25:      <sex>female</sex>
26:      <phone>88834421</phone>
27:      <age>19</age>
28:      <location>England</location>
29:      <address>No.12 Richmond Road, West Yorkshire, England</address>
30:    </profile>
31: </street>

This is an XML page to describe a house owner in a street. Each house along the street and its owner are described as a <profile> element in this document. If you activate this page by the following command on IE and NS

http://www.pwt-ex.com/book/chap05a/ex05-08.xml

you will obtain Figs 5.3 and 5.4.

As you can see from these figures, XML is not displayed well in ordinary browsers such as IE and NS. In order to view and display this XML file, a simple linkage of the style sheet (XSL) to the XML page is needed. For example, you can add the statement below at the line 2 position of ex05-08.xml and call it ex05-09.xml:

<?xml-stylesheet type="text/xsl" href="ex05-09.xsl" ?>

This statement declares an XML style sheet to transform the XML to other documents. The content type of this transform is "text/xsl." The href attribute specifies ex05-09.xsl as the XSL transformation file with all corresponding defined styles. Again this statement needs to be at the location of line 2 of ex05-08.xml so that the browser will read it before rendering the page. Once you insert this statement into ex05-08.xml and call it example ex05-09.xml, you can develop the XSLT file for the transform. The XSLT file ex05-09.xsl is defined as follows:

Example: ex05-09.xsl - XSLT For ex0509.xml

 1: <?xml version="1.0" encoding="ISO-8859-1"?>
 2: <xsl:stylesheet version="1.0"
 3:    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 4: <xsl:template match="/">
 5:  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 6:  <head><title>ex05-09.xsl</title></head>
 7:  <body>
 8:     <table border="1">
 9:       <tr>
10:         <th>Name</th>
11:         <th>Job</th>
12:         <th>Sex</th>
13:         <th>Age</th>
14:         <th>Phone</th>
15:         <th>Location</th>
16:         <th>Address</th>
17:       </tr>
18:       <tr>
19:         <td><xsl:value-of select="street/profile/name"/></td>
20:         <td><xsl:value-of select="street/profile/job"/></td>
21:         <td><xsl:value-of select="street/profile/sex"/></td>
22:         <td><xsl:value-of select="street/profile/age"/></td>
23:         <td><xsl:value-of select="street/profile/phone"/></td>
24:         <td><xsl:value-of select="street/profile/location"/></td>
25:         <td><xsl:value-of select="street/profile/address"/></td>
26:       </tr>
27:     </table>
28:  </body>
29:  </html>
30: </xsl:template>
31: </xsl:stylesheet>

Line 1 of this page declares that this document is an XML page. Lines 23 specify that this document is an XSL to convert the calling page into a document described by the statements following. After the template in line 4, the rest of this document is, in fact, an XHTML page with one table. The first row of this table (lines 917) defines the heading Name, Job, Sex, Age, Phone, Location, and Address. The second row of the table is where the XML data mentioned in ex05-08.xml should fit in. Consider the first table element in line 19:

<xsl:value-of select="street/profile/name" />

This statement contains the popular "value of" XSLT element <xsl:value-of>. This element can obtain a value from the XML page and use it in the XSLT file. In this case, the select attribute will obtain the value from the <street>, <profile>, and <name> nodes of the XML tree. The value is in fact the owner of the house and is then output at the same location. After you have completed all the table data in lines 1925, you have a completed XHTML document. The document is then returned to the browser for display. To activate this XML page, all you have to do is to issue the usual "http" command such as:

http://www.pwt-ex.com/book/chap05a/ex05-09.xml

provided both the XML (ex05-09.xml) and XSLT (ex05-09.xsl) files are available on the server www.pwt-ex.com and the associated directory. For local testing, you can drag (or double click) the XML file into the IE or NS browser.

Some screen shots of this example on IE 6.1 and NS6.2 are shown in Figs 5.5 and 5.6.

Although this is a simple example, it demonstrates that XML pages can be converted into XHTML and displayed on browsers properly. Let's consider some more examples.

5.2.3 Using templates in XSLT

In the last example, there is one statement that we haven't explained in detail, i.e., the template statement in line 4:

<xsl:template match="/">

The keyword xsl:template in the statement notifies the user agent that it is the starting point of a template. This template is used to describe how to transform the target XML and define each display element contained in the corresponding XML.

Along with the template definition, there is a match attribute. This attribute is used to associate the template with an XML element. In this case, the match "/" indicates that the template applies to the entire XML document. In other words, it means that the transform scans through the root "/" of the XML source document, which matches the template arguments and specifications. One such template specification is the select attribute used in line 19:

<xsl:value-of select="street/profile/name" />

The syntax for the select attribute value is called an "XSL Pattern." It works like navigating a file system where a slash "/" selects subdirectories.

The <xsl:value-of> element is only good to display one value at a time. Even with all statements defined in lines 1925, only one row of the table is displayed.

In order to display more data from the XML file, proper use of the template and the match attribute are required. For example, the following XSLT page ex05-10.xsl can be used to extract and display all addresses of Richmond Road. First, we modify line 2 of ex05-09.xml by

<?xml-stylesheet type="text/xsl" href="ex05-10.xsl" ?>

and call the new page ex05-10.xml. The XSLT is listed below:

Example: ex05-10.xsl - XSLT With Template

 1: <?xml version="1.0" encoding="ISO-8859-1"?>
 2: <xsl:stylesheet version="1.0"
 3:    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 4:
 5:  <xsl:template match="/">
 6:   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 7:   <head><title>ex05-10.xsl</title>
 8:    <style>
 9:     .txSt {font-family:arial;font-size:18pt;font-weight:bold}
10:    </style>
11:   </head>
12:   <body class="txSt" style="background-color:#000088;color:#ffff00">
13:    <div class="txSt" style="font-size:20pt;text-align:center">
14:      Profile Of Richmond Road <br /><br /></div>
15:
16:    <xsl:apply-templates select="//address" />
17:   </body>
18:   </html>
19:  </xsl:template>
20:
21:  <xsl:template match="address">
22:    <div style="margin-left:40pt; margin-bottom: 12pt;
23:                text-align:left; line-height: 12pt;
24:                font-family:arial; font-size:16pt" >
25:       <xsl:value-of select="." />
26:    </div>
27:  </xsl:template>
28: </xsl:stylesheet>

This XSLT file contains two templates. The first template is defined in lines 519 with the match attribute match="/". This template applies to the entire XML document to transform it into XHTML. In line 16 of this template, there is an apply-templates element <xsl:apply-templates xxx>. This element is used to apply another template (lines 2127) that matches the <address> element in the XML file. The user agent (or an XSLT-supported browser) will search the calling XML file and look for the <address> element for a match. If a match is found, the value will be inserted into line 22. The entire division element <div> will be substituted back into line 13 to compose the XHTML document. A screen shot of this example is shown in Fig. 5.7.

Now, to display the entire XML file all you need to do is to add more data fields into the second template. But first, you need to modify line 2 of ex05-10.xml by the statement

<?xml-stylesheet type="text/xsl" href="ex05-11.xsl" ?>

and call the new page ex05-11.xml. Consider the following XSLT file:

Example: ex05-11.xsl - XSLT With Template II

 1: <?xml version="1.0" encoding="ISO-8859-1"?>
 2: <xsl:stylesheet version="1.0"
 3:  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 4:
 5: <xsl:template match="/">
 6:  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 7:  <head><title>ex05-11.xsl</title>
 8:   <style>
 9:     .txtSt {font-family:arial;font-size:14pt;font-weight:bold}
10:   </style>
11:  </head>
12:  <body class="txtSt" style="background:#000088;color:#ffff00">
13:  <div style="font-size:18pt;text-align:center">
14:      Street Profile of Richmond Road <br /><br />
15:  </div>
16:
17:     <xsl:apply-templates />
18:
19:  </body>
20:  </html>
21: </xsl:template>
22:
23: <xsl:template match="profile">
24:    Name:- <xsl:apply-templates select="name" /> <br />
25:    Job:- <xsl:apply-templates select="job" /> <br />
26:    Sex:- <xsl:apply-templates select="sex" /> <br />
27:    Address:- <xsl:apply-templates select="address" /> <br />
28:    Phone:- <xsl:apply-templates select="phone" /> <br /><br />
29: </xsl:template>
30:
31: </xsl:stylesheet>

Again, this XSLT file contains two templates. The first template matches the root ("/") of the XML document. The apply-templates element without a select attribute used in line 17 means that all the nodes of the XML page from the root are applied.

A second template is defined in lines 2329. This template will apply to all nodes of the profile tree. For example, suppose the first node of the profile tree in ex05-11.xml is

<profile>
  <name>Charlie</name>
  <job>Engineer</job>
  <sex>male</sex>
  <phone>123456789</phone>
  <age>20</age>
  <location>England</location>
  <address>No.10 Richmond Road, West Yorkshire, England</address>
 </profile>

This template will transform the data into

Name:- Charlie <br />
Job:- Engineer <br />
Sex:- M <br />
Address:- No.10 Richmond Road, West Yorkshire, England <br />
Phone:- 123456789 <br /> <br />

The paragraph is then inserted into the first template at line 17.

After the XSLT of all nodes, a completed XHTML document is generated to display data in the XML page. A screen shot of this example is shown in Fig. 5.8.

You now have some basic understanding of XML documents and XSL transformations. In fact, XML documents are data based and similar to a database in some ways.