Bambookit Home    Bambookit GUI Tutorial

Next   

IV. Advanced Features

Chapter 12. Layout using Anchors



What is Anchors? All widgets have them, whenever a parent container is resized, how the children are resized can be determined by how they are anchored to the container.

Let's start with an example, let's say we wanted to resize a window and we have a button control in the bottom right corner of the view. As we resize the window we would like the button to remain 'anchored' to the bottom right corner. How would we accomplish this? By anchoring the bottom and the right anchors.



<Widget setSize="500,300"> <Widget setShape="10,10,160,160" setBackground="blue"> <Resize setShape="142,142,16,16" setAnchor="false,false,true,true" setResize="bottomright" addImage="images/resize.gif,14,14"/> <Button setShape="50,125,80,25" setAnchor="false,false,true,true"/> </Widget> </Widget>
As you can see from the above example we did not add a minimum size to the window widget. Lets add one now, setMinimumSize="120,40".

What would happen if the widget is not anchored, setAnchor="false,false,false,false", this is the default setting of most Widgets. The behaviour would mean that the widget would try to maintain its relative postion on the window while it is getting resized. To illustrate, view the example below



<Widget setSize="500,300"> <Widget setShape="10,10,160,160" setBackground="blue" setMinimumSize="120,40"> <Resize setShape="142,142,16,16" setAnchor="false,false,true,true" setResize="bottomright" addImage="images/resize.gif,14,14"/> <Button setShape="50,125,80,25" setAnchor="false,false,true,true"/> <Button setShape="60,70,25,25" setLabel="M"/> </Widget> </Widget>
>From the example above we see the button 'M' tries to maintain its position relative to the sides of the container it sits in. Also it has to be noted that the widget 'M' slides UNDER the original button. The rule for z-order is quite simply the top most widgets are the widgets defined FIRST. Let's flesh out our example by creating a central widget 'anchored' to all four sides of the container it sits in.

<Widget setSize="500,300"> <Widget setShape="10,10,160,160" setBackground="blue" setMinimumSize="150,80"> <Resize setShape="142,142,16,16" setAnchor="false,false,true,true" setResize="bottomright" addImage="images/resize.gif,14,14"/> <Button setShape="70,125,60,25" setAnchor="false,false,true,true" setLabel="Cancel"/> <Button setShape="20,125,40,25" setAnchor="false,false,true,true" setLabel="OK"/> <Widget setShape="10,10,140,120" setLabel="M" setAnchor="true,true,true,true"/> </Widget> </Widget>


>From the example above we extended the minimum size to encompass the two buttons, 'ok' and 'cancel' and the larger 'm' widget. Pretty simple so far, let's say we now wish to add a listbox in the panel (widget 'M'). And we want is anchored on the left side as well as above and below. Also we could add two buttons to the right of 'M'.



<Widget setSize="500,300"> <Widget setShape="10,10,160,160" setBackground="blue" setMinimumSize="150,120" setMaximumSize="480,280"> <Resize setShape="142,142,16,16" setAnchor="false,false,true,true" setResize="bottomright" addImage="images/resize.gif,14,14"/> <Button setShape="70,125,60,25" setAnchor="false,false,true,true" setLabel="Cancel"/> <Button setShape="20,125,40,25" setAnchor="false,false,true,true" setLabel="OK"/> <Widget setShape="10,10,140,120" setAnchor="true,true,true,true" setBorder="roundlowered"> <Listbox setShape="5,5,60,105" setName="list1" setAnchor="true,true,true,true"/> <Button setShape="80,10,55,25" setLabel="plus" setAnchor="false,true,true,false" addActionTarget="action,list1,addItem='lllooonnnggg_name'"/> <Button setShape="80,40,55,25" setLabel="minus" setAnchor="false,true,true,false" addActionTarget="action,list1,removeItem='lllooonnnggg_name'"/> </Widget> </Widget> </Widget>
As you can see from the example above embedded widgets will ALSO get resized based on the way they are 'anchored' to their parents. The anchors can be applied at all levels of the widget hierachy. When one widget gets resized, all its children gets resized while respecting the manner in which they are anchored

Note: The setMaximumSize and the removeItem attributes are part of the 381 build.

Next