Choosing the Layout 

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 layoutData 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 layoutData property of the relevant UI element to MatrixHeadData. 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.