Benutzeroberfläche erstellen

Um eine benutzerfreundliche und strukturierte Benutzeroberfläche zu entwerfen, bietet AppMaster Web Designer eine umfangreiche Palette an atomaren UI-Komponenten. Diese Komponenten können auf verschiedene Weise kombiniert und gruppiert werden, um sie an Ihren Zielen und Zielen auszurichten.

AppMaster bietet die folgenden UI-Komponenten:

• Container: Grundlegende Elemente zur logischen Strukturierung und Gruppierung anderer Komponenten.
• Modale und Schubladen: Interaktive Komponenten zum Anzeigen zusätzlicher Informationen oder Aktionen, ohne den aktuellen Bildschirm zu verlassen.
• Komponenten für die Ausgabe dynamischer Werte: Enthält Listen , Raster und Tabellen zur dynamischen Darstellung von Daten.
• Grundlegende UI-Elemente: Wie Schaltflächen , Text und Symbole , die für grundlegende Interaktionen mit der Benutzeroberfläche unerlässlich sind.
• Navigationskomponenten: Einschließlich vertikaler und horizontaler Menüs , Registerkarten und ähnlicher Navigationswerkzeuge.
• Formularelemente: Verschiedene Eingaben und Steuerelemente für Benutzerinteraktion und Datenerfassung.

Regelmäßige Aktualisierungen der Komponentenbibliothek verbessern Ihre Fähigkeit, Webanwendungen effizienter zu entwickeln.

Lassen Sie uns eine Benutzeroberfläche für unsere einfache Taschenrechneranwendung erstellen, um die Möglichkeiten eines Drag-and-Drop-Website-Builders von AppMaster zu demonstrieren. Diese App zeigt das Ergebnis verschiedener mathematischer Operationen basierend auf Eingabewerten an.

Flex-Container

Mit Flex Container können Sie die Ausrichtung und Stapelverwaltung für alle untergeordneten Elemente innerhalb eines Containers einfach verwalten.

Flex Container ist eine Basiskomponente zum Aufbau der Struktur Ihrer Webseite. Mit Flex Container im AppMaster-Web-App-Designer können Benutzer untergeordnete Elemente (Widgets oder Container) flexibel anordnen. Es unterstützt sowohl horizontale als auch vertikale Ausrichtungen und ermöglicht Entwicklern die Erstellung komplexer Layouts, die sich an unterschiedliche Bildschirmgrößen anpassen.

Container hinzufügen

Wir verwenden zwei Hauptcontainer: einen für die Dateneingabe und den anderen für die Anzeige von Berechnungsergebnissen, verpackt in einem gemeinsamen Container.

Fügen Sie zunächst den Flex Container zur Leinwand hinzu, um alle anderen Elemente aufzunehmen.

Im Bedienfeld „Darstellung“ können Sie eine Reihe von Einstellungen erkunden:

• Element-ID: Eine eindeutige Kennung zur Referenzierung des Containers in Geschäftsprozessen.
• Gemeinsame Gruppe: Einstellungen zum Definieren des Standardstatus der Komponente, z. B. Sichtbarkeit und Cursorstil.
• Flex-Child-Gruppe: Bestimmt, wie sich das Element innerhalb einer Flex-Parent-Komponente verhält.
• Layout: Einstellungen zum Anordnen untergeordneter Elemente innerhalb des Containers.
• Größen: Zur Angabe der Abmessungen der Elemente.
• Abstand : Passt den Abstand innerhalb und um das Element an.
• Hintergrund: Optionen für Hintergrundfarben und Ebenen.
• Eckenradius, Ränder, Schatten: Anpassung für Elementkanten, Ränder und Schatteneffekte.
• Tooltip: Fügt einen Tooltip für Hover- oder Fokusaktionen hinzu.

Passen Sie Ihren Hauptcontainer an. Stellen wir beispielsweise „Direction“ auf „Horizontal“ ein und passen Gap , Padding , Corner radius und Borders an.

Fügen Sie als Nächstes einen weiteren Flex-Container in Ihren Hauptcontainer ein, damit das Formular Werte eingeben kann. Stellen Sie die volle Breite ein, um den verfügbaren Platz im übergeordneten Container auszufüllen.

Duplizieren Sie diesen Container (mit CTRL/⌘+D ), um einen separaten Block für die Anzeige der Ergebnisse zu erstellen. Legen Sie die Eigenschaft „Breite“ auf 30 % fest.

Hinzufügen von UI-Elementen

Um mit der Erstellung Ihrer Anwendung fortzufahren, ist es an der Zeit, die erforderlichen UI-Elemente hinzuzufügen.

Formular hinzufügen

Unser Geschäftsprozess erfordert, dass der Benutzer zwei Zahlen eingibt, beide vom Typ Float. Um dies zu ermöglichen, fügen Sie zwei Float-Eingänge und eine Schaltfläche hinzu, um den Berechnungsprozess zu starten.

Ändern Sie die Richtung des Flex-Containers auf der linken Seite in „Vertikal“ und fügen Sie eine Lücke hinzu, damit zwischen den verschachtelten Elementen etwas Platz bleibt. Fügen Sie in diesem Flex-Container einen Input Float für den ersten Wert hinzu, den wir als „X“ bezeichnen:

• Ziehen Sie das Input Float- Element per Drag & Drop in den Container auf der linken Seite.
• Personalisieren Sie das Feld im Bedienfeld „Darstellung“ , indem Sie eine Beschriftung und einen Platzhalter hinzufügen.
• Passen Sie das Erscheinungsbild des Felds genau an das Design Ihrer Anwendung an.

Wählen Sie das hinzugefügte Feld auf der Leinwand aus und duplizieren Sie es mit CTRL/⌘+D . Ändern Sie die Beschriftung und den Platzhalter des duplizierten Felds so, dass sie den zweiten Wert „Y“ darstellen.

Ziehen Sie nun ein Button- Element per Drag & Drop unter die hinzugefügten Felder. Passen Sie im Bedienfeld „Darstellung“ die Schaltfläche so an, dass sie sich über die gesamte Breite erstreckt. Dies kann erreicht werden, indem die Align- Eigenschaft in der Flex Child- Gruppe auf Stretch gesetzt wird.

Geben Sie eine Beschriftung für die Schaltfläche ein und fügen Sie optional ein Symbol hinzu, um ihre optische Attraktivität zu verbessern.

Nach dem Hinzufügen dieser Elemente empfiehlt es sich, sie aus Gründen der Klarheit und leichteren Identifizierung umzubenennen. Dies erleichtert die Bezugnahme auf sie in Ihren Geschäftsprozessen, erhöht die Verständlichkeit und beschleunigt den Entwicklungsprozess.

Ergebnisblock hinzufügen

Auf der rechten Seite des übergeordneten Containers konfigurieren wir einen Bereich zur Anzeige der Ergebnisse nach der Ausführung unseres Geschäftsprozesses. Stellen Sie zunächst die Eigenschaft „Richtung“ dieses Containers auf „Vertikal “ ein und fügen Sie eine kleine Lücke hinzu, um einen sauberen Abstand der Elemente zu gewährleisten. Ändern Sie die Breite auf 30 %.

Fügen Sie in diesem rechten Container einen neuen horizontalen Flex-Container ein und fügen Sie darin ein Symbolelement hinzu, das die Operation darstellt, einen Textblock mit einem Gleichheitssymbol und einen Textblock , in dem das Ergebnis der Operation angezeigt wird. Duplizieren Sie diesen Container viermal und aktualisieren Sie ihn jeweils für unsere definierten mathematischen Operationen.

Passen Sie jedes Element mit dem Erscheinungsbildfenster nach Ihren Wünschen an.

Hinweisblock hinzufügen

Um die Benutzerfreundlichkeit der Benutzeroberfläche zu verbessern, erstellen wir einen Platzhalter, der angezeigt wird, bis Ergebnisse vorliegen. Fügen Sie dazu einen zusätzlichen Flex-Container hinzu, der die Breite des rechten Containers widerspiegelt (30 %), und platzieren Sie darin einen Textblock mit einem beschreibenden Hinweis.

Ein wesentliches Merkmal des Containers mit Ergebnissen ist sein anfänglicher Sichtbarkeitsstatus. Standardmäßig ist der Schalter „Sichtbar“ deaktiviert, sodass er zunächst unsichtbar ist.

Element ausblenden

Wir machen diesen Container erst sichtbar und aktualisieren die Daten, nachdem der Geschäftsprozess ausgeführt und das Ergebnis erhalten wurde. Es ist wichtig, Textblöcken Namen zuzuweisen, um eine einfache Identifizierung bei der Erstellung von Geschäftsprozessen und beim Schreiben von anzuzeigenden Ergebnissen zu gewährleisten.

🎉Gut gemacht! Wir haben die perfekte Benutzeroberfläche für unsere Anwendung erstellt und sind bereit, unseren Elementen Interaktivität hinzuzufügen.