Bambookit Home    Bambookit GUI Tutorial

II. GUI Basics



Chapter 8. Prebuilt Widgets

Tree
Tree Drag and Drop
Popups


Tree View

Tree View. The Tree View control is composed of a Listbox in a View control.

XML Element Name

The tree view is an composed of a listbox control wrapped in a View control. As seen in the previous tree example, as you expand tree nodes in the listbox, the listbox is automatically resized. As soon as the listbox is larger than the view container than the view scrollbars become visible / enabled.

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.

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

Examples - Tree View

A simple XML script for creating a tree control
<View setShape="10,10,100,100">
<Listbox setWidth="80">
<Item setLabel="1">
<Item setLabel="11">
<Item setLabel="111"/>
</Item>
</Item>
<Item setLabel="2"/>
<Item setLabel="21">
<Item setLabel="22">
<Item setLabel="23">
</Item>
<Item setLabel="3"/>
</Listbox>
</View>

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.

Back