Using Cascading Style Sheets to Display Results
For Web-based XML applications, it is often important not only to transform XML into HTML (a primary use of XSLT), but also to format the resulting HTML. An XSLT transformation can easily emit <font> elements, bgcolor attributes for <BODY> elements, and so on, just as easily as it can emit other HTML.
For a number of important reasons, however, your HTML code will benefit from using cascading style sheets (CSS) to control the appearance of a page and other aspects of presentation. Luckily, you can combine the transformational strengths of XSLT with the formatting capabilities of CSS.
This section contains the following topics.
Incorporating <STYLE> Elements into an XSLT File
An XSLT style sheet can emit HTML <STYLE> elements, including CSS specifications, directly into the HTML that results from the XSLT transformation. This option works best when the number of CSS rules is small and easily managed.
To place a <STYLE> element and its CSS rules into the result tree of a transformation, you can include them in the XSLT template that instantiates the HTML <HEAD> element. The book.xsl file below illustrates this.
In book.xsl, the first template rule matches the root element of the XML document, <book>. When it finds a match in the source tree, it instantiates <HTML> and <HEAD> elements in the result tree.
The <HEAD> element includes both a <TITLE> element and a <STYLE> element. The <STYLE> element includes a single CSS rule, which says to display all <H1> elements in the result tree in the indicated font.
Finally, this template rule says to instantiate a <BODY> element, and then to process any children of the matching <book> element. This is the purpose of the <xsl:apply-templates/> element. During this process, the template rule also checks for other matching template rules, and transforms them as necessary.
The second template rule is invoked by the <xsl:apply-templates/> element of the first template rule. This second template rule instantiates an <H1> element. The content of the <H1> element is that of a <book_title> element in the source tree.
The result of applying this transformation to the sample source document is shown below.
XML File (book.xml)
<?xml version='1.0'?> <?xml-stylesheet type="text/xsl" href="book.xsl" ?> <book> <book_title>Jambing on the Trixles</book_title> <author> Randall, Tristan</author> </book>
XSLT File (book.xsl)
<?xml version='1.0'?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="book"> <HTML> <HEAD> <TITLE>Book Info</TITLE> <STYLE> H1 {font-family: Arial,Univers,sans-serif; font-size: 36pt } </STYLE> </HEAD> <BODY><xsl:apply-templates/></BODY> </HTML> </xsl:template> <xsl:template match="book_title"> <H1><xsl:value-of select="."/></H1> </xsl:template> </xsl:stylesheet>
XSLT Processor Output
<HTML> <HEAD> <TITLE>Book Info</TITLE> <STYLE> H1 {font-family: Arial,Univers,sans-serif; font-size: 36pt } </STYLE> </HEAD> <BODY><H1>Jambing on the Trixles</H1> Randall, Tristan</BODY> </HTML>
Using the <STYLE> Element with Older Browsers
Most of this section describes a best practice XSLT-to-HTML transformation. However, older browsers cannot process a client-side XSLT-to-HTML transformation, so this section applies to server-side or static transformations only.
Some browsers, particularly older ones, do not recognize the <STYLE> element at all. As with any unrecognized HTML elements, the default behavior of such browsers is simply to display the content of the unrecognized element—in this case, the CSS code itself.
To prevent this behavior, in a stand-alone HTML document you would embed the CSS code in an HTML comment. This masks the CSS code from browsers that do not understand the <STYLE> element, but still makes it available to browsers that do understand the <STYLE> element.
To create a comment in the result tree of an XSLT transformation, you use an <xsl:comment> element whose content is the text of the comment. For example, a backward-compatible version of the template rule for processing the <BOOK> element from book.xsl would look like bookbackwcmp.xsl, shown below.
NoteYou cannot simply place the literal <!-- and > comment delimiters in the result tree to create the desired effect. Doing so creates a comment in the XSLT style sheet itself.
Most of this section describes a best practice XSLT-to-HTML transformation. However, older browsers cannot process a client-side XSLT-to-HTML transformation, so this section applies to server-side or static transformations only.
Some browsers, particularly older ones, do not recognize the <STYLE> element at all. As with any unrecognized HTML elements, the default behavior of such browsers is simply to display the content of the unrecognized element—in this case, the CSS code itself.
To prevent this behavior, in a stand-alone HTML document you would embed the CSS code in an HTML comment. This masks the CSS code from browsers that do not understand the <STYLE> element, but still makes it available to browsers that do understand the <STYLE> element.
To create a comment in the result tree of an XSLT transformation, you use an <xsl:comment> element whose content is the text of the comment. For example, a backward-compatible version of the template rule for processing the <BOOK> element from book.xsl would look like bookbackwcmp.xsl, shown below.
| Note |
|---|
You cannot simply place the literal <!-- and > comment delimiters in the result tree to create the desired effect. Doing so creates a comment in the XSLT style sheet itself. |
XML File (bookbackwcmp.xml)
<?xml version='1.0'?>
<?xml-stylesheet type="text/xsl" href="bookbackwcmp.xsl" ?>
<book>
<book_title>Jambing on the Trixles</book_title>
<author> Randall, Tristan</author>
</book>
<?xml version='1.0'?> <?xml-stylesheet type="text/xsl" href="bookbackwcmp.xsl" ?> <book> <book_title>Jambing on the Trixles</book_title> <author> Randall, Tristan</author> </book>
XSLT File (bookbackwcmp.xsl)
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="book">
<HTML>
<HEAD>
<TITLE>Book Info</TITLE>
<STYLE>
<xsl:comment>
H1 {font-family: Arial,Univers,sans-serif;
font-size: 36pt }
</xsl:comment>
</STYLE>
</HEAD>
<BODY><xsl:apply-templates/></BODY>
</HTML>
</xsl:template>
<xsl:template match="book_title">
<H1><xsl:value-of select="."/></H1>
</xsl:template>
</xsl:stylesheet>
<?xml version='1.0'?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="book"> <HTML> <HEAD> <TITLE>Book Info</TITLE> <STYLE> <xsl:comment> H1 {font-family: Arial,Univers,sans-serif; font-size: 36pt } </xsl:comment> </STYLE> </HEAD> <BODY><xsl:apply-templates/></BODY> </HTML> </xsl:template> <xsl:template match="book_title"> <H1><xsl:value-of select="."/></H1> </xsl:template> </xsl:stylesheet>
Tidak ada komentar:
Posting Komentar