Introduction to Transformations (XSLT) using IE5 (Part 2)
- A Sample Program
- The XML File
- The XSLT File
- Interesting Code Fragments
- Complete Program Listings
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.
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.
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.
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.
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.
Important XSLT constructs
This file illustrates the use of three important XSLT constructs:
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.
The stylesheet element
Here's the beginning tag for an xsl:stylesheet element.
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.
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:
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.
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.
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
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.
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.
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
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.
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
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>
The first two lines are literal text that will be passed through to the output to produce a well-formed HTML output.
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.
The complete listings of the XML and XSLT files follows.
<!-- File XSL002.xml
Copyright 2000 R. G. Baldwin
Illustrates for-each construct
Works with IE5.0
<para>This is a paragraph.</para>
<para>This is another paragraph.</para>
<?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.