Bambookit Home    Bambookit GUI Tutorial

Back    Next   

II. GUI Basics

Chapter 8. Prebuilt Widgets




Definition of the Collapsible Panel Bar

What are the elements of a Collapsible Panel Bar?
It is composed of a series of panels that is titled, containing a collapse and expand button, has children elements in each panel. The panels are arranged one below the other. If one panel collapses, all the other panels are adjusted to remain equi-distant from each other

In Bambookit GUI there is no need to create and use another unique Widget when managing a collpasible panel bar. It is only composed of Widgets and Buttons

The skeleton framework,
<Widget setName="main"> <Widget setName="panel1"> <Widget setName="caption1"> <Button setName="min1"/> <Button setName="max1"/> </Widget> <Button/> <Button/> <Button/> </Widget> <Widget setName="panel2" attachToWidget="panel1,false,true,false,true"> <Widget setName="caption2"> <Button setName="min2"/> <Button setName="max2"/> </Widget> <Button/> <Button/> <Button/> </Widget> </Widget>
>From the example above we see that the Widget 'main' contains two panels, 'panel1' and 'panel2' 'panel1' is composed of a 'caption1' widget bar and Button items. In the caption bar we define two buttons, one to minimize or collapse the panel and the other to maximize the panel

Two Buttons

Why do we need TWO buttons?
One button will collapse the panel bar, the other will expand it

Are they on top of one another?
Yes, When the collapse button gets the 'action' event he performs THREE tasks,
1) Collapses the Panel Bar by setting the widget 'panel1' setSize.
2) Make the 'max1' button visible
3) Make himself, 'min1' button invisible.

The same sequence of steps also applies to the expand button

Attachments

How is one Collapsible Panel Bar attached to another?
We simply chain them by using the attachToWidget attribute. The attachToWidget enables one to 'lasso' or be 'attached' to another widget. If the widget we are attached to changes location or size then the widget doing the attaching MATCHES that displacement by setting its location.

attachToWidget="widgetname, left, top, right, bottom"

In the example above 'panel2' attached itself to 'panel1'. This was set using the attribute attachToWidget which pointed to 'panel1'.

What are all those true, false variables?
These values indicate along which axis we are interested in adjusting ourselves in relation to the changes made by 'attached' widget.

..attachToWidget="panel1,false,true,false,true"..

The above means we are ONLY concerned with the top and bottom changes to the widget. So any change in the y axis then we would be displaced by an equal amount, we would ignore the x axis displacement (left and right).

But why not set them all to true?
The best way to explain this would be to take a hypothetical example. What if we placed the collapsible panel bar in a splitter widget. Then we anchored the left and right sides of each panel bar, this would expand (or shrink) the widget whenever the splitter bar is resized. HOWEVER since we are panel2 is listening on on any changes made to location OR SIZE, then panel2 will have its location adjusted accordingly.

Anchors

For all items inside the panel bar have their default anchors set to false,false,false,false. What happend is that whenever the container resizes the widgets internally resize themselves as well.

If you do wish to have the children get 'centered' within a minimized panel bar then you would have to 'anchor' or pin the widgets left and top sides.

Vertical Collapsible Menu Bar

<Widget setShape="0,0,120,230"> <Widget setName="panel1" setShape="10,10,100,100" setBackground="F9EEEE"> <Widget setName="caption1" setShape="1,1,98,20" setLabel="caption 1" setFontStyle="bold" setBackground="998FAA" setForeground="FFFFFF" setAnchor="true,true,false,false"> <Button setName="btnmin1" setShape="78,0,20,20" setVisible="true" addActionTarget="action,panel1,setSize='100,22',action,btnmax1,setVisible='true',action,btnmin1,setVisible='false'"/> <Button setName="btnmax1" setShape="78,0,20,20" setVisible="false" addActionTarget="action,panel1,setSize='100,100',action,btnmax1,setVisible='false',action,btnmin1,setVisible='true'"/> </Widget> <Button setShape="10,25,80,22" setLabel="Item 1" setBorder="none" setAnchor="true,true,false,false"/> <Button setShape="10,47,80,22" setLabel="Item 2" setBorder="none" setAnchor="true,true,false,false"/> <Button setShape="10,69,80,22" setLabel="Item 3" setBorder="none" setAnchor="true,true,false,false"/> </Widget> <Widget setName="panel2" setShape="10,120,100,100" setBackground="F9EEEE" attachToWidget="panel1,false,true,false,true"> <Widget setName="caption2" setShape="1,1,98,20" setLabel="caption 2" setFontStyle="bold" setBackground="998FAA" setForeground="FFFFFF" setAnchor="true,true,false,false"> <Button setName="btnmin2" setShape="78,0,20,20" setVisible="true" addActionTarget="action,panel2,setSize='100,22',action,btnmax2,setVisible='true',action,btnmin2,setVisible='false'"/> <Button setName="btnmax2" setShape="78,0,20,20" setVisible="false" addActionTarget="action,panel2,setSize='100,100',action,btnmax2,setVisible='false',action,btnmin2,setVisible='true'"/> </Widget> <Button setShape="10,25,80,22" setLabel="Item 1" setBorder="none" setAnchor="true,true,false,false"/> <Button setShape="10,47,80,22" setLabel="Item 2" setBorder="none" setAnchor="true,true,false,false"/> <Button setShape="10,69,80,22" setLabel="Item 3" setBorder="none" setAnchor="true,true,false,false"/> </Widget> </Widget>


Horizontal Collapsible Menu Bar

<Widget setShape="0,0,230,120"> <Widget setName="panel1" setShape="10,10,100,100" setBackground="F9EEEE"> <Widget setName="caption1" setShape="1,1,20,98" setFontStyle="bold" setBackground="998FAA" setForeground="FFFFFF" setAnchor="true,true,false,false"> <Button setName="btnmin1" setShape="0,0,20,20" setVisible="true" addActionTarget="action,panel1,setSize='22,100',action,btnmax1,setVisible='true',action,btnmin1,setVisible='false'"/> <Button setName="btnmax1" setShape="0,0,20,20" setVisible="false" addActionTarget="action,panel1,setSize='100,100',action,btnmax1,setVisible='false',action,btnmin1,setVisible='true'"/> </Widget> <Button setShape="25,10,70,22" setLabel="Item 1" setBorder="none" setAnchor="true,true,false,false"/> <Button setShape="25,32,70,22" setLabel="Item 2" setBorder="none" setAnchor="true,true,false,false"/> <Button setShape="25,54,70,22" setLabel="Item 3" setBorder="none" setAnchor="true,true,false,false"/> </Widget> <Widget setName="panel2" setShape="120,10,100,100" setBackground="F9EEEE" attachToWidget="panel1,true,false,true,false"> <Widget setName="caption2" setShape="1,1,20,98" setFontStyle="bold" setBackground="998FAA" setForeground="FFFFFF" setAnchor="true,true,false,false"> <Button setName="btnmin2" setShape="0,0,20,20" setVisible="true" addActionTarget="action,panel2,setSize='22,100',action,btnmax2,setVisible='true',action,btnmin2,setVisible='false'"/> <Button setName="btnmax2" setShape="0,0,20,20" setVisible="false" addActionTarget="action,panel2,setSize='100,100',action,btnmax2,setVisible='false',action,btnmin2,setVisible='true'"/> </Widget> <Button setShape="25,10,70,22" setLabel="Item 1" setBorder="none" setAnchor="true,true,false,false"/> <Button setShape="25,32,70,22" setLabel="Item 2" setBorder="none" setAnchor="true,true,false,false"/> <Button setShape="25,54,70,22" setLabel="Item 3" setBorder="none" setAnchor="true,true,false,false"/> </Widget> </Widget>


Adding Scroll bars

What about adding scrollbars?
There are TWO steps you would need to follow,
1) Place the Widget within a View control <View> ... </View>
2) Add to the min max buttons the additional event handler .. action,main,addToSize='0,-78' .. and action,main,addToSize='0,78'..

You have to remember to expand and contract the container that the panels sits in, the container would be sitting in a View control, the view control will automatically adjust the scrollbars

Back    Next