www.developer.com/xml/article.php/640731
December 18, 2000
June 10, 2000
PrefaceI have authored numerous online articles on XML. These articles cover the waterfront from introductory topics to advanced topics. I maintain a consolidated index of hyperlinks to all of my XML articles at my personal Web site so that you can access earlier articles from there.As of this writing, 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 that discuss the use of XSL for the rendering of XML documents, with particular emphasis on the use of IE5 for that purpose. IntroductionIn a previous article, I showed you how to use the xsl:for-each processing element to loop through an XML file, extracting data from that file, and inserting the data into the individual cells of an HTML table. In the article, I also showed you one way to insert attributes into the output stream, simply by coding those attributes as literal text. In this article, I am going to show you a different way to insert attributes into the HTML output file. This approach is more powerful than the previous approach. Whereas the previous approach relied upon static literal values in the XSLT file, this approach can cause the value of the output attribute to be based on data values in the XML file. Hence, this is a dynamic approach. A Sample ProgramAs in an earlier lesson, I will develop the XML code representing a small database of information on books. As before, the database will contain Title, Author, and Price information for each book. In addition, I will develop the XSLT code necessary to process that database. I will show you how to use IE5 to transform the data in the XML database to HTML according to the XSLT. When you load the XML file into IE5, the XML data will be converted into an HTML table and displayed in the browser window. In the previous lesson that transformed a similar XML database into HTML, one row in an HTML table was dedicated to each book. Each row had three cells. The contents of the three data elements for each book, Title, Author, and Price, were inserted into cells in the row corresponding to that book. This program will be similar, but different. In this program, only the Title and Author for each book is displayed in a cell in the table. The Price of the book is not displayed in a cell. However, if you point to one of the rows with your mouse pointer, a tool tip appears showing the price of the book described by that row. In other words, I will be using data in the XML database to create tool tips in the HTML file. 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. This is useful if you want to see the HTML file that is actually produced by using the XSLT file to transform the XML file. 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 file produced by the transformation are presented near the end of the lesson. The XML FileThe XML file for storing book information for this example is named XSL004.xml. This file is so simple and so similar to the file used in a previous article that I am going to show only one small fragment in this section. For brevity, I deleted some material and replaced the deleted material with an ellipsis (...). As mentioned earlier, you can view the entire file near the end of the lesson. The following shows 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 contains three elements named title, author, and price. The contents of each of these three elements contain the data that differs from one book to the next. I highlighted the contents using boldface for this particular book to make it easy to spot (obviously, you would not use boldface in your actual XML file). Now let's look at the XSLT file. The XSLT FileThe XSLT file for this example is named XSL004.xsl. This file shows how to use XSLT to transform the contents of a simple XML database into an HTML table, and how to provide a tool tip for each row of the table. The tool tip displays the price information for the book corresponding to that row. The price information is part of the data in the XML database. I will discuss 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 material and get right down to the creation of the table. The following code creates the table and then creates the first row in the table.
<table BORDER="2" The cells in the first row contain the literal text Title and Author. I discussed code like this in an earlier lesson, so I won't discuss it further here. The following code is the focus of this lesson. The important new code is highlighted in boldface.
<!-- Do a for-each loop --> To begin with, this fragment uses the <xsl:for-each select="top/theData"> processing element to create a loop that will process each XML element named theData that is contained in the element named top. During each iteration of the loop, this code creates two cells in the table and populates those cells with the content values of the title and author elements. This process should not be new to you. What is new is that during each iteration of the loop, this code uses the xsl:attribute processing element to create an attribute named title. You should note that this is an attribute of the <tr> HTML element being inserted into the output stream and is not an XML attribute. Since the same terminology is used for the XML file and the output HTML file, it is sometimes difficult to keep them straight. The value of the title attribute for each <tr> element is specified by
|
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 