Show TOC

Choosing the LayoutLocate this document in the navigation structure

Use

The layout specifies the arrangement of UI elements in their container. You can specify the layout for a view by specifying the RootUIElement 's layout. For each child object in a container you can specify the layout D ata property.

Layouts

The following layout classes are available for arranging the UI elements in a view:

  • ColumnLayout arranges content on a common grid across container or view boundaries, even across component boundaries. ColumnLayout is designed to define a content area combining several forms and tables that have to be aligned.

  • GridLayout arranges the container children in a two-dimensional grid with a defined column number and any number of rows. Line breaks can be defined. Line breaks are automatically inserted when a UI element is too long to be displayed within one row.

  • MatrixLayout arranges the container children in a tabular format, similar to the GridLayout .. Certain functions available when using the GridLayout are not available here. For example, you cannot explicitly define the number of columns. To define a new row, you set the lay outData property of the relevant UI element to M . atrixHeadData A great advantage of the MatrixLayout compared to the GridLayout is that you can create consistent layout structures easily using the cell classes provided.

  • RowLayout has similar behavior to the MatrixLayout . However, it sequentially assigns the UI elements to exactly one column. If you set the layoutData property to RowHeadData to a UI element, it is exactly this UI element that is wrapped. A great advantage of the RowLayout is that you can easily create consistent layout structures using the predefined cell classes that are also provided in the MatrixLayout .

  • FlowLayout sequentially arranges the container children. This means that you cannot describe defined line breaks, for example. A FlowLayout depends on the client technology and the size of the browser window.

  • PageLayout. To define a standalone application view, you can use the PageLayout that is assigned to the RootElement .

Procedure

  1. Select the relevant container and set the layout property to the desired value. The layoutData property of the contained UI elements is automatically set to a corresponding value

  2. To define a new row in your view layout, you can set the layoutData property to the corresponding *HeadData value, for example RowHeadData , if the specified container layout is RowLayout .

  3. To define empty cells in a Layout, you can use the InvisibleElement.