Transform XML using XSLT to XHTML treeview

Peter Huisman

2.18/5 (19 votes)

Jan 16, 2003

125717

1208

Transform XML using XSLT to XHTML treeview.

Download source files - 35 Kb

Introduction

Transform xml data with xslt to xhtml treeview.

sampletree.xml

<code>
<?xml version="1.0" encoding="UTF-8"?>
<treeview title="Sample tree">
  
  <custom-parameters>
    <param name="shift-width" value="15"/>
    <param name="img-directory" value="images/"/>
  </custom-parameters>
  
<folder title="Desktop" img="Desktop.gif">
  <folder title="My documents" img="MyDocuments.gif">
    <folder title="My music" img="folder.gif">
      <leaf title="siteclx" url="1" img="page.gif"/>
      <leaf title="design" url="2" img="page.gif"/>
      <leaf title="devellopment" url="3" img="page.gif"/>
    </folder>
    <folder title="My images" img="MyImages.gif">
      <leaf title="php" url="4" img="red_ball.gif"/>
      <leaf title="perl" url="5" img="red_ball.gif"/>
    </folder>
  </folder>
  <folder title="My computer" img="computer.gif">
    <folder title="Floppy (A:)" url="1" img="floppy.gif"/>
    <folder title="Hard drive (C:)" url="1" img="harddrive.gif">
      <leaf title="Perl" url="7" img="page.gif"/>
      <leaf title="Java" url="8" img="page.gif"/>
      <leaf title="PHP" url="8" img="page.gif"/>
      <leaf title="dotNet" url="8" img="page.gif"/>           
    </folder>
    <leaf title="Configuration Pannel" url="9" img="config.gif"/>
    <leaf title="Shared documents" url="10" img="folder.gif"/>
  </folder>
  <folder title="Network" img="network.gif"/>
  <folder title="Trash" img="trash.gif"/>
</folder> 
</treeview>

treeview.xslt

<code>
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:asp="remove">

  <xsl:output method="xml" indent="yes" encoding="utf-8" omit-xml-declaration="yes"/> 
  <xsl:variable name="shift-width" select="/treeview/custom-parameters/param[@name='shift-width']/@value"/>
  <xsl:variable name="img-directory" select="/treeview/custom-parameters/param[@name='img-directory']/@value"/>
  <xsl:template match="/treeview">

  <table border="0" cellspacing="0" cellpadding="0">
      <tr><td>
      <xsl:apply-templates select="folder">
        <xsl:with-param name="depth" select="1"/>
      </xsl:apply-templates>
    </td></tr>
   </table>
        
  </xsl:template>

  <xsl:template match="folder">
    <xsl:param name="depth"/>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <xsl:if test="$depth>1">
            <td width="{$shift-width}"></td>
          </xsl:if>
          <td valign="top">
            <a onclick="toggle(this)" class="folder">
            <img src="{$img-directory}plus.gif"/>
            <img src="{$img-directory}{@img}"/><xsl:value-of select="@title"/></a>
            <div>
              <xsl:attribute name="style">display:none;</xsl:attribute>
              <xsl:apply-templates select="folder">
                <xsl:with-param name="depth" select="$depth+1"/>
              </xsl:apply-templates>
              <xsl:apply-templates select="leaf"/>
            </div>
          </td>
        </tr>
      </table>
  </xsl:template>
  
  <xsl:template match="leaf">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td width="{$shift-width}"></td> 
        <td valign="top">
          <a class="leaf"><xsl:attribute name="onclick">selectLeaf('<xsl:value-of select="@title"/>','<xsl:value-of select="@url"/>')</xsl:attribute>
            <img src="{$img-directory}{@img}"/>
            <xsl:value-of select="@title"/>
          </a>
        </td>
      </tr>
      </table>
  </xsl:template>
  
</xsl:stylesheet>

transform.aspx

<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ import Namespace="System.Xml.XPath" %>
<%@ import Namespace="System.Xml.Xsl" %>
<%@ import Namespace="System.IO" %>
<script language="C#" runat="server" Debug="true">

/* 

(c) COPYRIGHT 2002 SiteCLX
ALL RIGHTS RESERVED

author:         P.A. Huisman
filename:       transform.aspx
discription:    C# Sample, transform xml data with xslt to xhtml treeview.

modification log:
 version        date            by      notes
 1.00           16/01/2003      PAH     first version.

*/

void Page_Load(Object sender, EventArgs e) {

   XPathDocument treeDoc = new XPathDocument(Server.MapPath("sample.xml"));
   XslTransform treeView = new XslTransform();
   treeView.Load(Server.MapPath("treeview.xslt"));
   
   StringWriter sw = new StringWriter();
   treeView.Transform(treeDoc, null, sw);
   string result = sw.ToString();
   result = result.Replace("xmlns:asp=\"remove\"", "");
  
   Control ctrl = Page.ParseControl(result);
   myTree.Controls.Add(ctrl);

}
</script> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>SiteCLX title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta http-equiv="imagetoolbar" content="false" />
    <meta name="author" content="P.A. Huisman" />
    <meta name="owner" content="SiteCLX" /> 
    <meta name="copyright" content="copyright 2002-2003 SiteCLX. http://www.siteclx.com"  />
    <meta name="keyphrases" content="xhtml treeview sample" /> 
    <meta name="resource-type" content="document" /> 
    <meta name="rating" content="general" /> 
    <meta name="keywords" content="xhtml, treeview" />
    <meta name="description" content="xhtml treeview sample" />
    <meta name="abstract" content="xhtml treeview sample" />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="30 days" />
    <style type="text/css" media="screen">
    /*<![CDATA[*/
    
    .folder,
    .folder:hover,
    .leaf:hover,
    .leaf {
      font-family : verdana;
      padding:0px;
      cursor: hand;
      font-size : 8pt;
      color: #000000;
      text-decoration:none;                             
    }
    .folder:hover,
    .leaf:hover {text-decoration:undeline; cursor: hand;}
    
    /*]]>*/
    </style>
    <script type="text/javascript" language="javascript">
    /*<![CDATA[*/
    function toggle(node) {
    
      var nextDIV = node.nextSibling;
    
      while(nextDIV.nodeName != "DIV") {
        nextDIV = nextDIV.nextSibling;
      }
    
      if (nextDIV.style.display == 'none') {
    
        if (node.childNodes.length > 0) {
    
          if (node.childNodes.item(0).nodeName == "IMG") {
            node.childNodes.item(0).src = getImgDirectory(node.childNodes.item(0).src) + "minus.gif";
          }
        }
        nextDIV.style.display = 'block';
      }
      else {
    
        if (node.childNodes.length > 0) {
          if (node.childNodes.item(0).nodeName == "IMG") {
              node.childNodes.item(0).src = getImgDirectory(node.childNodes.item(0).src) + "plus.gif";
          }
        }
        nextDIV.style.display = 'none';
      }
    }
    
    function getImgDirectory(source) {
        return source.substring(0, source.lastIndexOf('/') + 1);
    }
    
    function selectLeaf(title, url) {
      alert("You just clicked on title = " + title + ":: url = " + url);
    }
    /*]]>*/
    </script>
  </head>
  <body>
    <asp:label id ="myTree" runat="server" />
  </body>
</html>