Layouts

Für die Komponenten innerhalb einer Web-Anwendung können verschiedene Layouts vorgegeben werden:

(7.4.0-de) Flow-Layout

Mit einem Flow-Layout werden die Elemente automatisch angeordnet. Dabei fließen die einzelnen Elemente frei über die Seite, ähnlich wie bei einem Text. Dieses Layout bietet sich sehr für Web-Anwendungen an, die auch auf sehr kleinen Bildschirmen gut erkennbar sein sollen, da die Breite über die Anzahl der Spalten für jedes verwendete Endgerät individuell festgelegt werden kann.

(7.4.0-de) Grid-Layout

Wenn für die Elemente einer Web App das Grid-Layout gewählt wird, dann werden die Elemente an einem Raster ausgerichtet. Dieses Layout sorgt für ein sehr geordnetes Erscheinungsbild. Das Raster wird über die Anzahl Spalten und Zeilen festgelegt und passt sich in der Höhe und Breite dem jeweiligen Endgerät an.

Registerkarten-Layout (Tab Layout)

(7.4.0-de) Responsive-Layout

Das Responsive-Layout bietet sich für Web-Anwendungen an, die auf unterschiedlichen Endgeräten angezeigt werden sollen. Das Responsive-Layout ist in 12 virtuelle Spalten unterteilt. Wie viel Platz einer Spalte zur Verfügung steht, hängt von der Auflösung des Endgeräts ab.

(7.4.0-de) Box-Layout

Das Box-Layout ist ein einfaches Layout mit nur einem Inhaltselement. Höhe, Breite, Rahmen, Margin und Padding können nur für das Box-Layout festgelegt werden. 

Das vorgegebene Layout steuert, wie die Controls (Text, Radio-Buttons, Checkboxen, Bilder etc.) angezeigt werden. Die verschiedenen Layouts können ineinander verschachtelt werden. Layouts können verschiedene Controls enthalten.

Das Layout wird innerhalb einer Component deklariert:

<DetailComponent>
	<FlowLayout>
		<!-- Inhalt -->
	</FlowLayout>
</DetailComponent>