Using the XSL TransformDefining methods for reading XML must occupy more than a few passing thoughts for some developers because the developer community has created a number of ways to present XML in a readable format. The XSL Transform page provides another text-oriented method for working with what appears as XML. However, XSLT files can contain more than just XML, and browsers don't use them for direct display. An XSLT file contains formatting information-a means for displaying the content of an XML file in a form that the average human can read. In addition, the combination of an XML and an XSLT file can create a presentation in a standard browser.The XML file provides content, while the XSLT file provides format. You can take the same content and present it in a number of ways by changing XSLT files. This feature makes it possible for some Web sites to provide a standard and printer friendly view of the same data. The data hasn't changed-only the XSLT file content has changed.Let's begin with the one and only change you have to make to the XML file. To use an XSLT file, you need to add a tag to the beginning of the XML file. This tag tells the browser which XSLT file to use to format the data contained within the XML file. If the browser doesn't find the XSLT file, it will still display the data using whatever method it normally uses for displaying XML files, which isn't very readable by the average user.<?xml-stylesheet type="text/xsl" href="PFormat.XSLT"?>As you can see, the tag simply says that this XML file uses a stylesheet. The type of information in the stylesheet file is a combination of text and XSL. Finally, the name of the XSLT file is PFormat.XSLT. These three entries are all you need to change the way the browser displays the XML file. Creating an XSLT file is a little more complicated. Listing 7-3 shows one of two XSLT files we'll discuss in this section.Listing 7-3. A Simple XSLT File<?xml version='1.0'?><xsl:stylesheet version="'1.0'"xmlns:xsl="'http:"//www.w3.org/1999/XSL/Transform'><xsl:output method="xml" indent="yes" /><xsl:template match="/"> <!-- Create the HTML Code for this stylesheet. --> <HTML> <HEAD> <TITLE>Remote Performance Monitor</TITLE> </HEAD> <BODY> <CENTER> <H3>Performance Monitor Results</H3> </CENTER> <TABLE BORDER="2"> <TR> <TH>Time</TH> <TH>Percent User Time Value</TH> </TR> <xsl:apply-templates select="//Item"/> </TABLE> </BODY> </HTML></xsl:template><!-- XSL template section that describes table content. --><xsl:template match="Item"> <TR> <TD> <xsl:value-of select="Time"/> </TD> <TD> <xsl:value-of select="Data"/> </TD> </TR></xsl:template></xsl:stylesheet>
The code begins with a heading. Always include the XML heading because this is essentially a form of XML. The next tag defines this file as a stylesheet, while the third tag defines the method of output. The fourth tag is especially important because it defines which tags this stylesheet matches in the source XML file. In this case, the stylesheet matches (or imports) all of the tags.The next bit of code begins defining the HTML output for this example. The code is purposely simple in this case-it won't even pass the W3C test because it lacks features such as the <DOCTYPE> tag. However, the HTML output will display a result in a browser, which is all we need now. Nothing prevents you from creating relatively complex HTML using an XSLT file. After the code defines a header, it begins defining the body of the page. In this case, we'll use a table. However, now you need to understand something about the XML file we're using. The target XML file contains entries in thisformat. <Item> <Time>6:25:57 PM</Time> <Data>0</Data> </Item>
The file places each entry within an <Item> element. The subelements, <Time> and <Data>, include the information we want to display. Look at the code and you'll see an <xsl:apply-templates select="//Item"/> entry. This entry tells the browser to display each entry in the XML file according to the definitions provided in the XSL template that matches the <Item> element. The template begins after the code completes the HTML portion of the information with the <xsl:template match="Item"> tag. At this point, we select the values contained in each of the subelements and display them on screen using standard HTML. Figure 7-8 shows the output of the XML file and XSLT file combination.Figure 7-8. Reading this output is easier than viewing straight XML.Let's look at a more complex XSLT file. Remember that the data hasn't changed-only the content of the template has changed. In this case, the view will add a counter, so we know which entry we're looking at, and use a twocolumn format in place of the single-column format shown in Figure 7-8. Listing 7-4 shows the code we'll use in this case.Listing 7-4. A Better XSLT File<?xml version='1.0'?><xsl:stylesheet version="'1.0'"xmlns:xsl="'http:"//www.w3.org/1999/XSL/Transform'><xsl:output method="xml" indent="yes" /><xsl:template match="/"> <!-- Create the HTML Code for this stylesheet. --> <HTML> <HEAD> <TITLE>Another Performance Monitor View</TITLE> </HEAD> <BODY> <H3 ALIGN="Center">Performance Monitor Results</H3> <P ALIGN="Center">Version 2</P> <TABLE BORDER="2"> <TR bgcolor="#C0C0FF"> <TH>Entry</TH> <TH>Time</TH> <TH>Percent User Time Value</TH> <TH>Entry</TH> <TH>Time</TH> <TH>Percent User Time Value</TH> </TR> <xsl:apply-templates select="//Item"/> </TABLE> </BODY> </HTML></xsl:template><!-- XSL template section that describes table content. --><xsl:template match="Item"> <xsl:if test="position() mod 2 = 1"> <xsl:text disable-output-escaping = "yes"> <TR> </xsl:text> </xsl:if> <TD> <xsl:value-of select="position()"/> </TD> <TD> <xsl:value-of select="Time"/> </TD> <TD> <xsl:value-of select="Data"/> </TD> <xsl:if test="position() mod 2 = 0"> <xsl:text disable-output-escaping = "yes"> </TR> </xsl:text> </xsl:if></xsl:template></xsl:stylesheet>
A lot of this code is the same as before-at least the layout of the code is the same. We still have an HTML section and a template section that interprets the data. As you can see, the HTML section includes a new header and then doubles the headers so we can see two rows. I added a little color to the table header for this example-it's a nice touch to differentiate between the two areas.TIP XSLT code might look a little intimidating at first, but it's relatively straightforward once you work with it for a while.You'll find an excellent XSLT reference and examples at http://www.zvon.org/xxl/XSLTreference/Output/index.html. The examples are a little abstract-they aren't HTML specific, but that's actually a good feature because you can use XSLT for more tasks than we are doing here. Developers use XSLT for a number of translation tasks.The template uses a few more XSLT features. The first <xsl:if> tag performs a test on the current position within the file. If the entry is an odd value, then it executes the code that follows. Otherwise, execution continues with the next step, which is to display one of the entries. The code that this first <xsl:if> tag executes is to print out some text using the <xsl:text disable-output-escaping = "yes"> tag. Using this tag permits you to output a <TR> tag to the browser. However, the tag only appears on screen when the template is processing an odd entry.This version of the template will output an item number. You still use the <xsl:value-of> tag. However, instead of selecting the output of an entry in the XML file, this tag selects the output of the position() function. The position() function comes in very handy in processing XML files because it tells you where you are-it's the equivalent of the record number for a database table.The final change for this XSLT file is to add another <xsl:if> tag. Instead of checking for odd entries, this one checks for even entries. As with the first <xsl:if> tag, this one outputs text in the form of the closing </TR> tag. Because of the arrangement of <xsl:if> tags, the display will show two XML file entries in each row. Figure 7-9 shows the output of this example.Figure 7-9. Creating a different look means changing the XSLT file, not the XML data.