Formular Layout
In diesem Kapitel wird vor allem auf den korrekten Aufbau und die Funktionsweise von Formular Layouts eingegangen.
Die meisten im Formulardesigner verfügbaren Elemente bieten die Eigenschaftenkategorie "Layout" an, in der beispielsweise die Größe des Elements definiert werden kann (siehe Abbildung).
Neben einer Css Klasse (1 Definierbar über die Experteneinstellungen der Styles) kann sowohl die Größe (2) als auch die Mindestgröße (3) eines Elements definiert werden.
Hinweis: Abhängig vom jeweiligen Elementtyp kann es vorkommen, dass nicht alle oder überhaupt keine Einstellmöglichkeiten zur Verfügung stehen
Größenangaben
Die Größe eines Elements kann sowohl in der Höhenrichtung als auch in der Breitenrichtung getrennt voneinander definiert werden.
Dabei werden drei Modi unterstützt:
Fix: Die Größe wird als fixer Wert in Pixeln angegeben
prozentual: Die Größe wird als prozentualer Wert angegeben.
Dabei wird das Maß relativ zum übergeordneten Element errechnet.
Ein prozentual großes Element wird dabei maximal so groß wie der restlich verfügbare Platz innerhalb seines übergeordneten Elements.
Der restliche Platz ergibt sich dabei aus der Größe des übergeordneten Elements abzüglich des Inhalts mit fixer oder automatischer Größe.
Dieser Sachverhalt hat auch zur Folge, dass sich Elemente mit prozentualer Größe ihren Platz auf derselben Ebene aufteilen.
Beispiel 1: Ein Spaltenlayout Container mit definierter Breite von 300 Pixeln (blauer Rahmen) besitzt zwei untergeordnete Button Elemente mit einer jeweiligen Breite von 100%
Beispiel 2: Selbes Szenario wie in Beispiel 1, jedoch besitzt der erste Button eine fixe Breite von 50 Pixeln. Button 2 nimmt dabei den restlichen Platz ein
Auto: Die Größe des Elements passt sich automatisch an die Größe seines Inhalts an
Relativ zur Schriftgröße: Die Größe des Elements wird relativ zu der gerade verwendeten Schriftgröße angegeben
Wichtig: Verschachtelung von prozentual großen Elementen in Container mit automatischer Größe
Es sollte immer bedacht werden, dass prozentuale Werte abhängig von der Größe des übergeordneten Elements sind, wobei ein automatischer Wert sich an der Größe des Inhalts orientiert.
Daher sollten prozentuale Größen im Inhalt in Kombination mit automatischen Größen im übergeordneten Element vermieden werden, da das Verhalten sonst undefiniert sein kann.
Der Grund hierfür wird nachfolgend noch einmal deutlich gemacht:
Ausgangssituation: Container A (Höhe: auto) beinhaltet Element B (Höhe: 100%)
Beim Darstellen soll zunächst die Größe von A ermittelt werden: Höhe A = Höhe B (weil Höhe A "auto")
Da die Größe von A sich an der Größe seines Inhalts orientiert, muss also zunächst die Größe von B ermittelt werden: Höhe B = Höhe A (weil Höhe B "100%").
Nun müsste wieder die Höhe von A ermittelt werden, was zu einem sogenannten "Henne-Ei" Problem führt. Die Größen beider Elemente sind daher nicht definiert, was in manchen Fällen dazu führen kann, dass Elemente überhaupt nicht oder nur sehr klein dargestellt werden.
Ebenso könnte es passieren, dass Elemente Millionen von Pixeln groß werden (z.B. Tabellen basierte Komponenten).
Aus Kompatibilitätsgründen zu älteren Lobster Data Platform / Orchestration-Versionen übernehmen manche Container Elemente die prozentuale Größe ihrer direkt untergeordneten Elemente, was jedoch unter Umständen verwirrende Effekte nach sich ziehen kann.
Dieses Phänomen ist jedoch ab der Version 4.2.0 für neu eingefügte Container automatisch deaktiviert und kann mit der Layout-Option "Prozentgröße von Kindern erben" aktiviert/deaktiviert werden.
Aufbau von Layouts
Für den Aufbau eines sauber aufgeteilten Formulars, bietet der Formulardesigner verschiedene Layout-Elemente wie Tabs, aufklappbare Container, Spalten- und Zeilenlayouts.
Die grundlegende Aufteilung der Maske sowie die Orientierung der visuellen Elemente geschieht hauptsächlich über die sogenannten Spalten- und Zeilenlayout Container, welche nachfolgend näher beschrieben werden.
Zeilenlayout
Ein Zeilenlayout Container richtet seine Kindelemente untereinander (in Zeilen) aus.
Spaltenlayout
Ein Spaltenlayout Container richtet seine Kindelemente nebeneinander (in Spalten) aus.
Beispielaufteilung durch Verschachteln von Zeilen- und Spaltenlayouts
Der unten dargestellte Aufbau zeigt das Layout einer klassischen Applikation, welche in einen Kopf, Körper und Fußbereich unterteilt ist.
|
Elementhierarchie |
Layout mit Größeneinstellungen |
|
|
|
Wohingegen der Kopf- und Fußbereich jeweils fixe Höhen haben, nimmt der Körperbereich (BODY) den restlichen Platz in der Höhe ein.
Wird der Platz für das Formular zu niedrig, gewährleistet die Mindesthöhe des Körperbereichs, dass dieser mindestens 400 Pixel hoch sein muss. Dies verhindert ein zu weites Zusammenschieben des Inhalts.
Gleiches gilt auch für den Seitenbereich (SIDE) und den Inhalt (CONTENT), welche jeweils Mindestbreiten von 200 und 300 Pixeln definieren.
Überlaufen von Inhalt
Zur Gestaltung eines flexiblen Layouts gehört auch das Festlegen wie sich Container verhalten, wenn deren Inhalt überläuft. Es wird dann von einem Überlauf gesprochen, wenn der Inhalt eines Containers größer wird als seine eigene definierte Größe.
Es gibt drei verschiedene Möglichkeiten, wie ein Container mit überlaufendem Inhalt verfährt. Diese sind über die Eigenschaftenkategorie "Element Container" auswählbar.
Scrollen Der Überlaufende Inhalt kann gescrollt werden (auf Desktop-PC Versionen der Browser werden automatisch Scrollbalken eingeblendet)
Sichtbar Der Überlaufende Inhalt bleibt sichtbar, überlappt allerdings nachstehende Elemente (siehe Button unten)
Versteckt Der Überlaufende Inhalt wird einfach abgeschnitten
Hinweis: Ein Container kann nur überlaufen, wenn er eine definierte Größe hat (nicht "auto")