Quick Start

We have produced this page for those of you who wish to construct and implement your first Tree quickly. This page is not intended to be an exhaustive discussion of all the features available but simply to guide you building your first tree.

Here is some example html to build a basic tree,

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

<!-- Tree Properties -->
<param name="nodeOffset" value="25">
<param name="backgroundColor" value="255|255|150">
<param name="borderWidth" value="1">
<param name="borderColor" value="175|175|175">
<param name="connectingLines" value="true">
<param name="connectingLinesColor" value="100|100|100">
<param name="connectingLinesStyle" value="2">
<param name="highTextColor" value="255|255|255">
<param name="highBgColor" value="0|0|150">
<param name="nodegap" value="5">
<param name="title" value="Jpowered">
<param name="titleFont" value="Helvetica|BI|14">
<param name="titleColor" value="255|175|0">
<param name="underlineLinks" value="true">
<param name="scrollBarBgColor" value="255|175|0">


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

<!-- Nodes -->
<param name="Nodedata" value="jpowerednodes.txt">

</applet>

All the node information is supplied via a text file nodes.txt, click here to view.

Note : In the applet tag above we have not used the codebase parameter, and as such it is vital that the Treemenu.jar file resides in the same directory as the html page.

To see the resultant tree click here.

<param name="highlightLastNodeClicked" value="false">

In this example we have used the following parameters,

<param name="nodeOffset" value="25"> Sets the sub-level offset to 25 pixels. (more)
<param name="backgroundColor" value="255|255|150"> Sets the background color (more)
<param name="borderWidth" value="1"> Sets the width of the border to 1 pixel. (more)
<param name="borderColor" value="175|175|175"> Sets the border color. (more)
<param name="connectingLines" value="true"> Turns the connecting lines on. (more)
<param name="connectingLinesColor" value="100|100|100"> Sets the connecting lines color to grey. (more)
<param name="connectingLinesStyle" value="2"> Instructs the applet to draw the lines dotted. (more)
<param name="highTextColor" value="255|255|255"> Text color of nodes when highlighted. (more)
<param name="highBgColor" value="0|0|150"> Background color of nodes when highlighted. (more)
<param name="nodegap" value="5"> Sets the vertical gap between nodes to 5 pixels.(more)
<param name="title" value="Jpowered"> Set the title text.(more)
<param name="titleFont" value="Helvetica|BI|14"> Sets the Title font.(more)
<param name="titleColor" value="255|175|0"> Sets the title text color.(more)
<param name="underlineLinks" value="true"> Underline Nodes with links.(more)
<param name="scrollBarBgColor" value="255|175|0"> Sets the background color of the scrollbars.(more)
<param name="image1" value="closed|./IconImages/closedfolder.gif"> Loads the image closedfolder.gif and names this image "closed".(more)
<param name="image2" value="open|./IconImages/openfolder.gif"> Loads the image openfolder.gif and names this image "open".(more)
<param name="image3" value="document|./IconImages/document.gif"> Loads the image document.gif and names this image "document". (more)
<param name="image4" value="point|./IconImages/point.gif"> Loads the image point.gif and names this image "point". (more)
<param name="Nodedata" value="jpowerednodes.txt"> Instructs the applet to load the node data from the text file "jpowerednodes.txt". (more)

In the jpowerednodes.txt file you will see that each node comprises of the following sixteen elements separated by | character,
( click on each element description for further details )

Node ID - Unique ID for this node.
Parent ID - Node ID of this node's parent.
Node Text - Text to be displayed for this node.
Font Face - Font face of this nodes text.
Font Type - Font type of this nodes text.
Font Size - Font size of this nodes text.
Red Color Value - Text Color, red value.
Green Color Value - Text Color, green value.
Blue Color Value - Text Color, blue value.
Expanded Flag - Specifies whether this node should be expanded on startup..
Normal Node Image - Node icon to be displayed in non-expanded state.
Expanded Node Image - Node icon to be displayed in expanded state.
Mouseover Node Image - Node icon to be displayed in mouseover state.
Url - Url of the web page to display upon mouse click..
Target Frame - Frame or Window name in which to display the url upon mouse click.
Status Bar Text - Text to display in the status bar upon mouseover.

For the optional parameters default values are assumed in their absence.

The tree structure is built using parent child relationships between nodes. Each node should have a parent ID which relates the parent node. For top level nodes the parent ID should be set to "root". Using this method the tree applet is able to handle unlimited sub-levels.

It is recommended that you explore both the rest of this documentation and the examples provided in order to fully utilise all of the available features of the Advanced Tree Explorer.