Strukturierung der Oberfläche:
Bevor ihr eine neue Oberfläche gestaltet, solltet ihr euch Gedanken um die Aufteilung der Elemente machen. Werden die Elemente nur einzeln in die Oberfläche aufgenommen, so werden diese recht zufällig angeordnet und verschieben sich gegenseitig beim Ändern der Fenstergröße im Browser.
Um ein festes Layout zu erhalten, bieten sich Vertikaler- und Horizontaler Stapel an.
In diesem Dashboard habe ich zuerst 3 Vertikale Stapel eingefügt. Das ergibt die 3-spaltige Aufteilung:
Die 3 Stapel sind damit die einizen Elemente auf oberster Ebene. Damit werden sie immer nebeneinander dargestellt. In einer Portrait-Darstellung (Telefon) werden die 3 Stapel untereinander angezeigt. Damit ist diese Gestaltung flexibel für verschiedene Bildschirm-Varianten.
Ihr könnt auch 2 oder 4 Stapel verwenden. Dazu müsste ihr testen, ob die darin enthaltenen Elemente komplett dargestellt werden oder evtl. aus dem Rahmen herausreichen und abgeschnitten werden.
Innerhalb der 3 Stapel verwende ich wiederum weitere Stapel, um die einzelnen Elemente zu gruppieren:
Hier ein Beispiel mit einem horizontalen Stapel, darin wiederum jeweils eine Entitätsliste und darin die einzelnen Entitäten:
Im unteren Bereich ist nur ein Vertikaler Stapel mit Entitäten eingefügt.
In der Konfigurationsansicht sieht man die Hierarchie:
Diese Aufteilung hat noch weitere Vorteile:
- die Elemente lassen sich in der Reihenfolge ändern (die grün markierten Pfeile)
- bei CustomColntrols kann man den YAML-Text komplett kopieren und in andere Stapel als Vorlage einfügen und dort anpassen.
