Controls are drawn in the order defined in the controls table.

When there is no VCR table, the spatial layout follows this pattern:

When the VCR table is present the layout is modified to this:

The controls are drawn in the controls space unless overridden by their position. The controls space has a fixed minimum size but will expand in both the X and Y direction to at least encompass the controls declared within it. Within this space there is the notion of a drawing 'position'.

The drawing position is moved on for each control drawn according to its prevailing ruler.

The various control types render as (the code for these samples is installed with the system in configs\page_eg.lua):

Prompt:

The width, relative position and presence of these elements can be controlled by a ruler. For the default ruler, the width of a prompt is 136 DUs (34 characters), the [...] is 10, the entry area is 136 and the [?] is 13.

Button:

The width of a button can be controlled by a ruler. For the default ruler, the width is 40 DUs (10 characters). Buttons follow each other in-line unless overridden by a position of drPage_First or the ruler.

String:

The default width of a string is whatever is required to encompass the characters within it, the default height is a single line, strings follow each other in-line unless position 'first' or the ruler overrides it.

List:

The default size of a column is the size of its name. List buttons are aligned to the right of the list. The default list width (including its buttons) is the whole window width. The where used tool is drawn for virtual files but is disabled. The key change tabs are not drawn if only one key is declared for the list.

The 'X' column is present because the multi-select facility has been turned on, there is a helper function for this - Selector() in the 'utils' library, use require('utils') to access it. Just put Selector('M') in the fields table for the list to enable it and Selector('S') in its buttons table to provide the 'Select' button group. See configs\page_eg.lua for a code example.

Group:

The size and position of the group is determined by its ruler. NB: The enclosing box is not drawn if the group has no text.

It's the window designers responsibility to ensure the enclosed controls fit (although this does not matter if the group has no text).