The layout module helps to position controls (i.e. buttons, listboxes, etc) on a container. Allthough it is possible to position them by hand using the Dimensions class, it is much easier to position them using layout combinators. Furthermore, the parent widget will automatically reposition them when for example the size of the parent widget changes. Also, a parent widget can determine its initial view size based on the given layout.

Here is an example that puts three buttons next to each other:

 do w <- window [title =: "hi controls"]
    a <- button [text =: "A"] w
    b <- button [text =: "B"] w
    c <- button [text =: "C"] w
    set w [layout =: a <<< b <<< c]

If a and b should have been placed on top of c, we would write:

 (a <<< b) ^^^ c

Each control has some minimal size. We can increase this with the vfix and hfix combinators. We can give for example c a width of 80:

 (a <<< b) ^^^ hfix 80 c

Padding around the controls can be added with the pad combinators. For example:

 (hpad 10 a <<< b) ^^^ vpad 10 (hfix 80 c)

Sometimes, it is easier to add padding between each control in a layout. The padding combinator can be used to do this. Padding can also be added between controls with the extended operators (^^^^) and (<<<<):

 (a <<<< b) ^^^^ b

Each control has both an inherited and occupied area. The inherited area is the area that it gets from the parent widget. The occupied area is the actual area that is occupied by the control. If the occupied area is smaller than the inherited area, the control is positioned in the upper-left corner. A control can also stretch to fill the available space. For example, we can make control a stretch vertically and control c horizontally:

 (vfill a <<<< b) ^^^^ hfill c

There is also glue: an empty control that stretches to fill the available space. Using glue, we can for example put the controls in the lower-right corner:

 hglue <<< (vglue ^^^ ((a <<< b) ^^^ c))

Or in the middle:

 hglue <<< (vglue ^^^ ((a <<< b) ^^^ c) ^^^ vglue) <<< hglue

This pattern is actually captured in the center combinators:

 hcenter c  = row [hglue,c,hglue]

The most primitive combinator is the grid. It positions a matrix of elements in an aligned grid. A grid is flexible -- if a grid contains objects that stretch horizontally or vertically, the entire grid will also stretch. Since (^^^), (<<<), row, column and others have all been formulated in terms of grid, these will also stretch automatically if one of their arguments stretches.

For example, the following code will not position item a centered on top of item b:

 hcenter a ^^^ b

Instead, it will stretch out to fill the entire inherited space and center a horizontally in that space. The b item has no stretch and will float to the left. To center the a control relative to b, one needs to prevent the parent grid from stretching. The rigid combinator can be used to do that:

 rigid (hcenter a ^^^ b)