= A REVIEW OF AVAILABLE JAVASCRIPT TREE-VIEW COMPONENTS INTRODUCTION This document contains a review of some of the Java/ dhtml/ javascript 'tree-view' components that are available on the Internet (as of 28 march 2003). By a 'tree-view' component I am referring to the type of user interface element which is very common in modern graphical user interfaces especially in the context of dealing with files and directories or other hierarchical data structures such as an XML document. For example, the Microsoft Windows Directory 'Explorer' application makes heavy use of one style of this so-called tree-view component. A QUICK SUMMARY OF CONCLUSIONS FROM THIS DOCUMENT. A number of reasonable free DHTML javascript tree-view components are available on the Internet. These general support the browser Netscape 6+ and IE 5+. However, the performance of these components generally degrades badly when the number of nodes in a particular branch becomes greater than 200. Java Applet implementations of tree-view components provide much better performance and can handle very large numbers of nodes (>3000) without performance degradation. In particular, the implementation at http://www.squark.demon.co.uk/software/java/treeview-docs.html has very good performance. ------------------------------------------- The purpose of this document is to discover the best free java/ dhtml/ javascript tree-view component, having as wide as possible cross-browser support, the ability to integrate with XML style functions and the ability to support a very large number of nodes. (Hopefully 30,000 say, but that is probably way too optimistic). The original motivation was to find a replacement for the Microsoft specific 'tree-view' client-side component. The performance tests referred to later in this document were carried out on the following computer (laptop): -->> System Manufacturer TOSHIBA System Model SATELLITE2590 System Type X86-based PC Processor x86 Family 6 Model 6 Stepping 10 GenuineIntel ~400 Mhz --<< SOME COMPONENTS WHICH ARE AVAILABLE ON THE INTERNET. http://www.treeview.net This site contains a good and free pure javascript implementation of a tree-view component. The only real draw back is that the configuration files which determine the structure of hierarchical tree are not (and cannot be) XML files. This could be overcome with server-side logic dynamically generating the required format, but it is not ideal Contains on-line demonstrations. Works in Netscape 7. Works in IE 5. Works in Mozilla. In Netscape 4.61 the tree view component renders as a fully expanded hierarchical tree. The tree nodes are not collapsible or expandable but are other-wise functional (that is the hyper-links still work). Can support at least 3 x 12 x 30 = 1080 nodes. Seems to contain a 'compulsorary' link to the treeview home page. We can at least make the link invisible (if we don't feel like more aggressive hacking) by setting the colour of the link to the same as the back-ground as in the following example. > ** For Netscape Navigator 7: Sub Nodes (Approx) Time To Open Node Time To Close Second Open Render Page With Nodes --------- -------------------------- ------------- ----------- ---------------------- 130 3 1/2 230 4 1 330 7 1 6 9 430 13 2 12 11 530 18 2 18 1030 1 min 55 s 4 ** For IE 5 330 13 2 2 17 430 20 3 3 25 530 28 3 3 ** For the Squark Tree View Component (Java Applet) These tests were carried out without any node images. That is none of the nodes had any images. ==== Without Any Node Images ==== Sub Nodes (Approx) Time To Open Node Time To Close Second Open Initial Page Render/ Class Load --------- -------------------------- ------------- ----------- ------------------------------- 330 0 0 0 660 0 0 0 1000 0 0 0 3 ==== With Node Images ==== 3000 0 0 0 15 --<< It can be seen that Microsoft Internet Explorer 5 takes significantly longer to render the opening of the tree-view nodes the first time, but the second time is much faster than Netscape. Netscape does not appear to provide any advantage in the second opening of a node. http://www.codeproject.com/jscript/dhtml_treeview.asp Another component. This appears very simple and does not have any javascript configuration files. The tree component would have to be built on the server side. http://gethelp.devx.com/techtips/dhtml_pro/10min/10min0702/td072602-1.asp Contains an article on how to write a javascript treeview component http://gethelp.devx.com/techtips/dhtml_pro/10min/10min0702/tree.htm This is a demonstration of the tree-view component mentioned above http://javer.narod.ru/jstrinst.htm Another one, claims to support very old browsers like Netscape 3+ using 'frame rewriting'. Appeared slightly slow from my very cursory testing. http://www.siteexperts.com/tips/webfx/ts06/page1.asp Another free java-script tree-view component. Works in Internet Explorer 5. DOES NOT WORK in Netscape 7. http://www.cjandia.com/2001/espx-tinyxsl/ A quite interesting implementation of XML and XSL using ECMAscript (which I am taking to mean Javascript). Obviously written by someone who knows what they are doing. Does not appear to support SAX The XSL works in this system, by having the XSL style sheet in an HTML hidden element on a page, and having the XML document in another HTML hidden element on the same page. The actual output html is then produced by calling a 'renderXML' function in the same page. For XML of about 60 lines long it takes about 4 seconds to render the html, on a year 2000 vintage laptop. Also there appears to be some HTML within the XML, for some reason. So it is possibly not a very practical system. http://xmljs.sourceforge.net/. Another javascript XML parser. Supports SAX and DOM http://premshree.resource-locator.com/javascripts/xml/traversal/traversal.htm This script reads xml from an 'external' text file and displays it in a (static) tree format. It should be possible to integrate this with some kind of dynamic tree component. BUT, uses a microsoft ActiveXObject ): http://www.tipue.com/ A javascript site search engine. This appears to work using a 'data' file which contains information about the pages to be searched, rather than doing a kind of recursive wget grep or ngrep type of thing. The Microsoft Tree View component I have not been able to find examples of how to actually use this. It is IE specific. I need to find a working example in order to test its performance and features against other components. http://www.squark.demon.co.uk/software/java/treeview-docs.html A reasonable looking java tree view applet. Free including source???. See above for some performance results. The source code does not appear to be available and there may be problems in providing javascripting of the nodes. In Summary the applet is extremely fast for large numbers of nodes but does not seem to have any 'javascripting' capability. That is the nodes do not seem to be manipulable with javascript. MISCELLANEOUS USEFUL SITES http://www.jfind.com A reasonable java 'portal' http://www.hotscripts.com/Java/ some useful scripts http://www.object-refinery.com/ Some open source GPL java code (chart creation etc) Plus a 'reporting' engine with various output formats, such as html, pdf, text, with good documentation. http://www.lowagie.com/iText/index.html GPL java classes for generating documents in various formats, pdf, html etc http://www.object-refinery.com/open.html Very Very Good links to Open Source/ GPL java resources. http://java.about.com/cs/opensource/index.htm Good links to Java Open Source Sites http://www.opensourcedirectory.org/ O'Reilly's directory of open-source software. This has some good content but is slightly annoying since you have to navigate through there category structure to get to the links. http://www.onjava.com/pub/q/java_os_directory O'reilly's open source java directory. The descriptions tend to be a little bit 'abstract' and unhelpful. http://opensource.thoughtworks.com/ Some java open source code. COMMERCIAL COMPONENTS http://www.javaside.com/asp/mus.asp?page=/us/tliste.shtml Another java applet tree view. NON FREE. Strings attached. http://scbr.com/docs/products/jtree/get.shtml Another java applet tree view. Commercial and Free version. I don't know if the free version is crippled somehow. http://www.better-homepage.com/java/java-applets-toc.html Another commercial tree view java applet http://www.jpowered.com/tree/index.htm This site contains a free java applet tree-view component. BUT this free version has a limit of 100 nodes! The site also has a commercial tree view component written in Java.. http://www.javazine.net/menutree/ Another Commercial Applet, slow http://www.apress.ru/pages/bokovikov/java/index.html Another Commercial Applet. Free Version contains unwanted links. http://www.opencube.com/ This site seems to contain a set of dhtml tools, including menus and a tree view component. The tools are commercial.