11.2. Tabular Information
The previous chapter introduced several JavaScript class constructors in an effort to keep the client-side code manageable. Now is a good time to introduce another, a wrapper around the XSLT processor to handle the browser-specific details involving exactly what is required for XSL transformations. Displaying my usual lack of imagination, the class constructor is named appropriately enough: XSLTProcessor. Table 11-2 shows the properties and methods for this class.


Table 11-2. XSLTProcessor Name
Parent Class
Type
Description

XSLTProcessor

Class
Constructor

importStylesheet
XSLTProcessor
Method
Loads the XSL document for the transformation.

load
XSLTProcessor
Method
Loads the XML document to be transformed.

output
XSLTProcessor
Method
The serialized result of the previous transformation.

readyState
XSLTProcessor
Method
Either the ready state for the XML document or the XSL document, whichever is lower. When they are equal, the appropriate ready state value is returned.

setParameter
XSLTProcessor
Method
Set a parameter for the XSLT processor.

transform
XSLTProcessor
Method
Performs the transformation and returns the serialized result.





With the creation of the XSLTProcessor constructor, the only items remaining are those that are absolutely essential to the website. The essential items are the XSL style sheets themselves, three in total. The first style sheet creates the HTML for the Items page. The purpose of the second style sheet is to create/render the Details page. The final style sheet renders the shopping cart in a slightly different manner than you'd expect. Each of these three items is covered as needed.

11.2.1. Read Only
Please bear with me; what I'm about to say deals only with read-only pages and, to some, might seem to be heresy. When using XSL for read-only pages, data binding isn't necessary; in fact, it is unnecessary overhead. Think about it for a moment: First, the information isn't going to change on the client side. In addition, the transformation process has already taken care of the display of the information. For the aforementioned reasons, it is perfectly acceptable to skip the bind when dealing with read-only information, as the style sheet in Listing 11-6 illustrates.


Listing 11-6. XSL Style Sheet to Produce a Nonbound Table

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">













select="'Description:'" />








select="'guild_name'" />




/>




select="'item_description'" />




select="'item_price:'" />












'
 


rowHeader



select="concat($apostrophe,'position: absolute; left: 50px; right: auto%;
bottom: auto; width: 200px; top: ',$top,$apostrophe)" />


select="concat($apostrophe,'position: absolute; left: 255px; right: auto%;
bottom: auto; width: 600px; top: ',$top,$apostrophe)" />






select="concat($nbsp,$string)" />


















This style sheet first creates an HTML Table element with the required attributes to give the site a common look and feel. Next, the column headers are rendered and a template is invoked to create the individual rows, which is the Table element in the source XML document. If there are no Table elements, only the HTML table headers will be produced. The individual cells are produced based upon the node name, and we're done.

Before proceeding any further, however, I want to explain two statements in the style sheet. The first of these is the one that defines the apostrophe variable:

'


The second statement is the one that uses the apostrophe variable:





These two statements might seem somewhat odd because if you're even slightly familiar with XSL, you know that there is a perfectly acceptable entity that can be used to render apostrophes. The entity that I refer to is ', which, unfortunately, would cause quite a few headaches if used here. The entity would be treated as if it were, in fact, an apostrophe. The XSLT processor would then consider the previous statement to be equivalent to the following.

As you can see, this would lead to an error and a nasty error message instead of the page shown in Figure 11-1.
11.2.2. Updateable
Unlike the previous read-only example, binding cannot be ignored when using XSLT to create updateable web pages. Even so, several advantages exist that were unavailable in earlier chapters. For example, there are the funky looping and concatenating strings to build the HTML with the correct number of rows. XSL takes care of those annoying details
11.3. Advantages and Disadvantages
A number of advantages exist for designing a site that uses client-side XSLT. The first is that it really looks good on the old resuméstrike that. The first is that it becomes possible to design more dynamic websites that can take advantage of the client's machine. In addition, the amount of information can be reduced by caching the XSL style sheets on the client machine. However, if the resources available on the client become something of an issue, there are always alternatives.

The first alternative that comes to mind is to not cache the XSL at all; instead, it could be sent back and forth along with the XML. For large sites, another possibility is to cache only a certain number of pages. This could be handled in sort of a stack: first in, first out.

Concerning caching, one additional idea comes to mind: Forgo the preload entirely. Instead, style sheets could be loaded on an as-needed basis. After being loaded, they could then be cached. The interesting thing about this idea is that, from the client's perspective, performance would improve over timealmost as if the site got better with practice. Talk about mad scientist stuff!

Alas, all of this is for naught if the client's browser doesn't support transformations. Not all of them do. I suppose that an alternative should be made available for those that, for some reason, are still running Microsoft Internet Explorer version 3.0. No, I don't mean server-side transformations to accommodate luddites; I'm thinking more along the lines of a link to www.mozilla.org, where they can join everyone else in the twenty-first

Related Posts