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 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. Während des Drag-Vorgangs zeigt die Landefläche, wohin die Komponente fällt:

Hervorhebung	Bedeutung
Blauer Rahmen	Der Container unter dem Mauszeiger nimmt die Komponente auf – Drop ist erlaubt
Keine Hervorhebung	Kein gültiges Ziel – beim Loslassen erscheint ein Hinweis, die Komponente wird nicht hinzugefügt

Auf der Landefläche selbst lassen sich platzierte Komponenten nicht verschieben. Zum Umsortieren nutzen Sie den View-Baum – per Drag-and-Drop innerhalb des Baums oder über die Pfeil-Buttons im Eigenschaften-Panel (Zum übergeordneten Element, Zum nächsten (nach oben), Zum nächsten (nach unten)).

Selektion

Ein Klick auf eine Komponente selektiert sie:

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

Eine Selektion können Sie auch aus dem View-Baum 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.

Landefläche vs. Ausführen

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 Ausführen (Vorschau): dort läuft die App mit Backend-Anbindung und vollständiger Logik – ohne dass ein Build erforderlich wäre.

Kopfzeile, Inhalt und Fußzeile

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

Bereich	Position
Kopfzeile (header)	Oben, sticky – bleibt beim Scrollen sichtbar
Inhalt (content)	Mitte – scrollt bei viel Inhalt
Fußzeile (footer)	Unten, sticky – bleibt beim Scrollen sichtbar

Kopfzeile und Fußzeile akzeptieren nur Bar-Komponenten: Button, CheckBox, ComboBox, Icon, Input, Label, Link, StepInput, Tag, Text, Time Picker, Barcode (Scanner-Button) und Spacer. Im Inhalt sind alle Komponenten erlaubt.