REBOL 3 Concepts: Gui: Layout

Describes the basic concepts of how GUI objects are positioned, sized, and aligned.

Editor note: New proposal - not yet implemented.

Contents

Panels

Each window is a panel.

The window panel is normally divided into subpanels, each of which can be further divided into subpanels, etc.

Each panel contains one or more widget faces. These are the graphical objects or controls of the GUI.

Guides

Within each panel, face positions are based on guides. There can be horizontal and vertical guides.

A specific position in a guide is called a marker. Markers can be relative (specified as a percent!) or absolute (specified as an integer! number of pixels). Later we can allow units, such as EM or CM.

Guides can be directly specified or automatically computed.

• When specified, the guide markers are provided as a block of numbers (percents or integers).
• When computed, guides are based on the sizes of the faces contained in a panel (and converted to percentages.)

The size of a face comes from:

• The size given in its style
• The size from its face options
• The size of its contents (image, drawing, text, subpanel)

Cells

A cell is the area formed between markers.

Alignment of faces can be relative within a cell (like HTML tables) or relative to a guide marker. Alignment can be left, center, and right, combined with top, middle, or bottom. (For more detailed alignment, use a subpanel with it's own guide.)

If a face size is not specified, then by default, it will span its full cell. The span is unlimited, but a face can set a maximum size limit.

(Note that a subpanel is allowed to be larger than its display area. For example, a scrolling table of data. However, such panels are created as separate layouts or generated with other code.)

Resizing

Panels are allowed to change size.

If the panel uses relative guide markers (percent), faces will be repositioned relative to the new size.

If guide markers are absolute, positions are locked and remain the same.

Guide markers are allowed to be moved (for example, as a panel splitter). Faces will be repositioned accordingly.

Layers

A layer is a panel placed under or over another panel.

For example, if you want a small button or link to be placed in the upper right corner of your windows, this can be done with a layer.

The benefit of a layer is that it can provide its own guides, independent of the panels above or below it.

In addition, the faces of a layer can float (be positioned relative to faces in other panels.)