Um eine grafische Oberfläche bestehend aus mehreren UI-Komponenten designen zu können, benötigen Sie ein Layout. Layouts haben die Aufgabe, die einzelnen UI-Komponenten einer grafischen Oberfläche anzuordnen und steuern vollautomatisch das Verhalten der UI-Komponenten bei Änderungen der Größe des übergeordneten Containers (u.a. Programmfenster, Browser-Fenster, Geräte-Display, Bildschirmauflösung). Sobald Sie eine UI-Komponente in ein Layout einfügen, wird diese nach den speziellen Regeln des jeweiligen Layouts automatisch positioniert und das Layout neu organisiert. Durch zusätzliche Einstellungsmöglichkeiten in der Toolbox können Sie das Verhalten der einzelnen UI-Komponenten definieren. Anstatt die gesamte Oberfläche mit einem einzigen Layout umzusetzen, ist es leichter und effizienter je nach Anwendungsfall verschiedene Layouts miteinander zu kombinieren. Dies verbessert zudem die Performance Ihrer Oberfläche zur Laufzeit. RapidClipse bietet Ihnen deshalb insgesamt 6 verschiedene Layout-Typen:

XdevAbsoluteLayout
XdevGridLayout
XdevBorderLayout
XdevHorizontalLayout
XdevVerticalLayout
XdevFormLayout

UI-Komponenten

Content - Die Größe einer GUI-Komponente richtet sich standardmäßig automatisch nach ihrem Content (Inhalt), z.B. Text, Icon etc. Bei zu geringer Größe wird der Content ggf. abgeschnitten oder ragt aus der GUI-Komponente heraus.

Außenabstand (Margin)

In den Properties > Margin kann zwischen dem Rand des Containers und der darin gelayouteten UI-Komponenten ein Außenabstand festgelegt werden.

Mit Außenabstand:

Ohne Außenabstand:

Selektieren Sie bei Structure das Layout.
Klicken Sie bei Properties > Margin > TLBR auf .
Legen Sie im folgenden Assistent die enstperchenden Außenabstände fest.

Innenabstand (Spacing)

In den Properties > Margin kann zwischen den UI-Komponenten ein Innenabstand festgelegt werden.

Mit Innenanbstand:

Ohne Innenabstand:

Selektieren Sie bei Structure das Layout.
Wählen Sie die Eigenschaft Spacing an.

Layout-Constraints

Align - Die GUI-Komponente wird an den Rand des Parent-Containers positioniert oder zentriert. Kein festes Andocken.
Span - Mit + wird die GUI-Komponente über die nachfolgende Zelle des XdevGridLayouts gespannt (nur nach rechts oder unten) und dadurch vergrößert. Mit - wird die Vergrößerung rückgängig gemacht.
Width / Height
- ? - Das Verhalten ist nicht explizit definiert. Die GUI-Komponente verhält sich wie bei der Einstellung %.
- px - Die Breite bzw. Höhe der GUI-Komponente wird fest in Pixel definiert. Der Content (Inhalt) wird ggf. abgeschnitten.
- % - Die Breite bzw. Höhe der GUI-Komponente wird durch ihren Content (Inhalt) bestimmt.
Quick Settings
- Don´t Stretch - Die Größe wird automatisch durch den Content (Inhalt) bestimmt, z.B. Textlänge, Icon-Größe etc.
- Stretch Horizontally - Die GUI-Komponente nimmt automatisch den gesamten verfügbaren Platz in der Breite ein.
- Stretch Vertically - Die GUI-Komponente nimmt automatisch den gesamten verfügbaren Platz in der Höhe ein.
- Stretch in Both Directions - Die GUI-Komponente nimmt automatisch den gesamten verfügbaren Platz in der Breite und Höhe ein.