Übersicht über den UI-Designer

Nach erfolgreicher Erstellung der Anwendung werden Sie zur Registerkarte „UI Designer“ weitergeleitet.

Der UI-Designer in AppMaster ist benutzerfreundlich gestaltet, sodass Sie mühelos beeindruckende Web-App-Seiten erstellen können.

Über die intuitive Drag-and-Drop-Oberfläche können Sie Webseiten entwerfen und nahtlos mit Inhalten füllen, sodass keine fortgeschrittenen Programmierkenntnisse erforderlich sind.

Der UI-Designer ist in vier Hauptabschnitte unterteilt, mit denen Benutzer interagieren können:

1. Linke Symbolleiste
2. Oberes Panel
3. Bodenplatte
4. Leinwandbereich
5. Eigenschaftenbereich

Linke Symbolleiste

Die Symbolleiste auf der linken Seite bietet Tools zur Strukturierung Ihrer Website. Durch Klicken auf die Symbole oben in dieser Seitenleiste werden die folgenden Bereiche angezeigt:

• Liste der UI-Elemente
• Elementebaum
• Seitenbaum
• Layouts-Baum
• Vermögensverwalter

Liste der UI-Elemente (Verknüpfung: 1 )

Die Liste der UI-Elemente stellt alle Elemente bereit, die durch Ziehen aus dem Panel zum Canvas-Bereich hinzugefügt werden können.

Benutzeroberflächenelemente sind je nach Zweck in Kategorien unterteilt, sodass Sie leichter navigieren und das passende Widget für Ihre App finden können.

Um schnell zu dem Element zu gelangen, können Sie die Suchleiste oben im Bedienfeld verwenden.

Elementbaum (Verknüpfung: 2 )

Über den Elementbaum können Sie alle auf der ausgewählten Seite Ihrer Web-App platzierten Komponenten verwalten und organisieren.

Hier können Sie mit diesen Elementen interagieren:

• Elemente durch Ziehen zwischen Baum verschieben,
• Komponenten umbenennen,
• Ändern Sie den Sichtbarkeitsstatus von Elementen auf der Leinwand (ausblenden/anzeigen).

Verwenden Sie die Suchleiste oben im Bedienfeld für das Schnellsuchelement in der Baumstruktur.

Seitenbaum (Tastenkürzel: 3 )

Mit dem Seitenbaum können Sie die Seiten Ihrer Website organisieren und verwalten. Hier können Sie neue Seiten oder Ordner erstellen.

Im Seitenbaum können Sie Seiten oder Ordner duplizieren oder löschen.

Verwenden Sie die Suchleiste oben im Bedienfeld für die schnelle Suche nach Seiten oder Ordnern in der Baumstruktur.

Layoutliste (Tastenkürzel: 4 )

Der Layoutbaum hilft Ihnen bei der Verwaltung Ihrer Seitenlayouts. Wie im Seitenbaum können Sie Layouts duplizieren oder löschen.

Verwenden Sie die Suchleiste oben im Bedienfeld für das Schnellsuchlayout in der Baumstruktur.

Vermögensverwalter (Tastenkürzel: 5 )

Der Assets Manager erleichtert das Hochladen und Organisieren von Assets (wie Dokumenten, Bildern und Animationen) für die Nutzung Ihrer Website.

Alle Assets, die Sie während der Entwicklung hochladen, werden im Asset Manager gespeichert und können ohne erneutes Hochladen wiederverwendet werden.

Sie können auch alle Assets entfernen, die Sie nicht mehr benötigen.

Obere Bar

Die obere Leiste bietet zusätzliche Ansichtseinstellungen. Von der linken Seite neben der Menüschaltfläche bis nach rechts stehen Ihnen die folgenden Werkzeuge zur Verfügung:

• Aktuelles Dokument: Zeigt die Seite oder das Layout an, an der Sie gerade arbeiten.
• Haltepunkte: Mit den Haltepunktsymbolen können Sie zwischen verschiedenen Haltepunkten wechseln, um eine Vorschau anzuzeigen und zu ändern, wie Ihre Website auf verschiedenen Gerätegrößen angezeigt wird.
• Rückgängig und Wiederherstellen: Mit den Schaltflächen „Rückgängig“ und „Wiederherstellen“ können Sie Aktionen, die Sie im Designer vorgenommen haben, rückgängig machen oder erneut anwenden, z. B. das Anwenden eines Stils oder das Entfernen eines Elements. Außerdem sind Tastenkombinationen verfügbar: zum Rückgängigmachen einer Aktion – CRTL/⌘+Z und zum Wiederherstellen einer Aktion – CTRL/⌘+SHIFT+Z .

Bodenleiste

Im unteren Bereich können Sie die Seitenansicht vergrößern oder verkleinern.

Auf der linken Seite des Bedienfelds können Sie eine benutzerdefinierte Seitenauflösung festlegen, indem Sie die Höhe und Breite Ihrer Leinwand festlegen.

Auf der rechten Seite können Sie die Skala steuern:

• Vergrößern oder verkleinern
• Stellen Sie die Skalierung in Prozent ein
• Stellen Sie die tatsächliche Größe ein
• Passen Sie das aktuelle Fenster an den sichtbaren Bereich an

Leinwand

Die Leinwand ist Ihr interaktiver Arbeitsbereich. Hier können Sie mit den Seitenkomponenten interagieren. Sie können Elemente auswählen, neu positionieren und Inhalte direkt auf der Seite bearbeiten.

Außerdem können Sie Elemente zwischen Seiten und Anwendungen kopieren ( CRTL/⌘+C ) und einfügen ( CRTL/⌘+V ) oder Elemente innerhalb der aktuellen Seite duplizieren ( CRTL/⌘+D ).

Eigenschaftenbereich

Im Eigenschaftenfenster auf der rechten Seite des Designers können Sie das visuelle Erscheinungsbild und Verhalten des ausgewählten Elements, Layouts oder der Seite anpassen.

Das Eigenschaftenfenster besteht aus 4 Hauptfenstern:

• Erscheinungsfeld
• Zusätzliches Optionsfeld (optional)
• Bereich „Medienabfragen“.
• Geschäftslogik-Panel

In der Kopfzeile des Panels können Sie das ausgewählte Element umbenennen, indem Sie auf den Elementnamen klicken, die Beschreibung lesen oder das Element löschen, indem Sie auf das Papierkorbsymbol klicken.

Darstellungsbereich

Über das Darstellungsfenster können Sie auf den angezeigten statischen Inhalt und die Eigenschaften des ausgewählten Elements zugreifen. Sie können diese Werte in die entsprechenden Felder eingeben oder auswählen und die Stile werden sofort auf Ihre Elemente auf der Leinwand angewendet.

Wenn auf der Leinwand keine Elemente ausgewählt sind, werden in diesem Bereich die Einstellungen der aktuellen Seite oder des aktuellen Layouts angezeigt.

Zusätzliches Optionsfeld

Das Fenster „Zusätzliche Optionen“ ist für Elemente gedacht, die zusätzliche Einstellungsdaten oder Optionen erfordern.

Abhängig von der ausgewählten Komponente können Sie die Datenquelle festlegen oder Optionen manuell eingeben.

Bereich „Medienabfragen“.

Im Bereich „Medienabfragen“ können Sie Elementeigenschaften für jeden definierten Haltepunkt überschreiben.

Geschäftslogik-Panel

Das Business Logic Panel stellt alle Auslöser für ein Element bereit und ermöglicht Ihnen die Einrichtung einer Elementinteraktion, wenn der Auslöser ausgelöst wird.