XTreeview component Last update : 22/07/2004 back to HOME PAGE

Introduction
Korean Translation

The goal of this article is to present a cross-browser DHTML treeview component which uses XML as data source.

Important :

Contents :

  1. Example, a file system explorer
  2. User Manual
  3. How does it work ?
  4. FAQ
  5. Links and download, links about XSLT and references + Download component, API and J2EE example application
  6. Original idea - about not reinventing the wheel ...
  7. Credits - about the author of this article
  8. and the license to respect if you want to use the code

back to Top

1. Example, a file system explorer

The best explanation - much better than a long description with bladiebla - is a live example. Click on the image to deploy a branch. Click on a leaf to select it and see what happens ...

My documents
My computer
Network
Trash

back to Top

2. User Manual

Introduction

This manual explains how to install, configure and customize the XTreeview component in your project.

2.1 Installation

To install the component, simply unzip the archive. The DHTML Treeview package is composed of :

What tools do you need ?

A good XML editor may be useful, you can download an evaluation version of the excellent XML Spy from Altova.

If you use java, download Xalan and Xerces which are part of the apache.xml project.

2.2 Browser compatibility table

This DHTML treeview is cross browser. Actually, it works better on Mozilla / Netscape, especially the underline effect when mouse pointer hoovers an <a> tag. Mac users, I am afraid it does not work at all even on the latest versions of Mac OS and IE ...

Browser Version Works ?
Mozilla 5.0 YES
Netscape 4.77 NO
Netscape 6.0 YES
Netscape 6.2.3 YES
Opera 7.11 YES
Internet Explorer 4 (SP 2) NO
Internet Explorer 5.0 (Mac) NO
Internet Explorer >5.0 (Win) YES

2.3 Configuration

2.3.1 Data source : a simple XML file

Instead of learning a complex proprietary API to build a treeview object which will generate a DHTML barbarian code, all you need to do is to generate a XML file as the data source of the treeview. If your datas come from another XML file, you have to write a simple XLST stylesheet to transform it into the format used by the treeview. If your datas com from a database, you need to write a XML document builder class.

To generate the XML data source, the only constraint is to conform to the treeview.dtd. XML is a tree-structured language, it is very easy to define a tree structure composed of folders and leaves :

The figure above explains the structure of the XML file :


2.3.2 Optionnal custom parameters

param-deploy-treeview param-shift-width
Default value : false Default value : 15
param-img-directory param-is-netscape
Default value : '' (empty string) Default value : 'false'

Static directory which contains the images used by the treeview. MUST ends by slash (/).

Example :

If your images are in the directory static/images,

Transformer trans = transFact.newTransformer(stylesheet);

// Add parameter
trans.setParameter("param-img-directory", "static/images/");

Boolean. Is the Browser Netscape / Mozilla or Internet Explorer ? The value per defaut is false and you know why.

Affect this parameter if you are using the "alt" property for images. As the DHTML code is cross-browsser compatible, there is no other consequence.

 

Note:

I have received a few e-mails asking me to add more parameters such as the folder which contains the css and /or the javascript. I don't have any time to update the xslt but I'd be happy to update this article if someone wants to send me his/her solution (thanks in advance!).

2.3.3 Customize the look and feel

Edit the treeview.css and customize the following styles :

You can add more styles but you have to update the treeview.xslt stylesheet .

2.3.4 Customize the events

The javascript selectLeaf() function is called every time you click on a leaf. Therefore, you have to implement it in your html page. The source-code below is extracted from the page you are reading :


<SCRIPT Language="javascript">

    // This function must be implemented bc it is called by DHTML Treeview every time

    // you click on a leaf

    function selectLeaf(title, code) {

        alert("You just clicked on title :" + title + "with code = " + code);

    }

</SCRIPT>



The signature of this function is :

2.3.5 If you use the attribute "code" in the folder element

Then you have to implement a selectFolder() function in your html page. This function is called every time you click on a folder. As for example :


<SCRIPT Language="javascript">

    // This function is must be implemented if you use the "code" attribute into folder elements.
// It is called every time you click on a folder
function selectFolder(folderCode) { alert("You just clicked on a folder with code :" + folderCode); } </SCRIPT>

2.3.6 Generate the DHTML

Apply the stylesheet treeview.xslt to your XML document. This transformation will be generally on server-side as client-side XSLT is not supported (not yet !) by the majority of browsers.

back to Top

3. How does it works ?

DTHML

The DHTML code is inspired from an article of D.D. de Kerf. He explains his code very clearly so have a look to its article ...

Generate the DHTML

A good programming model simplifies maintenance and encourages code reuse by enforcing a clean separation of data, logic, presentation. This is exactly the purpose of XML, XSLT and HTML :

The figure below illustrates this programming model (you can click on the XML, XSLT, js, css and js image maps) :

To understand deeply the generation of the DHTML code, the best is to read the comments in treeview.xslt.

back to Top

4 FAQ

back to Top

5 Links and Download

Links

Downloads

File Description
treeview_1.zip The treeview package version 1.0 (dtd, xslt, gif, javascript files only)

back to Top

6 Original idea

One of my favorite principles in programming is to not to "reinvent the wheel", so I haven't:

So what did I do ? :-) In fact, my work was almost refactoring the DHTML, the javascript code and of course writing a reusable and understandable (!) XSLT style sheet.

back to Top

Credits

Author

I am an European software engineer who lives and works in London. For any comments / suggestions : send an e-mail to g a r n i e r j m @ y a h o o.f r (remove the spaces to get my e-mail, I have done that bc the sobig virus has filled my mailbox!).

I am looking for a job. Ideally, I want to work on a J2EE web-project within a team applying Agile methods and using cutting edge technologies: Hibernate, Tapestry, Inversion of Control Frameworks, ... (Contract / Permanent). Please take a look at my CV.

Copyrights

The source is free to use and is available under the GNU GENERAL PUBLIC LICENSE.

back to Top