From MegaZine3

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.

[edit] Static layouting

This is the most basic variant, and simply consists of setting the object's position and size attributes. These are:

• x for the x position, relative to the element's parent.
• y for the y position, relative to the element's parent.
• width for the width of the element.
• height for the height of the element.

Note that all these may be rewritten by a parent using child-positioning.

[edit] Self-positioning layouting

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:

• left
• top
• right
• bottom

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

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.

[edit] Child-positioning layouting

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.