Erscheinungsbild
View-Tree (Inhalt der View)
Der View-Tree 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 |
|---|---|
| Header | Titel und Navigationsmöglichkeiten – z.B. Zurück-Button, Logo |
| Content | Hauptinhalt – hier finden alle UI-Elemente Platz, beliebig verschachtelt |
| Footer | Aktionen am unteren Rand – z.B. Bestätigungs-Buttons, Abbrechen |
Der Header und Footer akzeptieren nur eine eingeschränkte Auswahl an Komponenten (Buttons, Labels, Icons, Links). Im Content 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. |
| Lösch-Symbol | Entfernt die Komponente und ihre Children. |
| Suche | Filtert den Tree live nach controlId oder Komponenten-Typ. |
controlId konsequent vergeben
Jede Komponente erhält automatisch eine technische ID. Vergeben Sie zusätzlich eine sprechende 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 Header, Content, Footer) | Wurzel jeder Seite |
VBox | Vertikale Anordnung |
HBox | Horizontale Anordnung |
FlexBox / DynamicFlexBox | Flexible Anordnung mit Wrap |
Panel | Gruppierung mit optionaler Überschrift, einklappbar |
ScrollContainer | Scrollbarer Bereich mit fester Höhe |
SimpleForm | Formular-Layout mit Labels und Eingabefeldern |
IconTabBar / IconTabFilter | Tab-Navigation innerhalb einer View |
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