Layout markup and data structures

This topic provides a description of the markup and the data structures needed to set up the layout.

The layout of an application is a grid layout, formed by a root element (the layout container) and its children (the layout items). A layout item is attached to a grid cell by its top-left corner. Horizontally and vertically, it can span more than one cell.

Layout items have a minimum size and a desired size. The desired size is usually the size needed to render its content. However, for some widgets (such as edit-based widgets), the desired size is given by the space specified in the form definition file. In most cases, the minimum size matches the desired size. Other features may be set to a widget, such as a custom size policy or a stretching capacity. Features such as these form the layout policy of the layout item. The layout policy is either bound to the HTML element that is also a layout item or to a descendant of that element.

There can be only one policy element bound to a layout item. If more than one element needs be ruled by a layout policy, a container must be used, where the container automatically generates the policy behavior for the parent layout item. The three (3) key components -- container, item, and policy -- are attached to the HTML elements by means of data-g-layout-xxx attributes. The value of those attributes is a JSON object.