Layout-Grundlagen

Das Layout steuert die Positionierung von Oberflächenelementen in ihrem enthaltenden UIElementContainer. Dazu müssen Sie an jedem Container ein Objekt vom Typ Layout anfügen. An jedem in diesem Container enthaltenen Kindobjekt müssen Sie jeweils ein dazu passendes Objekt vom Typ LayoutData aggregieren. LayoutData steuert die Layouteigenschaften des jeweiligen Kind des Containers, z.B. könnte dies die Position in einem durch das Layout definierten Koordinatensystem sein.

Jeder Oberflächenelement-Container aggregiert ein entsprechendes Layout-Objekt, welches beschreibt, wie die eingefügten Oberflächenelement-Kinder innerhalb des Containers angeordnet werden. Der Typ dieses Layout-Objekts ist eine Unterklasse des abstrakten Basis-UI-Elements Layout.

Folgende Layout-UI-Elemente werden zur Anordnung der Oberflächenelemente in einer View angeboten:

• FlowLayout

  Ein FlowLayout ordnet die Container-Kinder sequenziell an, was heißt, dass beispielsweise keine definierten Zeilenumbrüche beschrieben werden können. Ein FlowLayout hängt damit von der Client-Technologie und auch von der Größe des Browser-Fensters ab.

  Sie können in einem FlowLayout die folgenden UI-Elemente verwenden, ohne dass sie bei der Bildschirmausgabe umgebrochen werden:

  • InputField

  • Label

  • FormattedTextView

  • TextView

  • Button

  • ButtonChoice

  • LinkChoice

  • LinkToAction

  • LinkToUrl

  • CheckBox

  • DropDownByIndex

  • DropDownByKey

  • RadioButton

  • ToggleLink

  • ToggleButton

  • TriStateCheckBox

  • Image

• FormLayout

  Ein FormLayoutähnelt einem GridLayout, wobei die Container-Kinder in einem Raster wie bei Spalten einer Zeitung angeordnet werden. Mit FormTopData fügen Sie ein neues Panel hinzu, mit FormHeadData können Sie einen Zeilenumbruch realisieren, und mit FormData beginnen Sie eine neue Zelle neben der bereits vorhandenen Zelle.

• FormLayoutAdvanced

  Ein FormLayoutAdvanced besitzt folgende Eigenschaften: Es unterstützt die Ausrichtung von UI-Elementen über Containergrenzen hinweg. Zusätzlich ist es auch möglich UI-Elemente stufenförmig in verschiedenen Zeilen anzuordnen. Die Layout-Daten für ein Oberflächenelement in einem Container, dem ein FormLayoutAdvanced zugeordnet ist, werden von FormDataAdvanced zur Verfügung gestellt. Um ein Zeitungsseitenlayout wie beim FormLayout zu erzeugen, wird empfohlen, ein LayoutContainer zu verwenden. Dadurch wird die Verschachtelungstiefe reduziert. Die Höhe des FormLayoutAdvanced in Form von rowSpan muss für jedes UI-Element entsprechend angegeben werden.

• GridLayout

  Hinweis

  Verwenden Sie anstelle des GridLayout möglichst das MatrixLayout.

  Ein GridLayout ordnet die Container-Kinder in einem zweidimensionalen Gitter mit definierter Spaltenanzahl und beliebig vielen Zeilen an. Zeilenumbrüche können definiert werden. Sie werden automatisch ausgeführt, wenn ein Oberflächenelement nicht mehr innerhalb einer Zeile angezeigt werden kann.

• MatrixLayout

  Ein MatrixLayout ordnet die Container-Kinder in einer tabellenartigen Struktur an. Mit den Eigenschaften stretchedHorizontally und stretchedVertically können Sie festlegen, ob die Oberflächenelemente auf die Containergröße angepasst werden. Im Unterschied zum GridLayout können Sie beispielsweise die Spaltenanzahl nicht explizit definieren, sondern Sie ordnen einem Oberflächenelement ein MatrixHeadData zu, dann wird dieses Oberflächenelement in die nächste Zeile umgebrochen. Ein großer Vorteil bei der Verwendung des MatrixLayout gegenüber dem GridLayout liegt im einfachen Erstellen von einheitlichen Layout-Strukturen, die durch die angebotenen Zellklassen ermöglicht werden.

• RowLayout

  Ein RowLayout verhält sich ähnlich wie das MatrixLayout, jedoch ordnet es die Oberflächenelemente fortlaufend in einer einzigen Spalte an. Wenn Sie einem Oberflächenelement ein RowHeadData zuordnen, dann wird genau dieses Oberflächenelement in die nächste Zeile umgebrochen. Ein großer Vorteil bei der Verwendung des RowLayout liegt im einfachen Erstellen von einheitlichen Layout-Strukturen durch die vordefinierten Zellklassen, so wie diese auch im MatrixLayout angeboten werden.

  Sie können in einem RowLayout die gleichen UI-Elemente verwenden wie oben für das FlowLayout angegeben, ohne dass sie bei der Bildschirmausgabe umgebrochen werden:

• TileLayout

• Das TileLayout ordnet, ähnlich dem FlowLayout, die Container-Kinder sequenziell von links nach rechts fließend an.

  Auch beim TileLayout können Zeilenumbrüche nicht explizit definiert werden. Eine Zeile wird automatisch umgebrochen, wenn nicht mehr genügend Platz für das nächste Container-Kind zur Verfügung steht. Das TileLayout unterstützt damit responsives Webdesign.

  Im TileLayout werden (anders als beim FlowLayout) alle Container-Kinder mit gleicher Breite dargestellt. Durch die gleiche Breite aller Container-Kinder entsteht eine kachelmusterartige Anordnung der Container-Kinder, d.h. die Container-Kinder werden in Zeilen und Spalten dargestellt. Die Layout-Daten für ein Oberflächenelement in einem Container, dem ein TileLayout zugeordnet ist, werden von TileData zur Verfügung gestellt.