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 |
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 ...
|
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 |
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.
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.
4 FAQ |
5 Links and Download |
Links
Downloads
File | Description | |
treeview_1.zip | The treeview package version 1.0 (dtd, xslt, gif, javascript files only) |
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.
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.
|