The Droplets Tree component allows you to create nested trees which end-users can open, close and navigate. This tutorial shows you how to create a tree and its nodes, and how to associate a set of images with that tree.

Creating a Tree

A tree can be created using one of two constructors in the Droplets API's Tree class. The constructor you choose should be based on whether or not you want to present images on the tree's nodes. In either case, tree creation must be done within your application window's addAllComponents() method:

1. Tree (LayoutPlacement p, Window window)
   This constructor does not associate a set of images with the tree. You simply create a new Tree and assign it a layout placement (gridx, gridy, gridwidth, gridheight) within its window.
   
   
2. Tree (LayoutPlacement p, java.lang.String imageFile, int iconWidth, Window window)
   This allows you to associate a set of images with the tree upon its creation. imageFile should be a GIF or JPEG file which holds images to be presented on the tree nodes. If you are presenting more than one images to differentiate node types, the imageFile should contain the full set of these images — all of equal size, both width and height — in an unbroken horizontal row (as you'll see below, these are then called from left to right using 0, 1, 2, etc.). iconWidth indicates the width in pixels of each image. This allows the Droplets Server to divide your one imageFile up into the set of images, which you can then call as shown below.

Creating Tree Nodes

Tree nodes should be built in your application window's start() method:

1. First call the tree's start method (within the window's start() method):
   
   start()
   {
       myTree.start();
       . . . .
   
   
   
2. Get the tree's root node:
   
         TreeNode root = myTree.getRoot();
   
   
3. Add nodes to the root by calling its add() method:
   
       root.add(new TreeNode ("child1"));
   
   
4. In order to add sub-nodes onto non-root nodes, first create an instance of the node, add the sub-node to it and then add this node to the root node:
   
       TreeNode child2 = new TreeNode ("child2");
       child2.add(new TreeNode("sub-child1"));
       root.add(child2);

Once you have created your nodes, you can use the Tree class' methods to define component behavior and handle events as shown in the Java API documentation.

Adding Images to Nodes

Images are associated with nodes during construction. This can be done in one of two ways:

1. Choose one of the TreeNode constructors which includes an imageIndex parameter. (if there is only one image in the Tree's imageFile, set this parameter as 0):
   
        TreeNode child1 = new TreeNode("child1", 2);
   
   Note that this must be done explicitly for each node; there is no single call to Tree which will place the same image on multiple nodes.
   
   
2. After creating the node, you can alternately call the node's setImageIndex() method:
   
      TreeNode child1 = new TreeNode("child1"); 
      child1.setImageIndex(2);

For information on working with Tree components in C++, consult your Droplets C++ API documentation.