Übersicht des Designers

Das folgende Bild zeigt die Standardsicht des Designers. Hier landen Sie, wenn Sie auf der Übersichtsseite eine Applikation auswählen und öffnen.

Beschreibung der Bereiche

Nr.	Bereich	Beschreibung
1	Komponenten & Templates	Sidebar links – verfügbare Komponenten und gespeicherte Templates
2	View-Tree (Inhalt)	Baumstruktur über den Inhalt der aktuellen View
3	Eigenschaften-Panel	Eigenschaften der ausgewählten Komponente
4	View-Tree (App)	Baumstruktur aller Views in der Applikation
5	Meta-Funktionen	Build, Preview, Speichern, Download, Versionsverlauf
6	Landefläche & Vorschau	Arbeitsfläche und Echtzeit-Vorschau

Zurück zur Übersicht: Über den Zurück-Pfeil oben links neben dem Titel (»mobile builder«) verlassen Sie den Editor und kehren zur App-Übersicht zurück.

Panels anpassen (Größe & Einklappen)

Die gestapelten Panels der linken Spalte (Komponenten & Templates oben, View-Tree unten) und der rechten Spalte (Eigenschaften oben, App-Tree unten) lassen sich an Ihre Arbeitsweise anpassen:

• Größe ändern: Ziehen Sie die Trennlinie zwischen den beiden Panels einer Spalte nach oben oder unten – das eine Panel wird größer, das andere kleiner.
• Einklappen: Über den Chevron-Button oben links in jedem Panel klappen Sie es auf die Tab-Leiste zusammen; das gegenüberliegende Panel der Spalte bekommt dann den ganzen Platz. Ein erneuter Klick klappt es wieder aus.
• Gemerkt: Aufteilung und Einklapp-Zustand werden im Browser gespeichert und beim nächsten Aufruf wiederhergestellt.

Die horizontale Aufteilung der drei Spalten (links / Arbeitsfläche / rechts) lässt sich wie gewohnt über die äußeren Trennlinien verschieben.

Arbeitsablauf

Der typische Bedienablauf bewegt sich zwischen den Bereichen wie folgt:

1. Komponente auswählen in der linken Sidebar (Bereich 1)
2. Per Drag-and-Drop auf die Landefläche (Bereich 6) ziehen
3. Komponente selektieren im View-Tree (Bereich 2) oder direkt auf der Landefläche
4. Eigenschaften anpassen im Eigenschaften-Panel (Bereich 3)
5. Weitere Views anlegen über den App-Tree (Bereich 4)
6. Vorschau starten / App bauen über die Meta-Funktionen (Bereich 5)