Bauteil-Design

Es wäre möglich, Elemente einfach auf die leere Fläche der Leinwand zu setzen, aber es ist besser, gleich alles ordentlich zu machen. Deshalb werden wir zunächst den Arbeitsbereich gestalten. Fügen wir eine Komponente (Container) in die Arbeitsfläche ein, in der wir alle anderen Elemente platzieren werden. Nach dem Hinzufügen sollten Sie auf das Zahnradsymbol klicken und mit der Konfiguration dieses Containers fortfahren.

Container-Einstellungen

Schauen wir uns die verfügbaren Einstellungen an.

• Name - den Namen, unter dem wir in den Geschäftsprozessen der Anwendung auf diesen Container verweisen können. Zum Beispiel, wenn wir einen Geschäftsprozess erstellen wollen, um einige Einstellungen dieses Containers zu ändern.
• Direction - die Richtung, in der die Elemente innerhalb des gegebenen Containers angeordnet werden sollen. Horizontal, wenn Sie sie in einer Reihe hintereinander anordnen wollen, oder umgekehrt, vertikal, wenn die Elemente untereinander angeordnet werden sollen.
• Wrap - Einstellung der Ausgabe der Elemente. Sollen sie in der gleichen Zeile stehen (nowrap), oder können sie umbrochen werden (wrap).
• Alignment - wie die Elemente im Container ausgerichtet werden sollen (separate Einstellung für horizontale und vertikale Ausrichtung).
• Size - Größe des Containers. Sie kann als Prozentsatz des verfügbaren Platzes oder als streng festgelegte Größe in Pixeln festgelegt werden.
• Max Width -die maximal zulässige Breite (falls sie nicht streng festgelegt ist und je nach Inhalt variiert).
• Margin/Padding - der Einzug von den Containergrenzen. Extern bzw. intern.
• Image, Gradient or Overlay (Background color) - die Möglichkeit, den gewünschten Hintergrund einzustellen. Sie können eine bestimmte Farbe (oder eine Kombination aus verschiedenen Farben mit einem Farbverlauf) oder ein Hintergrundbild auswählen.
• Border - Auswahl des Rahmens und seines Aussehens (Farbe, Dicke, Abrundungsradius).
• Visible - Sichtbarkeit des Elements (sowie aller verschachtelten Elemente).

Die ausgewählten Einstellungen sind auf dem Screenshot zu sehen. Natürlich können Sie experimentieren und sie ändern, um Ihr eigenes Design zu wählen.

Fügen wir dem erstellten Container einen weiteren hinzu. Wir werden die notwendigen Eingabefelder hinzufügen. Stellen Sie es auf vertikal, mittig ausgerichtet, 40% Breite und links padding-left (padding-left 20px).

Komponenten der Anwendung

Als Nächstes fügen wir die Komponenten selbst zum Container hinzu. Unser Geschäftsprozess akzeptiert zwei Zahlen des Typs float. Um sie einzugeben, müssen Sie zwei Input Komponenten (float), eine Schaltfläche (Button), die den Berechnungsprozess starten wird, und eine kleine visuelle Anpassung, um ihre Label.

Fügen wir einen weiteren Block hinzu, in dem wir angeben, was wir im Allgemeinen zu berechnen beabsichtigen (Addition, Subtraktion usw.). Wir stellen die Breite auf 30% ein und ordnen die Elemente vertikal, zentriert und rechtsbündig an (end/center). Fügen wir dem Container selbst 5 Komponenten von Label hinzu und ändern wir deren Text sofort in den gewünschten Text.

Der letzte Schritt in der visuellen Gestaltung ist das Hinzufügen eines weiteren Containers zur Anzeige des Berechnungsergebnisses. Wir fügen ihn in Analogie zum vorherigen Container hinzu, legen aber die Ausrichtung nach rechts mit einem kleinen Padding auf der linken Seite fest. Die Besonderheit dieses Containers ist, dass er zunächst unsichtbar ist (der Schalter Visible ist ausgeschaltet). Wir schalten ihn in dem Moment ein, in dem wir das Ergebnis der Berechnungen haben. Wir fügen 5 Komponenten Label hinzu und brauchen nicht einmal ihren Text zu ändern, da der Block immer noch unsichtbar ist (die Hauptsache ist, dass wir ihre Name so einstellen, dass Sie das notwendige Element bei der Erstellung von Geschäftsprozessen identifizieren können).

Wenn alles richtig gemacht wurde, werden wir im Webdesigner folgendes Ergebnis sehen:

Und dies in der veröffentlichten App: