Landefläche und Vorschau

Die Landefläche ist gleichzeitig Arbeitsfläche und einfache Vorschau der App, die gerade entwickelt wird. Komponenten werden hier per Drag-and-Drop hinzugefügt, verschoben und konfiguriert. Gleichzeitig sehen Sie in Echtzeit, wie die App am Ende aussehen wird.

Drag-and-Drop

Aus der Komponenten-Sidebar ziehen Sie eine Komponente direkt auf die Landefläche. Gültige Drop-Ziele werden während des Drag-Vorgangs hervorgehoben:

Hervorhebung	Bedeutung
Grüner Rahmen	Container akzeptiert die Komponente – Drop ist erlaubt
Roter Rahmen / kein Marker	Drop wird abgewiesen (Komponente passt nicht in den Container)

Komponenten lassen sich auf der Landefläche auch nachträglich per Drag verschieben.

Selektion

Ein Klick auf eine Komponente selektiert sie:

• Sie wird auf der Landefläche farblich hervorgehoben
• Im View-Tree wird der zugehörige Knoten markiert
• Im Eigenschaften-Panel erscheinen die Properties der selektierten Komponente

Eine Selektion können Sie auch aus dem View-Tree heraus auslösen – beide Bereiche sind synchronisiert.

Echtzeit-Vorschau

Jede Property-Änderung im Eigenschaften-Panel wird unmittelbar auf der Landefläche sichtbar. Das gilt auch für:

• Text-Änderungen
• Größen- und CSS-Anpassungen
• Strukturelle Änderungen (Verschieben, Hinzufügen, Löschen)
• Theme-Wechsel über die Einstellungen

Porträt-Wechsel

Über die Meta-Funktion Porträts können Sie die Größe der Landefläche an verschiedene Geräteformate anpassen. So überprüfen Sie, ob Ihre App auf Smartphone, Tablet, Desktop und Smartwatch konsistent aussieht.

Vorschau vs. Preview

Die Landefläche zeigt eine statische Vorschau – Inputs sind nicht beschreibbar, Buttons reagieren nicht, Navigation findet nicht statt. Für eine funktionsfähige Vorschau verwenden Sie die Meta-Funktion Preview: dort läuft die App mit Backend-Anbindung und vollständiger Logik – ohne dass ein Build erforderlich wäre.

Header-, Content- und Footer-Bereich

Beim Anlegen einer View entstehen automatisch drei Bereiche, die Sie auf der Landefläche an entsprechenden Begrenzungslinien erkennen:

Bereich	Position
Header	Oben, sticky – bleibt beim Scrollen sichtbar
Content	Mitte – scrollt bei viel Inhalt
Footer	Unten, sticky – bleibt beim Scrollen sichtbar

Header und Footer akzeptieren nur Bar-Komponenten (Buttons, Labels, Icons, Links, Toolbar-Spacer, Barcode-Scanner-Button). Im Content sind alle Komponenten erlaubt.