Learning XML: Making Choices

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

• Preface
• Introduction
• A Sample Program
• The XML File
• The XSLT File
• The Output
• Complete Program Listings

Preface

I have authored numerous online articles on XML.  These articles cover the waterfront from introductory to advanced.  Many of these articles are published at EarthWeb.  For a consolidated index of hyperlinks to all of my XML articles at my personal website so that you can locate and access all of my articles from there. You can also follow the links at the top of this article.

You may find it useful to open another copy of this lesson in a separate browser window.  That will make it easier for you to scroll back and forth among the different figures and listings, without losing your place, while you are reading about them. As of this writing, to my knowledge, Microsoft IE5 is the only widely-used web browser that has the ability to render XML documents.  IE5 can render XML documents using either CSS or XSL. This is one in a series of articles in which I discuss the use of XSL for the rendering of XML documents, with particular emphasis on the use of IE5 for that purpose.

Introduction

By now, if you have been reading my previous articles, you should know quite a lot about how to use XSLT to transform XML documents into HTML documents for rendering in IE5. In this article, I am going to continue using the HTML table model that I introduced in earlier articles. In this article, I am going to show you how to choose among several different alternatives.

A Sample Program

I will develop the XML code representing a small database of information on books.  The database will contain Title, Author, and Price information for each book. In addition, each data element describing a book will contain an attribute describing the type of book. When you load the XML file into IE5, the XML data will be converted into an HTML table and displayed in the browser window. The HTML table will have three columns:

• Title
• Author
• Price

The information for each book will occupy one row in the HTML table.  The background color of each row will be determined by the value of a  type attribute associated with each book. Books about programming will be colored red.  Books about pets will be colored green.  Books about gardening will be colored blue.  All other books will be colored pink. 

Alternately to IE5, 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.

This example is based on XSLT information available at the W3C and on IE5 information available at Microsoft. I will discuss the code in fragments.  Complete listings of the XML file, the XSLT file, and the HTML output are presented near the end of the lesson.

The XML File

The XML file is named XSL008.xml. This file is so similar to the files used in previous articles that I am going to show only one small fragment in this section.  You will find that fragment in Listing 1.

<theData type=”Programming“>
<title>Java</title>
<author>R.Baldwin</author>
<price>$9.95</price>
</theData>

For brevity, I deleted everything except one data element.  You can view the entire XML file in the listing near the end of the lesson. The  fragment shown in the above listing illustrates how the data describing a book is stored in the XML file. Each book is described in an element named theData. Each element named theData has an attribute named type.  This attribute describes the type of book, and will be used to determine the background color of the row containing that book in the final HTML table.

Each data element describing a book contains three elements named title, author, and price. Although it isn’t shown in the previous listing, each of the elements containing information about a book are children of the top-level element named top. If I were describing this XML file in tree terminology, I would say that the root node is named top. The root node has an undefined number of child nodes named theData.  Each of these nodes has an attribute named type. Each node named theData has three child nodes named title, author, and price. If you visualize this in your mind or sketch it on paper, you will see that it is a very simple tree.

The XSLT File

The XSLT file is named XSL008.xsl. This file transforms a simple database of book information into an HTML table, causing the background color of each row to be based on the value of an attribute of the book. I will discuss also this XSLT file in fragments.  A complete listing of the file is presented near the end of the lesson.

I am going to skip over all of the preliminary stuff.  I will also skip over the code that creates the table and creates the first row in the table containing the literal text Title, Author, and Price. I discussed code similar to that in an earlier lesson and won’t discuss it further here. The fragment shown in the following listing contains the code that is the focus of this lesson, with some of the important new code highlighted in boldface.

<!– Do a for-each loop –>
<xsl:for-each select=”top/theData”>

<tr>
<!– 
Create new table row with style (color) attribute
based on type of the book.
–>

<xsl:attribute name=”STYLE“>background:
  <xsl:choose>
    <xsl:when test=”@type[.=’Programming’]”>
        red
    </xsl:when>
    <xsl:when test=”@type[.=’Pets‘]”>
     green
    </xsl:when>
    <xsl:when test=”@type[.=’Gardening‘]”>
     blue
    </xsl:when>
    <xsl:otherwise>
     pink
    </xsl:otherwise>
  </xsl:choose>
</xsl:attribute>

This fragment begins by setting up a for-each loop to process each data element in the XML database. Then it sets up to create a new row <tr> in the output table for each book. Then it uses an xsl:attribute processing element to create a STYLE attribute for each row. The value of the STYLE attribute for each row is determined by using an xsl:choose processing element to determine the value of the XML attribute named type. Because of the common terminology involved, this can be confusing.  What I am doing here is using the value of an attribute of an XML data element to create an attribute for an HTML table-row element.  Each XML attribute value maps into a specific HTML attribute value. Depending on the value of the XML attribute named type, an xsl:when processing element is used to cause the value of the HTML attribute to be set to either red, green, or blue.  (Note that pink can also be produced from an xsl:otherwise processing element.)  This color value is concatenated with the string background: to produce HTML output elements as shown in the following:

<tr STYLE=”background:  red”>
…
</tr>

You learned about accessing attributes (test=”@type) and testing ([.=’Programming’]) in earlier lessons, therefore the syntax (test=”@type[.=’Programming’]”) should be clear to you by now. Just in case it isn’t clear, the syntax (<xsl:when test=”@type[.=’Programming’]”>)  if further explained:

In this case, execution of the next statement simply inserts a string specifying a color value into the output stream. The syntax (xsl:otherwise) is described as:

If none of the above tests result in a match, execute the following statement by default.

In this case, the string specifying the color pink is inserted into the output stream. The fragment in the following listing 4 shows the code that populates each of the cells in the HTML table with the appropriate value.  You have seen code like this in earlier lessons, so I won’t discuss it further.

<!– Create and populate table cells –>
<td><b><xsl:value-of select=”title”/></b></td>
<td><b><xsl:value-of select=”author”/></b></td>
<td><b><xsl:value-of select=”price”/></b></td>
</tr>

</xsl:for-each>

The remaining code in the XSLT file consists solely of end tags, so I won’t show it here.
 

The Output

A listing of the output HTML produced by this program is shown in the HTML listing at the end of the lesson.  I captured this HTML code using the Microsoft XSL Debugger discussed in an earlier lesson.  I didn’t try to make it pretty.  I simply stuffed it into the box.

If you load the XML file into your IE5 browser, you should see something very similar to the figure below in the browser window. The backgrounds of the different rows should be colored red, green, blue, and pink. (Note that you may not see the appropriate background colors for the rows in the following table if you are using an older browser.  In that case, the background color of all the rows may simply be yellow.)
 

Summary

This lesson uses an XSLT file to transform the contents of a simple XML database into an HTML table. It uses the xsl:choose conditional processing element to determine the background color of each row in the table. The background color of each row is determined from the value of an attribute of the corresponding data element in the XML file.

Complete Program Listings

Complete listings of the XML file, the XSLT file, and the HTML output follow:

XSL008.xml
 

XSL008.xsl
 

Output HTML
 

Note: I have authored numerous online articles on XML.  These articles cover the waterfront from introductory to advanced.  Many of these articles are published at EarthWeb.  For a consolidated index of hyperlinks to all of my XML articles at my personal website so that you can locate and access all of my articles from there. You can also follow the links at the top of this article.

About the author

Richard Baldwin (baldwin.richard@iname.com) 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.

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.