Layout 

Definition

The layout specifies the arrangement of UI elements in their container. An object of type Layout can be added to each container. For each child object in this container, an appropriate object of type LayoutData can be added. This IWDLayoutData object specifies the layout properties of the child in question - for example, the position in a coordinate system defined by the layout.

Layout Classes

Each UI element container aggregates a corresponding layout object that describes how the inserted UI element children are assigned within the container. This type of layout object is a subclass of the abstract base class IWDLayout.

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

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

●     GridLayout
A grid layout 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
A matrix layout arranges the container children in a tabular format, similar to the grid layout. You can use the properties stretchedHorizontally and stretchedVertically to specify whether or not the UI elements match the container size. Certain functions available when using the grid layout are not available here. For example, you cannot explicitly define the number of columns. Instead, you assign a IWDMatrixHeadData object to a UI element, so that this UI element is wrapped. A great advantage of the matrix layout compared to the grid layout is that you can create consistent layout structures easily using the cell classes provided.

●     RowLayout
A row layout has similar behavior to the matrix layout. However, it sequentially assigns the UI elements to exactly one column. If you assign a IWDRowHeadData object to a UI element, it is exactly this UI element that is wrapped. A great advantage of the row layout is that you can easily create consistent layout structures using the predefined cell classes that are also provided in the matrix layout.

LayoutData Classes

Each UI element references one IWDLayoutData object.

These classes are used to control:

●     Padding between individual UI elements and between the UI element and the grid cell

●     Horizontal and vertical alignment of the UI elements within the grid

●     Width and height of the UI element in the cell

 

Object IWDLayoutData is an instance of the subclass of abstract base class IWDLayoutData. Web Dynpro provides the following LayoutData classes for the layout classes IWDFlowLayout, IWDGridLayout, IWDMatrixLayout, and IWDRowLayout:

●     FlowData

●     GridData

●     MatrixData and MatrixHeadData

●     RowData and RowHeadData