ADVANCED CLIENT-SIDE XSLT TECHNIQUES in Font

Encode Data Matrix in Font ADVANCED CLIENT-SIDE XSLT TECHNIQUES

The displayPlanet() function looks quite different because it uses JavaScript to compose the XHTML tags and write them to the document: function displayPlanet(name) { if (name!="<xsl:value-of select="$planetName"/>") { var w = window.open("","planetpopup", "resizable,width=400,height=300"); var docContents = ''; var contentArray = planetList[name].split("|"); w.document.open(); docContents = '<![CDATA[<img src="]]>'+ contentArray[0] + '<![CDATA[.jpg" width="100" height="100" /><h2>]]>'; docContents += contentArray[0]; docContents += '<![CDATA[</h2><p>]]>'; docContents += contentArray[1]; docContents += '<![CDATA[<hr/>Copyright Planetary Fun 2006.</xsl:text></p>]]>'; w.document.write (docContents) w.document.close(); } } The function receives a parameter, name, that contains both the name and description of the planet, separated by a pipe (|) character. The built-in JavaScript split() function converts the string into an array called contentArray(). The first element contains the name, while the second element contains the description. The code can then write each part of the array separately to the document using document.write(). The fixed text, including XHTML elements, is wrapped in CDATA blocks and concatenated with the array content to produce output. It s a little clumsy but, when you test it, you ll find that the approach works in both IE 6 and Mozilla. You ve seen several examples showing some more advanced uses of XSLT. Now it s time to look at some tips and common troubleshooting approaches.

In this section, I want to introduce some tips for working with XSLT stylesheets. I ll also cover some techniques that you can use to troubleshoot problems that arise.

White space is one area that can cause many headaches for new XSLT developers. If you generate only XHTML output, it s not likely to cause too many problems. As you saw with the previous example, once you start generating JavaScript, you can run into some nasty issues. Common problems include too much white space from indenting, white space in the source document, or white space in the stylesheet. In the earlier examples, you set the indent attribute in the <xsl:output> element to yes: <xsl:output method="html" version="4.0" indent="yes"/>

This makes it easier to read through the output from the transformation. Figure 7-9 shows the same file in IE 6, with indenting turned on (on the left) and off (on the right). The example on the left is much easier for a human to read.

Figure 7-9. The planets14.xml page displayed in IE When applying XSLT stylesheets in a web browser, indenting output can cause problems for generated JavaScript. In this case, make sure you set the value of the indent attribute to no: <xsl:output indent="no"/> This benefits server-side XSLT as well. Because you include less white space, the generated files are smaller. As you saw in the previous example, you can deal with white space in the source document using the normalize-space() function. This function removes leading and trailing spaces, and it compresses internal white space to a single space character. You saw this within the following line: <xsl:value-of select="normalize-space(description/text())"/> You can also use the top-level <xsl:strip-space> element to strip out white-space-only nodes from elements in the source document. You can apply this to all elements with this line: <xsl:strip-space elements="*" /> Be aware that <xsl:strip-space> acts on nodes that only contain white space, not nodes that include text as well as white space. The opposite is the <xsl:preserve-space> element, which allows you to preserve white space within a document. As you saw in the previous example, dealing with white space in a stylesheet requires an understanding of what happens when an XSLT processor generates output. The processor removes all text nodes containing only white space, unless they re within an <xsl:text> element.

You can use an empty <xsl:text/> element to split text with a mixture of white space and characters into two separate text nodes: <xsl:template match="planet"> <xsl:text/>Name: <xsl:value-of select="@name"/> </xsl:template> If the stylesheet doesn t include the <xsl:text/> element, it will create white space before the text Name. Instead, the <xsl:text> element splits the white space from the text so that it is ignored. Only the text Name remains. The <xsl:text> element also preserves white space: <xsl:template match="/"> <br/><xsl:text> </xsl:text> </xsl:template> In this code block, using the <xsl:text> element forces a new line after the <br/> element. You could also use the entity for a new line: <xsl:text> </xsl:text> You can read the full details of how XSLT deals with white space at http://www.w3.org/ TR/xslt#strip.