XML Tutorial Simple Tree
Version 1.6

This is the archives. For the latest Bambookit GUI 2.0, XML GUI Demos & Tutorials visit: www.bambookit.com/_demo.html



Simple Tree displayed in the example above. Refer to the View and Scrollbars Controls in the Containers section on how to add scrollbars to the Tree. In the applet above the scrollbars will appear as the tree will get expanded.

The Tree was created using Listbox and Item controls. In the XML source below demonstrated how Item2 was added to the tree. The Tree is contained in the Listbox with Items placed in it in hierarchical order.

The first item called "Add icon" displays how to add icons to the Tree. setImageCollapse/setImageExpand properties allow expand and to collapse the items in the Tree. setImageContainer and addImage properties allow to add icon to the tree along with 'plus' and 'minus' icons.

See complete XML source for the tree in the applet above.

Refer to Reference for complete list of Properties.


HTML Source:
<html>
<body>
<applet archive="bamboo_1_5.jar" code="Loader.class" width=155 height=300>
<param name="loadgui" value="suite_tree_simple.xml">
</applet>
</body>
</html>

suite_tabs.XML Source:

<Widget setSize="155,300">
<View setShape="5,5,145,280" setBorder="flat">
<Scrollbar setSize="20,20" setVertical="true" setBorder="squarelowered" setBackgroundSelect="fcf9ea" setBackgroundThumb="f8f4db"/>
<Scrollbar setSize="20,20" setVertical="false" setBorder="squarelowered" setBackgroundSelect="fcf9ea" setBackgroundThumb="f8f4db"/>
<Listbox setSize="140,300" setBorder="none" setForegroundHighlight="000000" setBackgroundHighlight="f8f4db" setBackgroundSelect="d8d0bb" setForegroundSelect="000000">
<Item setLabel="Add Icon" setImageCollapse="images/plus_icon.gif,14,11" setImageExpand="images/minus_icon.gif,14,11" addImage="images/drive.gif,20,16" setImageContainer="20,8"/>
<Item setLabel="Item2" setImageCollapse="images/plus.gif,24,11" setImageExpand="images/minus.gif,24,11">
        <Item setLabel="Item21" setImageCollapse="images/plus.gif,24,11" setImageExpand="images/minus.gif,24,11"/>
        <Item setLabel="Item22" setImageCollapse="images/plus.gif,24,11" setImageExpand="images/minus.gif,24,11">
           <Item setLabel="Item221" setImageCollapse="images/plus.gif,24,11" setImageExpand="images/minus.gif,24,11"/>
           <Item setLabel="Item222" setImageCollapse="images/plus.gif,24,11" setImageExpand="images/minus.gif,24,11"/>
           <Item setLabel="Item223" setImageCollapse="images/plus.gif,24,11" setImageExpand="images/minus.gif,24,11"/>
           <Item setLabel="Item224" setImageCollapse="images/plus.gif,24,11" setImageExpand="images/minus.gif,24,11"/>
        </Item>
        <Item setLabel="Item23" setImageCollapse="images/plus.gif,24,11" setImageExpand="images/minus.gif,24,11">
</Item>
</Listbox>
</View>
</Widget>

[Home][Tutorial] [Demo]

Tree
Simple Tree Advanced Tree