Bambookit Home    Bambookit GUI Tutorial

Next   

II. GUI Basics

Chapter 8. Prebuilt Widgets




Tree Control

Tree View Tree Drag and Drop Popups

Tree Control. The Tree control is composed of a Listbox and Item elements.

XML Element Name

The tree control is an advanced listbox control. The item Elements are also referred to as tree nodes in this document. Nodes that have no children are referred to as terminal or leaf nodes. Nodes that have children are referred to as folder nodes.

<Listbox>
<Item>
<Item>
<Item/>
</Item>
</Item>
<Item/>
<Item/>
</Listbox>

Examples - Tree View

A simple XML script for creating a tree control
<Listbox setLocation="10,10" setWidth="100">
<Item setLabel="1">
<Item setLabel="11">
<Item setLabel="111"/>
</Item>
</Item>
<Item setLabel="2"/>
<Item setLabel="3"/>
</Listbox>

The Bambookit GUI toolkit has default icons for the folder images. There are six images in total, 3 for the expanded image and three for the collapsed image. The 3 images are for the standard image, the rollover image and the press down image. Only folder nodes get the 'folder images' added automatically (if not already set). You can display folder images even for the terminal or leaf nodes if they are explicitly set using the setImageExpand and setImageCollapse attributes. (The system images are placed under the images/system directory).

All nodes (Item widgets) are aligned to the the TOP LEFT corner. This prevents any visual miscues between a folder tree node and the lead tree node Otherwise the label and images will be 'centered' and the lead nodes will overlap the text and image(s) of the folder tree node.


Note: Normally Text AND Images can be postioned using insets and alignment. However the folder icons cannot be adjusted by using Insets. The alignment top, center, and bottom, does affect the positioning of the folder image, however it is impractical to use it since the item NEEDS to be aligned to the TOP otherwise children tree nodes will obscure the text and images. So to CHANGE the positioning of the folder images the adjustments need to be done to the images itself.

Examples - Image Tree Control

You can add images to the tree node. All image attributes that apply to a widget also apply to the Tree node. The Image Container centers all images within the boundaries specified. You can use the Image Container to adjust the location of the image(s) within the tree node (Item control) but NOT the folder icons.

<Listbox setLocation="10,10" setWidth="100">
<Item setLabel="1" addImage="windows.gif,16,12" setImageContainer="16,6">
<Item setLabel="11" addImage="mac.gif,16,12" setImageContainer="32,6"/>
</Item>
<Item setLabel="2"/>
<Item setLabel="3"/>
</Listbox>



Next