JAVASCRIPT 1.2 "Tree" OBJECT

INTRODUCTION

This code creates a new object, Tree, which you can instantiate from your own JavaScript code. Creating a new Tree object creates a new tree view of the specified data, either at the current location on-screen or a specificied position. This tree view can be expanded or collapsed to show or hide data at lower levels. Each entry in the tree can be arbitrary html, such as text styles, images, links, and tables. The tree object also provides several useful methods, allowing the user to get the dimensions of the tree (fully expanded, or the visible sections), as well as the location of the tree on-screen and the actual layer object containing the tree. The allows the user to write other javascript code which can interact with the tree. (Please mess with my wording, this whole thing sounds awkward).

Note: If you instantiate the Tree object under Navigator 3.0, it will create a nested unordered list using the provided content. All other features of the Tree will not be available. (Do we want to include this?)

View Example (Requires netscape Communicator)
Download zip file of Tree.js and sample code
Download jar file of the Tree object as a Visual JavaScript Bean

INCLUDING THE CODE SEGMENT

All of the code necessary to use the Tree object is in a single JavaScript file, Tree.js. To include this file, simply use the <SCRIPT> tag to insert the script file. To ensure that the script is only included by browsers which support the correct version of JavaScript, specify the version inside the tag as shown.

<SCRIPT LANGUAGE="JavaScript1.2" SRC="Tree.js"></SCRIPT>

Be sure to replace "Tree.js" with a url specific to your page. Note that the three image files included in the zip should be located in the same directory as Tree.js.

CREATING THE OBJECT

The Tree constructor takes one parameter, in order to allow the same source code to function as a Visual JavaScript Bean. This parameter must be an object containing the following properties:

• id: A unique string to identify the object.
• items: A nested array of items describing the structure and contents of the tree.
• x: (Optional) The x position on the page to place the tree at.
• y: (Optional) The y position on the page to place the tree at.

The example below demonstrates the instantiation of a Tree.

---

Tree Usage Example (see the Example above more more)

<SCRIPT LANGUAGE="JavaScript1.2" SRC="Tree.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2">

myTree = new Tree({id: "my", x:50, items:"['Tree View','Nested Items',['Link to <A HREF="http://home.netscape.com/">Netscape</A> Home Page','Link to <A HREF="http://web.mit.edu/">MIT</A>'s Home Page','A Couple of Images<IMG SRC=Tree_plus.gif><IMG SRC=Tree_minus.gif>']]"});

</SCRIPT>

---

In the example above, a new Tree object is created and stored in the property myTree. It will be placed at the current Y position and 50 pixels into the page in the X position. It will look roughly like the following tree, although it will be initially collapsed.

• Tree View
• Nested Items
• Link to Netscape Home Page
• Link to MIT's Home Page
• A couple of Images

Download zip file of Tree.js and sample code
Download jar file of the Tree object as a Visual JavaScript Bean