Apps erstellen

Um eine Anwendung zu erstellen, sollten Sie Layouts und Seiten erstellen, diese mit Inhalten füllen und die Web-App-Interaktion einrichten.

Layouts

Zuvor haben wir das Konzept der Layouts eingeführt. Um mit der Layouterstellung zu beginnen, müssen Sie zunächst die Struktur Ihrer Anwendung skizzieren und die zu verwendenden Seitenvorlagen identifizieren.

Wenn Sie etwas verpassen, machen Sie sich keine Sorgen. Sie können die Layoutliste bei Bedarf erweitern.

Layoutliste

Die Layoutliste stellt alle Layouts Ihrer Webanwendung bereit. Hier können Sie verschiedene Vorgänge ausführen und Layouts verwalten.

Um auf die Layoutliste zuzugreifen, wählen Sie die vierte Registerkarte in der linken Symbolleiste der Registerkarte „UI-Designer“ aus oder verwenden Sie die Tastenkombination 4 . Alle Ihre Bewerbungslayouts werden hier angezeigt.

Jede Anwendung muss mindestens ein Layout haben. Wenn Sie eine neue Bewerbung erstellen, werden abhängig von der gewählten Bewerbungsvorlage automatisch ein oder mehrere Layouts erstellt. Einer davon ist als **Standard** markiert.

In der Layout-Liste können Sie die folgenden Aktionen für Layouts durchführen:

• wählen,
• neue hinzufügen,
• umbenennen,
• Duplikat,
• löschen.

Standardlayout

Das Standardlayout wird beim Erstellen einer neuen Seite automatisch aus der Layoutliste ausgewählt. Dies kann jedoch bei Bedarf durch ein anderes Layout ersetzt werden.

Die Verwendung des Standardlayouts erhöht die Entwicklungsgeschwindigkeit. Wir empfehlen daher, das am häufigsten verwendete Layout als Standard zu verwenden. Beachten Sie, dass jeweils nur ein Layout als Standard festgelegt werden kann. Das Überschreiben des Standardlayouts hat keine Auswirkungen auf vorhandene Seiten, es sei denn, das ursprüngliche Layout wird gelöscht.

Das Standardlayout ist in der Layoutliste mit einem blauen Sternsymbol gekennzeichnet.

Neues Layout erstellen

Sie können unterschiedliche Layouts für unterschiedliche Seitentypen entwerfen. Befolgen Sie diese Schritte, um ein neues Layout zu erstellen:

• Drücken Sie CTRL/⌘+L oder öffnen Sie die Layoutliste (Verknüpfung 4 ) in der linken Symbolleiste des UI-Designers und klicken Sie auf die Plus-Schaltfläche in der Kopfzeile des Bedienfelds.
• Geben Sie den Layoutnamen im angezeigten Modal an. Wir empfehlen die Verwendung eines lesbaren Titels, der die Struktur des Layouts widerspiegelt, um eine schnelle Identifizierung bei der Zuweisung von Layouts zu den Seiten zu ermöglichen.
• Layoutvorlage auswählen:
  • Basis: leere Vorlage ohne zusätzliche Elemente, gut für Seiten ohne Navigation, wie Authentifizierungs- oder Fehlerseiten.
  • Seitenleiste links: Vorlage mit Seitenleistenmenü, gut für Admin-Panels, CMS, ERP usw.
  • Top-Menü: Vorlage mit Top-Menü, gut für Websites oder Landingpages.
• Aktivieren Sie die Einstellung „Standardlayout“, wenn dieses Layout als Standard festgelegt werden soll.
• Klicken Sie auf die Schaltfläche „Erstellen“ .

Die Anzahl der Layouts, die Sie erstellen können, ist unbegrenzt.

Layout umbenennen

Um ein Layout umzubenennen, doppelklicken Sie auf den Layoutnamen, nehmen Sie die erforderlichen Änderungen vor und drücken Sie Enter zum Speichern oder Esc , um die Änderungen rückgängig zu machen.

Layout duplizieren

So duplizieren Sie ein Layout zusammen mit seinem Inhalt und seinen Einstellungen:

1. Bewegen Sie den Mauszeiger über das Layout, das Sie duplizieren möchten.
2. Klicken Sie auf das Symbol „Duplizieren“.

Die duplizierten Layouts werden automatisch in der Liste angezeigt, wobei ihren Namen ein Index hinzugefügt wird. Wenn Sie das als Standard festgelegte Layout duplizieren, wird das Quelllayout nicht durch das neu erstellte überschrieben.

Layout löschen

So entfernen Sie das Layout:

1. Bewegen Sie den Mauszeiger über das Layout, das Sie löschen möchten.
2. Klicken Sie auf das Papierkorbsymbol.
3. Löschung bestätigen.

Um das mit Seiten verknüpfte Layout zu löschen, sollten Sie das Layout für alle verknüpften Seiten neu zuweisen, bevor Sie es löschen. Dies kann über das Bestätigungsmodal oder manuell für jede Seite erfolgen.

Um das Standardlayout zu löschen, sollten Sie ein anderes Layout als Standard einrichten.

❗️ Wichtig: Sie können einen Layout-Löschvorgang nicht rückgängig machen.

Layouteinstellungen

Klicken Sie in der Layoutliste auf das Ziellayout, um über die linke Einstellungsseitenleiste auf dessen Einstellungen zuzugreifen.

In der Kopfzeile der Seitenleiste „Einstellungen“ können Sie das ausgewählte Layout umbenennen, indem Sie auf den Namen klicken, oder es löschen.

Sie können hier das ausgewählte Layout als Standard festlegen und alle verlinkten Seiten anzeigen. Um eine verlinkte Seite zu bearbeiten, klicken Sie in der Liste darauf.

Darüber hinaus können Sie eine Geschäftslogik für das Layout erstellen.

Layout-Geschäftslogik

Wählen Sie auf der Registerkarte „Geschäftslogik“ einen Auslöser aus, um eine Aktion festzulegen. Dadurch wird der Geschäftsprozesseditor geöffnet, der sich auf den ausgewählten Auslöser konzentriert.

Hier können Sie einen Aktionsablauf für einen oder mehrere Auslöser erstellen, z. B. die Implementierung der Navigation, das bedingte Ändern von Eigenschaften, das Umschalten der Sichtbarkeit, das Senden von Daten und mehr. Weitere Informationen finden Sie in unserem Leitfaden zum Aufbau eines Geschäftsprozesses.

🔔 Für eine optimale Anwendungsleistung bauen Sie komplexe Geschäftsprozesse auf der Backend-Seite auf.

Layout bearbeiten

Als globale Komponenten und Seitenvorlagen wenden Layouts automatisch alle Änderungen auf alle verknüpften Seiten an.

Um ein Layout zu bearbeiten, wählen Sie das Zielelement in der Layoutliste aus und fügen Sie alle erforderlichen Komponenten aus dem Bedienfeld „UI-Elemente“ hinzu, indem Sie sie per Drag & Drop auf den Leinwandbereich ziehen.

Denken Sie beim Bearbeiten eines Layouts daran, dass die Vorlage eine unveränderliche Seitencontainerkomponente enthält. Dies bestimmt die Platzierung Ihres Seiteninhalts innerhalb der Vorlage. Der Seitencontainer wird grün hervorgehoben und kann im Layout-Bearbeitungsmodus keine inneren Komponenten enthalten. Der Inhalt wird direkt auf der Seite definiert und die Größe des Seitencontainers wird durch die übergeordnete Komponente bestimmt.

Seiten

Nachdem Sie die erforderlichen Layouts erstellt haben, ist der beste Zeitpunkt, mit der Erstellung der Web-App-Seiten zu beginnen. Nachdem Sie die erforderlichen Layouts erstellt haben, ist der beste Zeitpunkt, mit der Erstellung der Web-App-Seiten zu beginnen. Jede Webanwendungsseite stellt Inhalte bereit, die im Webbrowser des Benutzers über die Ziel-URL angezeigt werden.

Seitenbaum

Der Seitenbaum zeigt Ihnen die Struktur Ihrer Website – Ihre Website-Seiten und die Ordner, in denen diese Seiten gespeichert sind. Hier können Sie verschiedene Vorgänge ausführen und Seiten und Ordner organisieren.

Um den Seitenbaum zu öffnen, wählen Sie die dritte Registerkarte in der linken Symbolleiste des UI-Designers aus oder drücken Sie die 3. Hier werden alle Ihre Anwendungsseiten angezeigt.

Jede Bewerbung muss mindestens eine Seite umfassen. Wenn Sie eine neue Bewerbung erstellen, werden abhängig von der gewählten Bewerbungsvorlage bereits eine oder mehrere Seiten erstellt.

Sie können die folgenden Aktionen für Seiten und Ordner ausführen:

• wählen,
• neue Seite oder Ordner hinzufügen,
• umbenennen,
• Verschieben Sie die Seite und die Ordner in den/aus dem Ordner.
• Duplikat,
• löschen.

Indexseite

Die Indexseite ist die Startseite Ihrer Bewerbung. Wenn Ihre Anwendung ausgeführt wird, wird diese Seite zuerst gerendert, sofern Sie keine Weiterleitungen erstellt haben.

Die Indexseite ist im Seitenbaum mit dem Haussymbol gekennzeichnet und kann nicht auf eine andere Seite umgeschaltet werden. Standardmäßig ist diese Seite mit dem automatisch erstellten Standardlayout verknüpft, Sie können es jedoch in den Seiteneinstellungen ändern.

Neue Seite erstellen

So fügen Sie Ihrer Webanwendung eine Seite hinzu:

1. Drücken Sie CTRL/⌘+P oder öffnen Sie den Seitenbaum (Verknüpfung 3 ) in der linken Symbolleiste des UI-Designers und klicken Sie auf die Plus-Schaltfläche in der Kopfzeile des Bedienfelds.
2. Geben Sie die Seiten-URL im angezeigten Modal an.
3. Wählen Sie den übergeordneten Ordner für die Seite aus oder lassen Sie das Feld leer, um die Seite im Stammverzeichnis zu platzieren.
4. Wählen Sie Seitenlayout .
5. Klicken Sie auf die Schaltfläche „Erstellen“ .

💡 Um eine verschachtelte Route zu erstellen, ohne Ordner zu erstellen, geben Sie im Feld „Seiten-URL“ einen vollständigen Pfad zur Zielseite an, z. B. „Einstellungen/Profil“. Das Seitenprofil wird in diesem Fall im Ordner „Einstellung“ verschachtelt erstellt.

Sie können unbegrenzt viele Seiten und Ordner für Ihre Webanwendung erstellen.

🔔 Mit AppMaster Studio erstellte Web-Apps generieren App-Routing nach Seiten-URL. Verwenden Sie daher bei der Seitengenerierung die Seiten-URL im richtigen Format und zum besseren Verständnis eine benutzerfreundliche URL.

Neuen Ordner erstellen

Sie können Ordner erstellen, um die Navigation zu organisieren und den richtigen Router für die Seiten zu erstellen. So erstellen Sie einen neuen Ordner:

• Drücken Sie CTRL/⌘+SHIFT+P oder öffnen Sie den Seitenbaum (Verknüpfung 3) in der linken Symbolleiste des UI-Designers und klicken Sie in der Kopfzeile des Bedienfelds auf die Schaltfläche „Ordner“.
• Geben Sie den Ordnernamen im angezeigten Modal an.
• Wählen Sie bei Bedarf den übergeordneten Ordner aus, um einen verschachtelten Router zu erstellen
• Klicken Sie auf die Schaltfläche „Erstellen“ .

UI-Elemente

Die Benutzeroberfläche Ihrer App besteht aus Elementen: Eingabefeldern, Schaltflächen, Bildern, Kontrollkästchen, Kalendern, Bildern und Symbolen, die jeweils einem bestimmten Zweck dienen.

AppMaster bietet einen visuellen Drag-and-Drop-Editor, mit dem Sie Elemente direkt auf der Seite auswählen und platzieren können, anstatt Code zu schreiben und ihn sofort in der Vorschau anzuzeigen.

Elemente hinzufügen

So fügen Sie der Leinwand ein Element hinzu:

1. Öffnen Sie das Bedienfeld „UI-Elemente“ mit einer Liste von UI-Elementen (Verknüpfung 1 ).
2. Wählen Sie das erforderliche Element aus oder verwenden Sie die Suchleiste.
3. Ziehen Sie das ausgewählte Element auf die Seite oder die Layout-Leinwand.

Um das Ziehelement innerhalb des Ziels zu platzieren, legen Sie das Element über den Zielelementen ab.

Um ein Element vor oder nach einem Element hinzuzufügen, ziehen Sie das Element über den Rand des Ziels, bis ein Trennzeichen angezeigt wird.

Der Teiler hängt von der Richtung des übergeordneten Containers ab:

• Wenn die Richtung des übergeordneten Containers Vertical ist , werden Elemente von oben oder unten hinzugefügt.
• Wenn die Richtung des übergeordneten Containers Horizontal ist , werden Elemente von links oder rechts hinzugefügt.

Elemente anpassen

Jede Komponente, die Sie der Leinwand hinzufügen, ist mit einem umfassenden Satz anpassbarer Einstellungen ausgestattet. Mit Elementeigenschaften können Sie sowohl das Erscheinungsbild des Elements als auch die angezeigten Daten verwalten.

So konfigurieren Sie ein Element:

• Wählen Sie die Zielkomponente auf der Leinwand aus.
• Navigieren Sie zum Bedienfeld „Darstellung“, der ersten Registerkarte in der rechten Seitenleiste.
• Wählen Sie im Bedienfeld das spezifische Einstellungselement aus, das Sie ändern möchten.
• Geben Sie Ihre bevorzugten Werte in die dafür vorgesehenen Felder ein.

Die Leinwand reagiert in Echtzeit und zeigt Ihre Anpassungen sofort an.

Um zusätzliche Hilfestellung zu erhalten, bewegen Sie den Mauszeiger kurz über eine Einstellung, um einen Tooltip mit einer kurzen Beschreibung der Funktion dieser Einstellung anzuzeigen.

Über diese interaktiven Funktionen hinaus erweitert AppMaster die Anpassungsmöglichkeiten durch seine speziellen Geschäftsprozessblöcke „Set Properties“ und „Set Data“ . Diese Blöcke bieten eine erweiterte Zugriffsebene, sodass Sie die Einstellungen jeder Komponente in Ihrer Webanwendung programmgesteuert ändern können.