Layouts

To design a graphical user interface consisting of several UI components, you need a layout. Layouts have the task of arranging the individual UI components of a graphical interface and fully automatically control the behavior of the UI components when the size of the parent container changes (including program window, browser window, device display, screen resolution). As soon as you insert a UI component into a layout, it is automatically positioned according to the special rules of the respective layout and the layout is reorganized. Additional settings options in the toolbox allow you to define the behavior of each UI component. RapidClipse offers you a total of 6 different layout types:

  • VerticalLayout - Arranges component below each other.

  • HorizontalLayout - Arranges component side by side.

  • FlexLayout - Arranges components next to each other. If there are too many components next to each other, more components will be arranged underneath.

  • FormLayout - Arranges component evenly in a grid.

  • SplitLayout - Creates two windows separated vertically by a splitter by default.

  • Content - The size of a UI component is by default defined by its content, e.g. TextFields, Buttons, etc. If the Height or Width is set to "?" the layout will collapse if there is no content. If a layout gets more content than it can display, the content overflows. Scrollers for this content can be set by the property "Styling → Scrollbars".

  • Stretch - In a layout, a UI component can be stretched (Toolbox > Width > %) only if it is given a weight (Weight).

  • Layout nesting - More complex interfaces can be implemented using nested layouts. For example, two vertical columns can be displayed in one horizontal layout using two VerticalLayouts.

  • Browser performance - Too many layout nestings with correspondingly many UI components in them can lead to performance problems when rendering the interface in the browser, possibly even to error messages.

Outside distance (Margin)

In the Properties > Margin an outer margin can be defined between the edge of the container and the UI components laid out in it. For all layouts, the outer margin is disabled by default.

Without external distance:
image not found

With outer spacing: (note the distance between the highlight borders and the outer menu).
image not found

Inside distance (Spacing)

In the Properties > Spacing a spacing can be defined between the UI components. For all layouts the inner spacing is activated by default.

Without inside distance:
image not found

With inner distance:
image not found

Spacing between layout and component (padding)

The distance between layout and component is called Padding. This can be activated via Properties > Object > Padding. Padding is disabled by default for all layouts.

Without padding:
image not found

With padding:
image not found