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