Entering content frame

Component documentation Layout Locate the document in its SAP Library structure

Definition

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

This graphic is explained in the accompanying text
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:

·        IWDFlowLayout
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.

·        IWDGridLayout
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.

·        IWDMatrixLayout
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. You cannot explicitly define the number of columns, for example, which you can do when using the grid layout. Instead you assign a IWDMatrixHeadData object to a UI element so this UI element is wrapped. It is a great advantage of the matrix layout over the grid layout that you can easily create consistent layout structures using the provided cell classes.

·        IWDRowLayout
A row layout has a similar behavior as 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. It is a great advantage of the row layout that you can easily create consistent layout structures using the predefined cell classes, which are also provided in the matrix layout.

Web Dynpro Layout API

Definition

The layout class is the abstract base class of all layout classes within Web Dynpro. All properties of this class are passed to the classes IWDFlowLayout, IWDGridLayout, IWDMatrixLayout, and IWDRowLayout .

Description of API Methods

Method Name

Parameter

Return Value

Short Description

getUIElementContainer

 

IWDUIElementContainer

Returns the UIElementContainer element in which this layout element is contained.

Additional methods described in the following APIs are available using inheritance: IWDViewElement.

LayoutData Classes

Each UI element references a IWDLayoutData object that can be used for the alignment of a UI element. This IWDLayoutData object is an instance of the subclass of the abstract IWDLayoutData base class. Web Dynpro provides the following LayoutData classes for the layout classes IWDFlowLayout, IWDGridLayout, IWDMatrixLayout, and IWDRowLayout:

·        IWDFlowData
The IWDFlowData object provides the layout data of a UI element whose container contains a flow layout.

·        IWDGridData
The IWDGridData object provides the layout data of a UI element whose container contains a grid layout.

·        IWDMatrixData
The IWDMatrixData object provides the layout data of a UI element whose container contains a matrix layout.

·        IWDRowData
The IWDRowData object provides the layout data of a UI element whose container contains a row layout.

Web Dynpro LayoutData API

Definition

The layout data of a UI element is used to specify the positioning in its container. The data must match the current container layout.

Use

The IWDLayoutData class is the abstract base class of all LayoutData classes.

The available layout data classes include:

·        IWDFlowData class

·        IWDGridData class

·        IWDMatrixData class

·        IWDRowData class

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

.

Description of API Methods

Method Name

Parameter

Return Value

Short Description

getUIElement

 

IWDUIElement

Returns the UI element element in which this LayoutData element is contained.

Additional methods are available using inheritance: IWDViewElement.

  

  

 

Leaving content frame