Debugging Style Sheets

Although there are some rudimentary tools available for debugging style sheets, the best method for locating problems is to trace or step through your style sheet. To step through a style sheet, it’s important to understand how a style sheet is executed. Chapter 2 described the data model and showed this process. Chapter 4 also described the process in greater detail.

However, it’s important to remember that template rules are not generally executed in the order you’ve written them. The root template is always executed first. How your other templates are executed depends entirely on how you’ve designed the rest of your style sheet.

In general, I promote the following structure for all style sheets:

<xsl:stylesheet  xmlns:xsl=”namespaces go here”> 

  <!-- Root template --> 
  <xsl:template match=”/”> 

     <!-- templates 
            go 
           here 
      --> 

   <xsl:apply-templates select=”template_N”/> 

  </xsl:template> 

  <xsl:template match=”template_1”> 

     <!-- templates go here  --> 

     <xsl:apply-templates /> 
  </xsl:template> 
  <xsl:template match=”template_2”> 

     <!-- templates go here  --> 

     <xsl:apply-templates /> 
  </xsl:template> 
  <xsl:template match=”template_3”> 

     <!-- templates go here  --> 

     <xsl:apply-templates /> 
  </xsl:template> 
  <xsl:template match=”template_N”> 

     <!-- templates go here  --> 

     <xsl:apply-templates /> 
  </xsl:template> 
</xsl:stylesheet> 

The root template rule contains an <xsl:apply-templates select="template_N"/>, which selects one of the other template rules. Each of the other template rules handles a specific element type in the source document. Each of these template rules also contains its own <xsl:apply-templates/>.

When processing begins, the root template rule is instantiated and the individual templates are executed. When the <xsl:apply-templates select="template_N"/> template is invoked, processing jumps to the template_N rule. The processor then executes the templates within this rule. The <xsl:apply-templates /> tells the processor to look for subelements and apply the appropriate rule. By including an <xsl:apply-templates /> in every template rule, you ensure that every element in the source document is processed.

If you design your style sheets this way, you will generally have fewer problems and will find it easier to identify an offending piece of code. You can, of course, control how template rules are invoked by supplying a select attribute in your <xsl:apply-templates/> element. However, this means you must often trace through your program more carefully to locate a problem area. Besides, I generally prefer to let the processor locate elements and apply templates rather than try to control this process.

Scanning Your Code

In approaching your code, there are some basic steps that might help you quickly zero in on your problem.

Now, let’s see how these steps might help in locating a problem. Listing 12.4 presents an XML document that represents an online news story. The root element is <article>, which contains <headline>, <deck>, <byline>, <pubDate>, and <aBody> subelements.

Listing 12.4. An XML Document Representing an Online News Story

<?xml version=”1.0”?> 
<!DOCTYPE article SYSTEM “news.dtd”> 
<?xml-stylesheet type=”text/xsl” href=”article9-3.xsl”?> 

<article> 
   <headline section=”feature”>News&amp;Views</headline> 
   <deck>New Web Graphics Standard Emerges</deck> 
   <byline>Michael Floyd</byline> 
   <pubDate>April 1, 1999</pubDate> 

   <aBody> 
      <para1> 
         <dropCap>W</dropCap>hile XML has primarily been used for text,  
          the <bold>World Wide Web Consortium (W3C)</bold> released the first 
          public working draft of the <ital>Scalable Vector Graphics</ital> 
         (SVG) format, which is defined in XML. SVG is intended to be a 
         vendor-neutral, cross-platform format for XML vector graphics over 
         the Web. The working draft status indicates that the W3C is making 
         the proposal public and openly soliciting feedback.</para1> 


<para>The use of vector graphics means that Web designers will be able to 
reuse images more effectively and that images can be easily resized, cropped 
and printed at different resolutions. Because it is defined in XML, the SVG 
format can be read by any existing XML parser, and programmers and script 
developers will be able to access SVG documents through any DOM API to, for 
example, create animations. Text within images, such as figure captions, will 
be maintained as text, so it can easily be searched by search engines. And 
Webmasters will be able to apply style sheets equally well to XML text and SVG. 
</para> 

<para2>Members of the W3C’s SVG Working Group include Adobe, IBM, Apple, 
Microsoft, Sun, HP, Corel, Macromedia, Netscape, and  Quark. For those 
interested, a public mailing list, [email protected], has been started. You can 
get more information on SVG at www.w3.org/Graphics/SVG/. 
</para2> 
   </aBody> 
   <copyright> 
     Copyright  1999-2001, Michael Floyd. All Rights Reserved 
   </copyright> 
</article> 

The <aBody> element contains the body of the article text and includes paragraph elements, subelements that describe italics and bolding, and so on.

Listing 12.5 presents a simple style sheet to transform Listing 12.4 into HTML.

Listing 12.5. This Style Sheet Contains an Error That Causes the Article Headline, Deck, and Byline to Be Displayed, But Is Missing the Entire Body of the Article

<?xml version=”1.0”?> 

<xsl:stylesheet 
   xmlns:xsl=”http://www.w3.org/TR/WD-xsl” 
   xmlns=”http://www.w3.org/TR/REC-html40” 
   result-ns=””> 

  <!-- Root template --> 
  <xsl:template match=”/”> 
    <HTML> 
     <HEAD> 
      <TITLE> 
        <xsl:value-of select=”article/headline”/> 
      </TITLE> 

     </HEAD>  
      <BODY> 
             <H1><xsl:value-of select=”article/headline”/></H1> 

             <P> 
                <xsl:value-of select=”article/deck”/> 
             </P> 
             <BR></BR><BR></BR> 

             <P><I> 
                By 
                <xsl:value-of select=”article/byline”/> 
             </I></P> 
      </BODY> 
    </HTML> 
  </xsl:template> 

  <xsl:template match=”para1”> 
     <P> 
        <xsl:apply-templates/> 
     </P> 
  </xsl:template> 

  <xsl:template match=”para”> 
     <P> 
        <xsl:apply-templates/> 
     </P> 
  </xsl:template> 

  <xsl:template match=”para2”> 
     <P> 
        <xsl:apply-templates/> 
     </P> 
  </xsl:template> 

  <xsl:template match=”dropCap”> 
     <B> 
        <xsl:apply-templates/> 
     </B> 
  </xsl:template> 

  <xsl:template match=”bold”> 
     <B> 
        <xsl:apply-templates/> 
     </B> 
  </xsl:template> 

  <xsl:template match=”italic”> 
     <I> 
        <xsl:apply-templates/> 
     </I> 
  </xsl:template> 

</xsl:stylesheet> 

The transformation in Listing 12.5 produces the screen shown in Figure 12.2. In looking over the XML document in Listing 12.4, this is clearly not what we expected. Our transformation displays the article headline, deck and byline, but is missing the entire body of the article.

Because we can see some text, we can skip some of the basic questions, such as whether the source document well formed, and whether it can be validated against the DTD. Clearly, the document has passed these tests and the style sheet is presenting some data. That also means the style sheet is loading properly. Hence, it’s time to go through the code.

Although approaches to debugging code are a matter of personal choice, you’ll find it helpful to quickly survey the structure of your document to ensure it includes all the necessary template rules. A quick glance of the style sheet shows that you have a root template rule and additional template rules covering headline, deck, and byline. There are also template rules to process paragraphs, bold, italics, and so on. However, you’ll notice that there’s no template rule to process <aBody>.

Alright, you’ve found the first problem. To correct it, add the following template rule to Listing 12.5, save the file, and reload the example:

<xsl:template match=”aBody”> 
   <P> 
      <xsl:apply-templates/> 
   </P> 
</xsl:template> 

When you reload the example, you’ll notice that the browser window has not changed and is still missing the body of the article.

Now it’s time to hunt. You can narrow the search by examining the output. The last item to successfully display is the article’s byline. So, scan through the root template rule to the point where the byline is being displayed. The block of code that displays the byline is

<P><I> 
   By 
   <xsl:value-of select=”article/byline”/> 
</I></P> 

The lines after this block are the closing tags for the HTML document, followed by the closing tag for the root template rule. Clearly, you have not instructed the style sheet processor to hunt for additional template rules. To do so, you must add the following line just before these closing tags:

<P> 
   <xsl:apply-templates select=”article/aBody”/> 
</P> 

As mentioned at the beginning of this chapter, most bugs are obvious and easy to fix once you find them. The part that’s time consuming is locating the problem. The one catch in this example is that a simple <xsl:apply-templates/> won’t do. You must include a select attribute that selects the instance of the aBody element to which you want to apply your template. A common mistake is to omit the attribute.