XML Tutorials Collapsible Panel Bar
Version 1.6

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



Two controls are used to create Collapsible Panel Bar: Widget and Button. setActionTarget property is used to setVisible false or true for the small button with image collapsible icon appear collapsed or expanded. Imagerollover is added to this button. Go to Action section to learn more on Actions. The items in the Group are build using Button Control with the Colors, Highlights, Fonts, Align, and Border are set.

You can find a source code for the first Group in the XML source code below. The second and third group is build the same way. All three groups are wrapped in the widget container. Refer to Reference for complete list of Properties.

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


tutorials_menu.XML Source:

<Widget setSize="180,320" setBackground="d6dff7">

<Widget setShape="5,10,170,84" setBackground="4d99e5" setName="button">
    <Button setName="button.plus" setOpaque="false" setShape="150,0,20,18" setFocusTraversable="false" setBorder="none" setVisible="true" addImage="images\up.gif,18,18" setImageRollover="images\uprollover.gif" setImageDown="images\updown.gif" addActionTarget="button,invoke,setHeight='20'" addActionTarget="collapsablepanel,invoke,addToSize='0%2c-64'" addActionTarget="button.minus,invoke,setVisible='true'" addActionTarget="button.plus,invoke,setVisible='false'" />
    <Button setName="button.minus" setOpaque="false" setShape="150,0,20,18" setFocusTraversable="false" setBorder="none" setVisible="false" addImage="images\down.gif,18,18" setImageRollover="images\downrollover.gif" setImageDown="images\downdown.gif" addActionTarget="button,invoke,setHeight='84'" addActionTarget="collapsablepanel,invoke,addToSize='0%2c64'" addActionTarget="button.plus,invoke,setVisible='true'" addActionTarget="button.minus,invoke,setVisible='false'"/>
    <Widget setShape="100,0,70,18" setBackground="d6dff7"/>
    <Widget setShape="150,100,350,200" setBackground="f8f4db"/>
    <Widget setShape="4,0,100,20" setLabel="Group 1" setAlign="left" setOpaque="true" setForeground="ffffff" setFontStyle="bold"/>
    <Widget setShape="1,20,168,62" setBackground="e5f6ff">
        <Button setLabel="Item 1" setSticky="true" setGroup="controls" setImage="images/windows.gif,15,15" setBackgroundSelect="2d66bf" setBackgroundHighlight="4d99e5" setBorder="none" setShape="1,1,166,20" setAlign="left" setFontSize="11" setFontStyle="plain"/>
        <Button setLabel="Item 2" setSticky="true" setGroup="controls" setImage="images/linux.gif,15,15" setBackgroundSelect="2d66bf" setBackgroundHighlight="4d99e5" setBorder="none" setShape="1,21,166,20" setAlign="left" setFontSize="11" setFontStyle="plain"/>
        <Button setLabel="Item 3" setSticky="true" setGroup="controls" setImage="images/mac.gif,15,15" setBackgroundSelect="2d66bf" setBackgroundHighlight="4d99e5" setBorder="none" setShape="1,41,166,20" setAlign="left" setFontSize="11" setFontStyle="plain"/>
    </Widget>
</Widget>

</Widget>

[Home][Tutorial] [Demo]

Introduction