Advanced Treeview Tree Menu

In this demo we show how to add a larger number of nodes with various levels. In addition some of the default node properties have been overridden for some of the nodes.

Any node can override any of the default properties which can be useful for making certain nodes stand out in the tree.

The node data for this tree is contained in the file ../../tree/Examples/morenodes.txt (click to view)

As you will see in this file many of the nodes now link to web pages on the JPowered site and most override the default icon property.

The important feature to note is that as soon as the tree is expanded beyond the available area, scrollbars automatically appear when required.

(if you do not see the tree above click here»)

The colors, fonts and various other properties of the tree are set via HTML Param tags. Here is the HTML code for the above tree:-

<applet code="TreeApplet" width="250" height="300" archive="Treemenu.jar">

<!-- Tree Properties -->
<param name="backgroundColor" value="#FFEECC">
<param name="borderWidth" value="1">
<param name="borderColor" value="#CCBB88">
<param name="underlineLinks" value="false">
<param name="scrollBarBgColor" value="#FFAA00">
<param name="statusBar" value="false">
<param name="connectingLines" value="true">
<param name="connectingLinesColor" value="#887744">
<param name="connectingLinesStyle" value="2">
<param name="highTextColor" value="#FFFFFF">
<param name="highBgColor" value="#0000FF">
<param name="nodeOffset" value="25">
<param name="nodegap" value="0">

<!-- Default Node Settings -->
<param name="defaultTarget" value="_top">
<param name="defaultFont" value="Arial,N,12">
<param name="defaultColor" value="#000000">
<param name="defaultExpanded" value="false">
<param name="defaultNormalImage" value="closedfolder">
<param name="defaultExpandedImage" value="openfolder">
<param name="defaultMouseImage" value="point">

<!-- Images -->
<param name="image1" value="closedfolder|./iconimages/closedfolder.gif">
<param name="image2" value="openfolder|./iconimages/openfolder.gif">
<param name="image3" value="document|./iconimages/document.gif">
<param name="image4" value="point|./iconimages/point.gif">

<!-- Node File -->
<param name="Nodedata" value="../../tree/Examples/morenodes.txt">

</applet>

In the next demo we show how to add a background image to the tree menu - next demo»