Section 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

<?xml version='1.0'?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <xsl:output method="html" indent="yes" media-type="text/html"/>

      <xsl:template match="/">
            <xsl:element name="div">
                  <xsl:call-template name="row">
                        <xsl:with-param name="string" select="'Guild
Name:'" />
                        <xsl:with-param name="top" select="'75px'" />
                  </xsl:call-template>
                  <xsl:call-template name="row">
                        <xsl:with-param name="string" select="'Item
Name:'" />
                        <xsl:with-param name="top" select="'92px'" />
                  </xsl:call-template>
                  <xsl:call-template name="row">
                        <xsl:with-param name="string"
select="'Description:'" />
                        <xsl:with-param name="top" select="'110px'" />
                  </xsl:call-template>
                  <xsl:call-template name="row">
                        <xsl:with-param name="string" select="'Price:'" />
                        <xsl:with-param name="top" select="'127px'" />
                  </xsl:call-template>

                  <xsl:call-template name="row">
                        <xsl:with-param name="string"
select="'guild_name'" />
                        <xsl:with-param name="type" select="'data'" />
                        <xsl:with-param name="top" select="'75px'" />
                  </xsl:call-template>
                  <xsl:call-template name="row">
                        <xsl:with-param name="string" select="'item_name'"
/>
                        <xsl:with-param name="type" select="'data'" />
                        <xsl:with-param name="top" select="'92px'" />
                  </xsl:call-template>
                  <xsl:call-template name="row">
                        <xsl:with-param name="string"
select="'item_description'" />
                        <xsl:with-param name="type" select="'data'" />
                        <xsl:with-param name="top" select="'110px'" />
                  </xsl:call-template>
                  <xsl:call-template name="row">
                        <xsl:with-param name="string"
select="'item_price:'" />
                        <xsl:with-param name="type" select="'data'" />
                        <xsl:with-param name="top" select="'127px'" />
                  </xsl:call-template>
                  </xsl:element>
            </xsl:template>

            <xsl:template name="row">
                  <xsl:param name="dataisland" select="' '" />
                  <xsl:param name="string" />
                  <xsl:param name="type" select="'header'" />
                  <xsl:param name="top" />

                  <xsl:variable name="apostrophe">'</xsl:variable>
                  <xsl:variable name="nbsp">&amp;nbsp;</xsl:variable>

            <xsl:element name="div">
                  <xsl:attribute name="class">rowHeader</xsl:attribute>
                  <xsl:attribute name="style">
                        <xsl:choose>
                              <xsl:when test="$type = 'header'">
                                    <xsl:value-of
select="concat($apostrophe,'position: absolute; left: 50px; right: auto%;
bottom: auto; width: 200px; top: ',$top,$apostrophe)" />
                              </xsl:when>
                              <xsl:otherwise>
                                    <xsl:value-of
select="concat($apostrophe,'position: absolute; left: 255px; right: auto%;
bottom: auto; width: 600px; top: ',$top,$apostrophe)" />
                              </xsl:otherwise>
                        </xsl:choose>
                  </xsl:attribute>

                  <xsl:choose>
                        <xsl:when test="$type = 'header'">
                              <xsl:value-of disable-output-escaping="yes"
select="concat($nbsp,$string)" />
                        </xsl:when>
                        <xsl:otherwise>
                              <xsl:attribute name="xmlDI">
                                    <xsl:value-of select="$dataisland" />
                              </xsl:attribute>
                              <xsl:attribute name="xmlNode">
                                    <xsl:value-of select="$string" />
                              </xsl:attribute>
                        </xsl:otherwise>
                  </xsl:choose>
            </xsl:element>
      </xsl:template>
</xsl:stylesheet>

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:

<xsl:variable name="apostrophe">'</xsl:variable>

<xsl:value-of select="concat('javascript:pageLoad
(',$apostrophe,'itemsDisplay.xsl',$apostrophe,',
',guild_id,',null)')" />

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.

<xsl:value-of select="concat('javascript:pageLoad
(',','itemsDisplay.xsl',',',',guild_id,',null)')" />

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 for us.

11.2. Tabular Information

Table 11-2. `XSLTProcessor`

11.2.1. Read Only

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

Figure 11-1. The properly rendered page

11.2.2. Updateable

11.2. Tabular Information

Table 11-2. XSLTProcessor

11.2.1. Read Only

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

Figure 11-1. The properly rendered page

11.2.2. Updateable

Table 11-2. `XSLTProcessor`