Skip Navigation Links
Central Washington University
| Computer Science |
| Home | Schedule | Assignments | Links | CS 498
| Ed Gellenbeck |

Transforming XML with XSLT

Today's Learning Objectives

Extensible Stylesheet Language Transformation

Extensible Stylesheet Language Transformation, commonly referred to as XSLT, became an official recommendation of the W3C in November 1999. It is completed half of the Extensible Stylesheet Language (XSL), which consists of a method for transforming XML documents (XSLT) and a method for formatting XML documents (XSL-FO). XSL-FO has not reached W3C recommendation status. However, XSLT, used along with CSS, can achieve much of the same desired formatting.

From a programmer's point of view, XSLT is a programming language that allows on to use XML data as input data and process (transform) it using basic programming constructs. XSLT has a basic set of data types, operations, and control structures.

Using XSLT with HTML-Kit

An XSLT file is written in XML and uses the xmlns:xsl="http://www.w3.org/1999/XSL/Transform" namespace

<?xml version="1.0" ?>
<!-- File: order.xsl -->

<xsl:stylesheet version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
      
   <xsl:template match="/">
      <!-- the contents go here -->
   </xsl:template>
   
</xsl:stylesheet>

and is referenced by an XML data file

<?xml version="1.0" ?>
<!-- File: order.xml -->

<?xml-stylesheet type="text/xsl" href="order.xsl" ?>
<OrderList>
    <Order>
        <Date>2001-04-13</Date>
        <Customer>Ed Gellenbeck</Customer>
        <Item>
            <Number>E16-25A</Number>
            <Quantity>1</Quantity>
        </Item>
    </Order>
</OrderList>
Activity 1: Using ergXSLT
Create two text files using HTML-Kit: "orders.xml" and save them as "order.xsl" and order.xml. Transform the XML file with the XSL file by using the ergXSLT plugin. See what happens when you place some text inside the xsl:template element.

XML to XML transformations

Imagine the supplier of this item does not care about the date or customer name. They would like to strip out that information and produce an XML document that consists of a list of order numbers and quantities.

We can select and output the value that goes along with the order number with the following code:

   <xsl:template match="/">
      <xsl:value-of select="OrderList/Order/Item/Number" />
   </xsl:template>
Activity 2: Selecting elements
Modify your XSL file to output both the order item number and quantity. Transform the XML file with the XSL file to verify it is working.

Mixing text with content

You can easily mix text with content. More often than not the text will take the form of XML or HTML tags

   <xsl:template match="/">
      <PartNumber>
         <xsl:value-of select="OrderList/Order/Item/Number" />
      </PartNumber>
   </xsl:template>
Activity 3: Outputing element tags with data
Modify your XSL file to output a well-formed XML document with the root node of <Orders> and two child nodes <PartNumber> and <Amount>.

xsl:for-each Loops

The xsl:for-each element loops through the nodes in the current node set. The syntax is

<xsl:for-each select="expression">
    template-body
</xsl:for-each> 

For example, to loop through, extracting all the item numbers ordered by a customer would look like

<xsl:template match="/">
  <xsl:for-each select="OrderList/Order/Item">
    <PartNumber>
         <xsl:value-of select="Number" />
    </PartNumber>
  </xsl:for-each>
</xsl:template>
Activity 4: Using for-each loops
Modify your XSL file to loop through displaying items (both number and quantity) for an Order. Modify your XML file to add two additional <Item> for the Order. User ergXSLT to check your XSLT code.

Producing XHTML Code

In addition to producing XML to XML transformations, XSLT is often used to produce XML to XHTML transformations suitable for display with a current browser. For example, the following code may be used to produce an XHTML file consisting of one paragraph with a customer label followed by their name.

<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns="http://www.w3.org/TR/xhtml1/strict">
<xsl:template match="/">
<html>
  <head>
    <title>Orders</title>
  </head>
  <body>
    <p>Customer: <xsl:value-of select="OrderList/Order/Customer" /> </p>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>
Activity 5: Producing XHTML code
Modify your XSL file to produce XHTML code. You may use <p>tags to display the items ordered.
Activity 6L Producing an XHTML table
Modify your XSL file to display the information in a table. Set your table border to "1" so you can see if it is working.

Transformations on the Client side

Assuming a Windows world, XML transformations can be performed on the fly using scripting within an HTML file. For example,

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Orders</title>
        <script type="text/javascript" language="javascript">
        //<![CDATA[
         function transformXML()
         {
            var srcTree = new ActiveXObject("MSXML2.DOMDocument.3.0");
            srcTree.async=false;
            srcTree.load("order.xml");
            var xsltTree= new ActiveXObject("MSXML2.DOMDocument.3.0");
            xsltTree.async = false;
            xsltTree.load("order.xsl");
            resTree.innerHTML = srcTree.transformNode(xsltTree);
         }
         //]]>
        </script>
    </head>
    
    <body onload="transformXML()">
        <div id="resTree">
        </div>
    </body>
</html>
Activity 7: Transformations with Javascript
Copy and paste the html file into a new HTML-Kit file named order.html. View order.html in the browser.

Transformations on the Server side

Server-side scripting can be used to accomplish the same ends. The following ASP code will do the transformation before sending down the resulting HTML file.

<%
'Load the XML
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("order.xml"))

'Load the XSL
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("order.xsl"))
Response.Write(xml.transformNode(xsl))
%>