Outputting to HTML | XSLT for Dummies

Chapter 10 - To HTML and Beyond!
XSLT For Dummies
by Richard Wagner
Hungry Minds 2002

The disparities between HTML and XML may cause you to despair when youre inputting HTML documents. Happily, the output side is a completely different story. In fact, you dont even need to think about whether the resulting HTML code is well- formed when you create your XSLT stylesheets, because the XSLT processor handles all the messy conversions for you.

To demonstrate , I start with the quotes.xml file shown in Listing 10-1 as my source document.

Listing 10-1: filmquotes.xml

 <?xml version="1.0"?> <filmquotes> <quote> <spokenby>Buzz Lightyear</spokenby> <source>Toy Story</source> <text>To infinity, and beyond!</text> </quote> <quote> <spokenby>Sam</spokenby> <source>Bennie and Joon</source> <text>It seems to me that, aside from being a little mentally ill, she's pretty normal.</text> </quote> <quote> <spokenby>Sabrina</spokenby> <source>Sabrina</source> <text>More isn't always better, Linus. Sometimes it's just more.</text> </quote> <quote> <spokenby>Rick Blaine</spokenby> <source>Casablanca</source> <text>Who are you really, and what were you before? What did you do, and what did you think, huh?</text> </quote> <quote> <spokenby>Phil Connors</spokenby> <source>Groundhog Day</source> <text>Well, it's Groundhog Day again</text> </quote> <quote> <spokenby>Wesley</spokenby> <source>Princess Bride</source> <text>To the pain</text> </quote> <quote> <spokenby>Delmar</spokenby> <source>O Brother, Where Art Thou</source> <text>We thought you was a toad.</text> </quote> <quote> <spokenby>Inigo Montoya</spokenby> <source>Princess Bride</source> <text>Hello. My name is Inigo Montoya. You killed my father. Prepare to die.</text> </quote> </filmquotes>

To transform this source file to an HTML document, my first step is to use the xsl:output element and define its method attribute to html :

 <xsl:output method="html"/>

The xsl:output element is used to specify the structure of the result document. By default, XSLT outputs an XML file. But you can use the method attribute to also specify text or html . (Chapter 9 showed some examples of using xsl:output to create text files with method="text" .) When you use html , the processor outputs standard HTML 4.0.

I now need to add the content to my HTML document. Because HTML knows only formatting elements, such as p or h1 , I dont want to carry over any XML element names into the result document. So, to start off, I change the filmquotes document element into an HTML document "wrapper" with html and body elements and apply the filmquotes element contents:

 <!-- Wrap html and body elements around rest of document --> <xsl:template match="filmquotes"> <html> <body> <xsl:apply-templates/> </body> </html> </xsl:template>

For each quote element, I prepare a formatted template for its contents, listing the values of the three child elements:

 <!-- Render each quote as HTML --> <xsl:template match="quote"> <h2><font color="#000099" face="Arial, Helvetica, sans- serif"><xsl:value-of select="source"/></font></h2> <font face="Georgia, Times New Roman, Times, serif"> <p><xsl:value-of select="spokenby"/> said the following memorable line in <i><xsl:value-of select="source"/></i>:</p> <p>"<xsl:value-of select="text"/>"</p></font> <hr></hr> </xsl:template>

The entire stylesheet is shown here:

 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html"/> <!-- Wrap html and body elements around rest of document -- > <xsl:template match="filmquotes"> <html> <body> <xsl:apply-templates/> </body> </html> </xsl:template> <!-- Render each quote as HTML --> <xsl:template match="quote"> <h2><font color="#000099" face="Arial, Helvetica, sans- serif"><xsl:value-of select="source"/></font></h2> <font face="Georgia, Times New Roman, Times, serif"> <p><xsl:value-of select="spokenby"/> said the following memorable line in <i><xsl:value-of select="source"/></i>:</p> <p>"<xsl:value-of select="text"/>"</p></font> <hr/> </xsl:template> </xsl:stylesheet>

Check out the HTML that the transformation generates:

 <html> <body> <h2><font color="#000099" face="Arial, Helvetica, sans- serif">Toy Story</font></h2><font face="Georgia, Times New Roman, Times, serif"> <p>Buzz Lightyear said the following memorable line in <i>Toy Story</i>: </p> <p>"To infinity, and beyond!"</p></font><hr> <h2><font color="#000099" face="Arial, Helvetica, sans- serif">Bennie and Joon</font></h2><font face="Georgia, Times New Roman, Times, serif"> <p>Sam said the following memorable line in <i>Bennie and Joon</i>: </p> <p>"It seems to me that, aside from being a little mentally ill, she's pretty normal."</p></font><hr> <h2><font color="#000099" face="Arial, Helvetica, sans- serif">Sabrina</font></h2><font face="Georgia, Times New Roman, Times, serif"> <p>Sabrina said the following memorable line in <i>Sabrina</i>: </p> <p>"More isn't always better, Linus. Sometimes it's just more."</p></font><hr> <h2><font color="#000099" face="Arial, Helvetica, sans- serif">Casablanca</font></h2><font face="Georgia, Times New Roman, Times, serif"> <p>Rick Blaine said the following memorable line in <i>Casablanca</i>: </p> <p>"Who are you really, and what were you before? What did you do, and what did you think, huh?"</p></font><hr> <h2><font color="#000099" face="Arial, Helvetica, sans- serif">Groundhog Day</font></h2><font face="Georgia, Times New Roman, Times, serif"> <p>Phil Connors said the following memorable line in <i>Groundhog Day</i>: </p> <p>"Well, it's Groundhog Day again"</p></font><hr> <h2><font color="#000099" face="Arial, Helvetica, sans- serif">Princess Bride</font></h2><font face="Georgia, Times New Roman, Times, serif"> <p>Wesley said the following memorable line in <i>Princess Bride</i>: </p> <p>"To the pain"</p></font><hr> <h2><font color="#000099" face="Arial, Helvetica, sans- serif">O Brother, Where Art Thou</font></h2><font face="Georgia, Times New Roman, Times, serif"> <p>Delmar said the following memorable line in <i>O Brother, Where Art Thou</i>: </p> <p>"We thought you was a toad."</p></font><hr> <h2><font color="#000099" face="Arial, Helvetica, sans- serif">Princess Bride</font></h2><font face="Georgia, Times New Roman, Times, serif"> <p>Inigo Montoya said the following memorable line in <i>Princess Bride</i>: </p> <p>"Hello. My name is Inigo Montoya. You killed my father. Prepare to die."</p></font><hr> </body> </html>

The XSLT processor not only formats the HTML nicely , but also converts the markup into the kind of HTML that gives browsers warm fuzzies. For example, my <hr/> element was automatically converted to <hr> . Figure 10-1 shows the resulting HTML document when you open it with Internet Explorer.

Tip You arent always required to specify <xsl:output method="html"/> to get HTML formatting in the result document. If html is your document element, the XSLT processor assumes that your file is supposed to be an HTML document and formats the document accordingly . However, it is good programming practice to use xsl:output anyway in order to ensure clarity and intent of your code.

Figure 10-1: Transformed HTML document in Internet Explorer.




2000-2002 Feedback