Erscheinungsbild
View-Tree (Inhalt der View)
Der View-Tree (Reiter View-Baum) zeigt den Inhalt der aktuell ausgewählten View hierarchisch an. Aus der Baumstruktur lesen Sie ab, welche Komponenten Container sind und wie die Komponenten zueinander stehen – meist Parent-Child oder auf gleicher Ebene.
Der Tree dient zum Navigieren, Selektieren, Verschieben und Löschen von Komponenten – ergänzend zur direkten Bedienung auf der Landefläche.
Standard-Aufbau einer View
Eine View besteht aus drei festen Bereichen:
| Bereich | Zweck |
|---|---|
Kopfzeile (header) | Titel und Navigationsmöglichkeiten – z.B. Zurück-Button, Logo |
Inhalt (content) | Hauptinhalt – hier finden alle UI-Elemente Platz, beliebig verschachtelt |
Fußzeile (footer) | Aktionen am unteren Rand – z.B. Bestätigungs-Buttons, Abbrechen |
Kopfzeile und Fußzeile akzeptieren nur eine eingeschränkte Auswahl an Komponenten: Button, CheckBox, ComboBox, Icon, Input, Label, Link, StepInput, Tag, Text, Time Picker, Barcode (Scanner-Button) und Spacer. Im Inhalt sind alle Komponenten erlaubt.
Bedienung
| Aktion | Wirkung |
|---|---|
| Klick auf Knoten | Selektiert die Komponente. Sie wird auf der Landefläche markiert und im Eigenschaften-Panel geladen. |
| Drag auf eine andere Position | Verschiebt die Komponente innerhalb des Trees. Ungültige Ziele werden abgewiesen. |
| Drop einer neuen Komponente aus der Sidebar | Fügt die Komponente unterhalb des Ziel-Knotens ein, sofern dieser ein Container ist. |
| Steuerelement löschen (Lösch-Symbol) | Entfernt die Komponente und ihre Children. |
| Steuerelement kopieren | Legt die Komponente mit ihren Children in die Zwischenablage. |
| Steuerelement einfügen | Fügt die kopierte Komponente als Kind des Knotens ein, an dem Sie den Button drücken. |
| Suche | Filtert den Baum live nach Steuerelement-ID (controlId). |
controlId konsequent vergeben
Jede Komponente erhält automatisch eine technische ID. Vergeben Sie zusätzlich eine sprechende Steuerelement-ID (controlId) im Eigenschaften-Panel (z.B. inputUser, btnLogin) – sie wird für Backend-Anbindung, Validatoren und Logic Flow als Referenz benötigt.
Container und Children
Eine Komponente ist ein Container, wenn sie weitere Komponenten als Kinder aufnehmen kann. Typische Container:
| Container | Verwendung |
|---|---|
View (mit Kopfzeile, Inhalt, Fußzeile) | Wurzel jeder Seite |
VBox | Vertikale Anordnung |
HBox | Horizontale Anordnung |
FlexBox | Flexible Anordnung mit Wrap |
Panel | Gruppierung mit optionaler Überschrift, einklappbar |
ScrollContainer | Scrollbarer Bereich mit fester Höhe |
SimpleForm | Formular-Layout mit Labels und Eingabefeldern |
IconTabFilterContainer (in IconTabBar → IconTabFilter) | Tab-Navigation innerhalb einer View – Komponenten werden in den Container des jeweiligen Tabs gezogen; IconTabBar und IconTabFilter selbst nehmen keine Komponenten auf |
DynamicFlexBox ist kein Container: Sie nimmt per Drop keine Komponenten auf, ihre Kinder liefert das Backend zur Laufzeit.
Validatoren und Logic Flows hängen ebenfalls als Children unter ihrer zugehörigen Komponente – siehe Funktionen.
Nächste Schritte
- Eigenschaften-Panel – Komponente konfigurieren
- Landefläche & Vorschau – Echtzeit-Vorschau der Änderungen
- View-Tree (App) – Übersicht aller Views der Applikation