Converting XML to HTML using XSL

Last Modified: 1/29/08

Credit: Jon A. Morse (ST Sci/NASA)

Properties of XSL

XSL (eXtensible Stylesheet Language) is a special purpose language you use to convert XML into HTML and other XML, but which in the future may convert XML to many other formats, such as Braille, NC machine instructions, control instructions for robots, etc. XSL:

is non-procedural: for the most part you tell it what to convert and it figures out on its own where and how to do it

processes only those statements enclosed in special <xsl: ... > tags -- any other text, whether it be plain text, XML, or HTML is output verbatim. Thus most XSL programs mix plain text, HTML, and XSL statements to produce the final output

requires you to specify patterns in the XML structure which are then processed by code you write that acts on those patterns. The patterns are specified using the Xpath syntax explained in the previous chapter. The overall process is illustrated with the following enumerated example:
```
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" />         [1]

<xsl:template match="/">                          [2]
  <html><body>                                    [3] 
      <xsl:apply-templates select= "//PO/Id" />   [4]
      <xsl:apply-templates select= "//PO" />      [5]
  </body></html>
</xsl:template>

<xsl:template match="Id">                         [6]
    <xsl:value-of select="./date" />              [7]
</xsl:template>

<xsl:template match="PO">                         [8]
    <xsl:value-of select="./Contact/Name" />      [9]
</xsl:template>

</xsl:stylesheet>
```
- Statement [1] tells XSL that the output is to be in HTML format and to preserve blank spaces and end-of-lines
- [2] tells it to apply this block of code to the entire XML document
- Since [3] is not an XSL statement, it is output verbatim
- [4] and [5] are rather like implicit function calls. They specify a pattern to search for, and the code that matches the pattern is executed and the results replace the original statements. For example, line [4] specifies the Xpath pattern "//PO/Id", so the XSL processor searches the code until it finds the most specific "template match" that matches it, in this case the block of code starting with line [6]. The block of code is executed, and the result, which is the text value of the node "date", which is a sub-node of "Id", is inserted in place of line [4]. Similarly, line [5] specifies the pattern "//PO", and the "template match" that most closely matches is line [8]. So the text value of "Contact/Name" (as well as the text value of all its subnodes, if any) replaces the statement in line [6].

is entirely written in XML, which is the key to understanding its unusual syntax. Recall that XML consists mostly of elements and attributes, and consider the following XSL statement:

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

The above statement is composed of these XML components:

<xsl:stylesheet	the starting part of an element named xsl:stylesheet
xmlns:xsl	the name of an attribute
=	the equals sign for an attribute
"http://www.w3.org/1999/XSL/Transform"	the value of the attribute
>	the trailing bracket

Similarly, this XSL statement:

<xsl:output method="html" indent="yes" />

contains these XML parts:

<xsl:output	an element named xsl:output
method=	an attribute (with its "=" sign)
"html"	the value of the 'method' attribute
indent=	an attribute named 'indent'
"yes"	the value of 'indent'

and this statement:

<xsl:for-each select = "ancestor::PO/Attachments/attachment" >

contains the XML parts:

<xsl:for-each	an element named 'xsl:for-each'
select =	an attribute named 'select'
"ancestor::PO/Attachments/attachment"	the value of the attribute 'select'

Executing XSL programs

There are several ways to execute XSL programs:

You can apply XSL programs to XML files using the built in capabilities of Internet Explorer versions 5 or above. You do so by embedding the line:
```
<?xml-stylesheet type="text/xsl" href="my.xsl"?>
```
in your XML file where "my.xsl" is the name of your XSL file. However, although it correctly displays the HTML output there is no way that you can actually save the HTML file for further editing, because if you View > Source all you will see is the original XML data file. In addition, Internet Explorer versions less than 6.0 only handle an older version of XSL which lacks many of the capabilities you need.

You can use Xalan on the www.washington.edu servers. It uses the newest XSL version and also lets you save the HTML output file. You execute XSL by invoking an XML file that begins with the lines:
```
<?xml version='1.0'?>
<?xml-stylesheet type="text/xsl" href="my.xsl"?>
```
and where the XSL program begins with the lines:
```
<?xml version="1.0" ?>
<xsl:stylesheet 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
version="1.0">
<xsl:output method="html" indent="yes" />
```

You can also use Xalan on the Homer Web servers through a CGI program. The following HTML (xalan.html) and CGI (xalan.cgi) programs convert XML to HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html><head><title>XML Converter</title></head>
<body>
<!-- Convert an XML file to HTML or XML using XSL  -->
<form method="post" action="xalan.cgi">
   XML file: <input type="text" name="xml"> <br>
   XSL file: <input type="text" name="xsl"> <br>
   <input type="submit" value="Convert XML">
</form>
</body></html>

The CGI program (xalan.cgi) is:

#!/usr/local/bin/perl
#
# Accepts an XML and an XSL file as inputs, and converts the XML to
# HTML using the XSL stylesheet.  The XSL is processed by the Xalan
# XSLT processor which is available on the public_html web server
# through Homer.
#
# L. Gales, 12/17/2003
#
use CGI;
$query = new CGI;

$ENV{'LIBPATH'} = "/usr/local/xalan/lib";         # set paths for Xalan
$ENV{'PATH'} .= ":/usr/local/xalan";
my $xml  = $query->param("xml");  chomp($xml);    # Get the XML file
my $xsl  = $query->param("xsl");  chomp($xsl);    # Get the XSL file

print "Content-type: text/html\n\n";
system("/usr/local/xalan/bin/Xalan  $xml  $xsl" );
exit(0);

Course Topics

The relationships among HTML, JavaScript, XML, XSL, and XPATH

The process of converting XML to HTML or other forms of XML

Converting XML to HTML using HTML and JavaScript

Xpath

Converting XML to HTML using XSL

Major Structures in XSL

Purchase Order Program Example