LanguagesXMLIntroduction to Transformations (XSLT) using IE5 (Part 2)

Introduction to Transformations (XSLT) using IE5 (Part 2)

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.


Preface

This is the second part of a two-part article on transforming XML to HTML.

Rendering XML documents

As of this writing, Microsoft IE5 is the only widely-used web browser that has the ability to render XML documents.

CSS or XSL

IE5 can render XML documents using either CSS or XSL.

Let’s discuss XSL

This is part of a series of articles that discuss the use of XSL for the rendering of XML documents, with particular emphasis on the use of IE5 for that purpose.

Related articles

I have authored numerous online articles on XML. These articles cover the waterfront from introductory to advanced topics. I maintain a consolidated index of hyperlinks to all of my XML articles at my personal website so that you can access earlier articles from there.

Introduction

Will walk through an example

In this, and the previous article, I am walking you through some simple XML code, and some corresponding XSLT code.

I am showing you how to use IE5 to transform the XML according to the XSLT.

Where is the XML code?

The XML code was presented and discussed in Part I. A copy of that code is also provided near the end of this article for convenience.

The XSLT code

The XSLT code will be presented and discussed in this lesson.

This example is based on XSLT information available at the W3C and on IE5 information available at Microsoft.

A Sample Program

For this sample program, I will show you how to create an XSLT file that is used to transform the XML file.

Transformation to HTML

When you load the XML file into IE5, the XML will be transformed into HTML and displayed in the browser window.

The XSL Debugger

Alternately, you can load the XML file and the XSLT file into the XSL Debugger discussed in an earlier lesson and get essentially the same result.

The XML File

For the record, this XML file is named XSL002.xml.

For this introduction, I purposely made the XML file very simple. As mentioned earlier, a copy of the XML file is provided near the end of this lesson.

The XSLT File

This XSLT file is named XSL002.xsl.

Important XSLT constructs

This file illustrates the use of three important XSLT constructs:

  • xsl:for-each
  • xsl:value-of
  • xsl:template

I will discuss each of these constructs in detail as I go along. First, however, I need to discuss the XSLT file in general.

Looks like JavaServer Pages

The XSLT file reminds me a lot of a JavaServer Pages file.

In particular, the file consists of a combination of literal text (such as <HTML>) and processing elements (such as <xsl:value-of select=”para”/>).

What is a processing element?

I’m not certain that processing element is the correct terminology here. Since I don’t know what the correct terminology is, I will simply refer to the text that begins with an <xsl: …> tag as a processing element.

Wrapped in an xsl:stylesheet element

Everything (other than comments) is enclosed in an xsl:stylesheet element (I will have more to say about this later).

Literal text passes through

Any literal text that is not otherwise enclosed within the beginning and ending tags of a  processing element is simply passed through to the output.  (In XML jargon, that text which is so enclosed is known as the content of the element.)

This makes it possible (and relatively easy) for us to produce the necessary tags and other necessary text in the output HTML file.

Text in a processing element

Any literal text that is enclosed within the beginning and ending tags of a processing element might possibly be modified by the behavior of that element.  In addition, the processing element may cause other text to be written into the output HTML file.

Not confined to HTML output

It seems apparent that there is nothing about this process that confines it to produce only HTML as its output.

It should work equally well to transform an XML file into a different XML file, or to any text-based file for that matter, depending on the willingness of the XSLT engine to handle other types of output.

Sounds like JSP

If I were discussing JavaServer Pages instead of XSLT, I would be referring to the processing elements as JSP scriptlets, JSP expressions, etc. Otherwise, the discussion would be fairly similar.

This is a template process

In XSL terminology, this process is referred to as an XSL template.

According to Microsoft,

“You can use XSL to merge simple regular XML data with an HTML template for display.” 

Microsoft goes on to provide an interesting example of the use of templates in a stock exchange scenario at the URL given earlier.

Interesting Code Fragments

I am going to break this XSLT file up and discuss it in fragments. A complete listing of the file is presented near the end of the lesson.

The stylesheet element

Here’s the beginning tag for an xsl:stylesheet element.

<xsl:stylesheet  
xmlns_xsl="http://www.w3.org/TR/WD-xsl">

Here is some of what the W3C has to say about the xsl:stylesheet element.  Note that I inserted some comments of my own in a red font.
 

A stylesheet is represented by an xsl:stylesheet element in an XML document. 

xsl:transform is allowed as a synonym for xsl:stylesheet.

An xsl:stylesheet element must have a version attribute, indicating the version of XSLT that the stylesheet requires. 


The xsl:stylesheet element may contain the following types of elements: (one of which I will discuss later)
           xsl:import 
           xsl:include 
           xsl:strip-space 
           xsl:preserve-space 
           xsl:output 
           xsl:key 
           xsl:decimal-format 
           xsl:namespace-alias 
           xsl:attribute-set 
           xsl:variable 
           xsl:param 
          xsl:template 

An element occurring as a child of an xsl:stylesheet element is called a top-level element.
 

The xsl:template element

Of all the possible elements that can be contained in an xsl:stylesheet element, this sample program contains only one. It is an xsl:template element, and it is shown here:

<xsl:template match="/">

Tell me more about xsl:template

Here is some of what the W3C has to say about the xsl:template element.
 

A template rule is specified with the xsl:template element. The match attribute is a Pattern that identifies the source node or nodes to which the rule applies. The match attribute is required unless the xsl:template element has a name attribute …

The content of the xsl:template element is the template that is instantiated when the template rule is applied.

For example, an XML document might contain:

This is an <emph>important</emph> point.

The following template rule matches emph elements and produces a fo:inline-sequence formatting object with a font-weight property of bold.

           <xsl:template match=”emph”>
             <fo:inline-sequence font-weight=”bold”>
               <xsl:apply-templates/>
             </fo:inline-sequence>
           </xsl:template>

NOTE: Examples in this document use the fo: prefix for the namespacehttp://www.w3.org/1999/XSL/Format, which is the namespace of the formatting objects defined in [XSL].

As described next, the xsl:apply-templates element recursively processes the children of the source element.

What does Microsoft have to say?

Here is what Microsoft has to say about the xsl:template element, along with some other things that relate to this example as well.  I entered some comments of my own in red
 

Since an XSL style sheet is an XML file itself, the file begins with the recommended xml declaration.
(<?xml version=’1.0′?> in this case)

The <xsl:stylesheet> element indicates that this document is a style sheet file, and provides a location for declaring the XSL namespace. The XSL namespace URL supported by Microsoft® Internet Explorer 5 is http://www.w3.org/TR/WD-xsl.
(I don’t believe that this is standard.)

You also must wrap the template with <xsl:template match=”/”> to indicate that this template corresponds to the root (/) of the XML source document. …

The entire file must be well-formed to comply with XML rules, including the HTML that comprises the template. 

The bottom line on xsl:template

So, the bottom line is that the xsl:template element

<xsl:template match="/">


provides a match for the root of the XML document.

Applies to the entire XML document

This means that the various processing elements contained within the xsl:template element apply to the entire XML document.

Some literal text

Here’s some literal text, which, as I mentioned earlier, will simply be passed through to the output.

<HTML> 
<BODY>

You will recognize this text as the beginning tags for two of the required elements in the HTML output being produced by this process.

Let’s do some work

Here’s the beginning tag for a processing element, xsl:for-each, which is going to do some real work.

<xsl:for-each select="sampXML/repeat">

What does W3C say about xsl:for-each

Here is what the W3C has to say about the xsl:for-each element.
 

When the result has a known regular structure, it is useful to be able to specify directly the template for selected nodes. 

The xsl:for-each instruction contains a template, which is instantiated for each node selected by the expression specified by the select attribute. The select attribute is required. 

The expression must evaluate to a node-set. The template is instantiated with the selected node as the current node, and with a list of all of the selected nodes as the current node list. 

The nodes are processed in document order, unless a sorting specification is present (see [10 Sorting]).

What does Microsoft say about xsl:for-each

Here is some of what Microsoft has to say about the xsl:for-each element.

This text is based on a very specific example shown on the Microsoft site, so I edited it somewhat to try to make it apply more generally. My comments are in red.
 

The <xsl:for-each> element locates a set of elements in the XML data (“stock” elements inside the “portfolio” element in the Microsoft example) and repeats a portion of the template for each one.

Since this sample contains three stock elements, three rows will be created. (The example is being used by Microsoft to create an HTML table.)

The select attribute (select=”portfolio/stock) describes how to find a set of elements in the source document. The syntax for this attribute is called an XSL Pattern, and works much like navigating a file system hierarchy where a forward slash (/) selects subdirectories relative to the current directory. 

In an XSL style sheet, the navigation starts at the current node and drills down into the XML data hierarchy, selecting all the nodes that match the pattern. 

In this case the pattern “portfolio/stock” starts at the document root and drills down through the “portfolio” element to select the three “stock” children.

The bottom line on the xsl:for-each element

So, based on the Microsoft explanation, the processing element

<xsl:for-each select="sampXML/repeat">

will start at the root and drill down into the XML data hierarchy, selecting all nodes named repeat that are children of the node named sampXML.

What happens next?

What happens after the selection is made depends entirely on the content of the xsl:for-each processing element.

Output some HTML text

The first two things that happen are shown here, where the two lines of literal text are simply passed to the output.

<P> 
<FONT COLOR="RED">

You will recognize this text as being required to cause the content of the HTML <P> element to be displayed as a red paragraph when rendered by an HTML rendering engine.

The xsl:value-of processing element

The next fragment is more interesting.

<xsl:value-of select="para"/>

This fragment uses the xsl:value-of processing element to select some material from the XML file and insert it into the output.

An empty element

Note that according to XML terminology, this is an empty element, which does not require an end tag.

What does Microsoft say about the xsl:value-of element?

Again, I will rely on the Microsoft explanation of the behavior of this processing element.

 

Within the <xsl:for-each> element, you can further drill down to select children of each “stock” element (each repeat element in my case). The <xsl:value-of> element selects a specific child and then inserts the text content of that child into the template. 

The patterns inside the <xsl:value-of> element’s select attribute do not require starting at the document root again but are relative to the element selected in the <xsl:for-each> element.

Inserts the text content

To emphasize an important point from the Microsoft explanation above, note the following text in the Microsoft explanation:

selects a specific child and then inserts the text content of that child into the template.

Where are we in the processing stream?

Up to this point, I have been showing you fragments from the XSLT file.  However, at this point, I am going to deviate and show you some material from the XML file:

<repeat> 
  <para> 
    This is a paragraph.
  </para> 
</repeat> 
<repeat> 
  <para> 
    This is another paragraph.
  </para> 
</repeat> 

This shows that portion of our XML file that is being processed at this point (this is the XML file, not the XSL file).

It is appropriate to display this material at this point to aid in the discussion.

So, what happens?

Here is what happens.  The

<xsl:for-each select=”sampXML/repeat”>

processing element will cause each repeat element in the XML file to be processed in sequence (this is a loop structure).

First insert literal text into the output

For each of the repeat elements, some literal text (as discussed earlier) will be inserted into the output.

Get and insert text content into the output stream

Then, the <xsl:value-of select=”para”/>processing element will cause the content of the para element contained in that repeat element to be selected and inserted into the output HTML text stream.

Text content is highlighted in boldface

Because of the specific literal text that is also inserted into the output along with the content of the para elements, this content will be displayed by the browser as two red HTML paragraphs.

It’s cleanup time

Now back to the XSL file. Here are the end tags required to match up with the beginning tags discussed previously to produce a well-formed XSL file, as well as a well-formed HTML file.

</FONT> 
</P> 
</xsl:for-each>

Well-formed HTML

The first two lines are literal text that will be passed through to the output to produce a well-formed HTML output.

Well-formed XML

The third line is the end tag for the xsl:for-each element that controls the loop.

This tag is required to cause the XSL file to be well-formed.

Not finished cleaning up yet!

Finally, here are the two literal end tags that will become part of the HTML output, followed by the end tags for the xsl:template and </xsl:stylesheet processing elements.

</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>

That completes the discussion of the XSL file.

The HTML output

The actual HTML produced by using this XSLT file to transform the XML file looks like this:

<HTML>
<BODY>
<P>
<FONT COLOR="RED">
This is a paragraph.
</FONT>
</P>

<P>
<FONT COLOR="RED">
This is another paragraph.
</FONT>
</P>
</BODY>
</HTML>

This HTML was captured using the Microsoft XSL debugger discussed in an earlier lesson.

The rendered HTML output

If you paste this HTML code into an HTML file and load it into your browser, your output should look something like the following.
 

This is a paragraph.

This is another paragraph.
 

Complete Program Listings

The complete listings of the XML and XSLT files follows.

XML:

<!-- File XSL002.xml 
Copyright 2000 R. G. Baldwin 
Illustrates for-each construct 
Works with IE5.0 
--> 
<?xml-stylesheet  
  type="text/xsl"  
  href="XSL002.xsl"?> 
<sampXML> 
<repeat> 
<para>This is a paragraph.</para> 
</repeat> 

<repeat> 
<para>This is another paragraph.</para> 
</repeat> 

</sampXML> 

XSLT:

<?xml version='1.0'?> 
<!-- File XSL002.xml 
Copyright 2000 R. G. Baldwin 
Illustrates for-each construct 
Works with IE5.0 
--> 
<xsl:stylesheet  
xmlns_xsl="http://www.w3.org/TR/WD-xsl"> 
<xsl:template match="/"> 

<HTML> 
<BODY> 

<!-- Do a for-each loop --> 
<xsl:for-each select="sampXML/repeat"> 
 <P> 
 <FONT COLOR="RED"> 
  <xsl:value-of select="para"/> 
 </FONT> 
 </P> 
</xsl:for-each> 

</BODY> 
</HTML> 

</xsl:template> 
</xsl:stylesheet> 

Copyright 2000, Richard G. Baldwin.  Reproduction in whole or in part in any form or medium without  express written permission from Richard Baldwin is prohibited.


About the author:

Richard Baldwin is a college professor and private consultant whose primary focus is a combination of Java and XML. In addition to the many platform-independent benefits of Java applications, he believes that a combination of Java and XML will become the primary driving force in the delivery of structured information on the Web.

Richard has participated in numerous consulting projects involving Java, XML, or a combination of the two.  He frequently provides onsite Java and/or XML training at the high-tech companies located in and around Austin, Texas.  He is the author of Baldwin’s Java Programming Tutorials, which has gained a worldwide following among experienced and aspiring Java programmers. He has also published articles on Java Programming in Java Pro magazine.

Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories