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.
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.
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