ASUL offers three basic approaches to layouting, static, self-positioning and child-positioning. These three possibilities are explained in the following. It must be noted, though, that self-positioning layouting is not available for children of child-positioning objects (simply to avoid deadlocks). It is, however, possible for objects to be self-positioning and child-positioning.
This is the most basic variant, and simply consists of setting the object's position and size attributes. These are:
xfor the x position, relative to the element's parent.
yfor the y position, relative to the element's parent.
widthfor the width of the element.
heightfor the height of the element.
Note that all these may be rewritten by a parent using child-positioning.
This is what one achieves by using the
anchors attribute of ASUL objects. It allows to define relative positions, based on the object's parent's size. For the position one can also refer to the object's own size.
Four anchors can be set:
In that order, comma separated. If only one anchor per axis is given, it will leave the object's size on that axis unchanged. I.e.
<box> <box anchors="0,0,pw-w"></box> </box>
will only set the right anchor to
pw-w, parent width - object width, so the object will be at the right edge of its parent, with a constant width, as set using the
This type of layout should be used when it is necessary for objects to scale with their parents, or if they have very special positions that are not related to other objects in the same container.
This is what is usually understood when talking about GUI layouts. This means an object is capable of layouting its children, defining how to position its children relative to each other in the available area.
For now, only two basic ones are available via the XML definitions for now: a horizontal and a vertical flow layout. A flow layout places all children next to each other, until the maximum size in the respective axis is reached (horizontal: maximum width, vertical: maximum height), then repeats the same procedure in the next row or column.
This allows an easy way of placing many elements without having to define a position for every one of them. A typical example for an application of a flow layout are lists of buttons.
A flow layout can be treated like a normal container object, just that children's positions are overwritten by the layout.
<hflow maxwidth="50"> <box width="25" height="25" background="0xFF0000"/> <box width="25" height="25" background="0x00FF00"/> <box width="25" height="25" background="0x0000FF"/> </hflow>
Would result in the outer box being 50x50 pixels big, and the blue (third) box being in the second row.
|Components||Box · Button · ProgressBar · ScrollBar · ScrollPane · Text · ToggleButton · Window|
|Layouts||Horizontal Flow Layout · Vertical Flow Layout|
|ASUL Articles||ASUL Document · Editing the GUI · Layouting · ASUL scripting|