TileLayout

Use

TileLayout arranges container children sequentially from left to right, similar to FlowLayout.

Text wrapping cannot be explicitly defined with TileLayout either. A line is automatically wrapped, if there is no longer enough space for the next container child. In this way TileLayout supports responsive Web design.

All container children are displayed with the same width in the TileLayout (different to FlowLayout).

Since the width of all container children is the same, the container children are arranged in a tile design, displayed in rows and columns.

TileData provides the layout data for a UI element in a container to which a TileLayout is assigned.

Implementation Details

Runtime Class

CL_WD_TILE_LAYOUT

Properties in View Designer

Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:

Name

Type

Initial Value

Bindable

id

STRING

(automatic)

No

allowedColCounts

STRING

Yes

cellPadding

WDUI_TILE_LAYOUT_CELL_PADDING

none

Yes

minCellWidth

I

Yes

minCellWidthUnit

WDUI_CSS_UNIT

px

Yes

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

Dynamic Programming of Properties

View Designer Name Runtime Name Type
allowedColCounts ALLOWEDCOLCOUNTS STRING
cellPadding CELLPADDING WDUI_TILE_LAYOUT_CELL_PADDING
cellPadding: large CL_WD_TILE_LAYOUT=>E_CELLPADDING-LARGE
cellPadding: medium CL_WD_TILE_LAYOUT=>E_CELLPADDING-MEDIUM
cellPadding: none CL_WD_TILE_LAYOUT=>E_CELLPADDING-NONE
cellPadding: none CL_WD_TILE_LAYOUT=>E_CELLPADDING-NONE
cellPadding: small CL_WD_TILE_LAYOUT=>E_CELLPADDING-SMALL
minCellWidth MINCELLWIDTH I

You can find an example in the system in WDR_TEST_TILE_LAYOUT.