Build an XML-based Tree Control with JavaScript : Page 4

Tree controls provide a hierarchical view of data and XML provides a way to structure data hierarchically, so viewing XML data as a tree structure is a natural fit. But browsers don't provide a tree control. Instead, use this mix of XML, XSLT, JavaScript, and CSS to produce an extensible HTML tree control.

by Tom Duffy

Apr 17, 2003

Page 4 of 6

Create the XSLT Stylesheet
XSLT—as the "Transformations" aspect of the name suggests—is a mechanism whereby your XML data is transformed into some other form. That form could be HTML, WML, SOAP, or another XML structure. This article focuses on converting the XML document containing the data to HTML. The concept is simple: you create a set of rules for the elements in your XML document (aka a stylesheet) that manipulates those elements to make them presentation-friendly. Then you apply the stylesheet to the document with an XSLT processor. The transformation can happen in place when XSLT support is built into the client, or externally, for example on your Web server. If you perform the transformation externally, you send the transformation's result to the client. However, both IE and N7 can be used to process the XSLT instructions in place, so if you're using one of those two browsers, you don't need a Web server to use the tree control presented in this article.

In a nutshell, XSLT transforms your XML into a more viewable form. The original XML content is known as the source tree in the XSLT process. The output of the transformation is known as the result tree. Your stylesheet contains the rules for making the switch from source tree to result tree happen. You define those rules in XSLT templates. The XSLT engine applies the rules you define.

Here is the XSLT Stylesheet:

   <?xml version="1.0"?>
   <xsl:stylesheet 
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
      version="1.0">
   <xsl:output method="html"></xsl:output>
   
   <xsl:template match="/">
      <html>
         <head>
         <title>XML Tree Control</title>
         <link rel="stylesheet" type="text/css" 
            href="xmlTree.css"/>
         <script type="text/javascript" 
            src="xmlTree.js"></script>
         </head>
         <xsl:apply-templates/>
      </html>
   </xsl:template>
   
   <xsl:template match="tree">
      <body>
      <xsl:apply-templates/>
   </body>
   </xsl:template>
   
   <xsl:template match="branch">
      <span class="trigger">
      <xsl:attribute name="onClick">
         showBranch
         ('<xsl:value-of select="@id"/>');
      </xsl:attribute>
   
      <img src="closed.gif">
         <xsl:attribute name="id">I
            <xsl:value-of select="@id"/>
         </xsl:attribute>
      </img>
   
      <xsl:value-of select="branchText"/>
      <br/>
      </span>
   
      <span class="branch">
      <xsl:attribute name="id">
         <xsl:value-of select="@id"/>
      </xsl:attribute>
      <xsl:apply-templates/>
      </span>
   </xsl:template>
   
   <xsl:template match="leaf">
      <img src="doc.gif"/>
      <a>
      <xsl:attribute name="href" >
         <xsl:value-of select="link"/>
      </xsl:attribute>
      <xsl:value-of select="leafText"/>
      </a><br/>
   </xsl:template>
   
   <!-- avoid output of text node 
        with default template -->
   <xsl:template match="branchText"/>
   
   </xsl:stylesheet>

Save the file as xmlTree.xsl.

XSLT is written in XML, so it enjoys all the benefits inherent in XML—including namespace support as shown in the preceding code. The <xsl:stylesheet> element is a container for all of the templates in the stylesheet. The <xsl:output> element is optional and can take several parameters that give you better control over the result tree. The method attribute takes as a value either xml, html, or text. XML is case-sensitive, so be careful how you enter names and parameter values.

Download The Code for this Article

« Previous Page 1 2 345 6 Next Page »

0 Comments (click to add your comment)

Comment and Contribute