This stuff is only tested in Chrome.

Functional Layout

The is a demo of a layout concept inspired by the capability of a cell in a spresheet to reference the value of any other cell. An example:
b.left = a.right + 10

In the above exampel the left side of widget "b" is placed 10 pixels from the right side of widget "a". If widget "b" is placed after widget "a" then the above example can be writte as:
b.left = <right + 10

Below are some examples of the layout concept. In most of the examples you can:

Visit dejongh.dk to get more info.

Follow Me

Starter example. Try move or resize the boxes.

References to widgets/values in other roots

This widget is linked to a widget in the above example.

Example 2

Columns with the same size. Drag any column except column 1 to resize the spacing between columns. Resize root to resize columns.

Example 3

Two rows of buttons. The top row is left aligned. The bottom row is right aligned.

Example 4

This is a grid. Try resize the items in the grid.

Example 5

This is a more complex grid. Now all items are placed in containers which have the same height across a row. Try resize the items inside the containers.

Example 6

...