Arbeitsabläufe

Und hier sind wir beim Schlüsselmoment der Erstellung von Webanwendungen angelangt. Denn alles, was wir bisher getan haben, war nur die Erstellung eines Bildes. Das ist vielleicht ganz nett, aber ziemlich nutzlos. Jetzt müssen wir die Hauptsache tun. Es zum Leben erwecken und eine Reaktion auf unsere Aktionen hinzufügen.

Jede Komponente hat eine Workflow Registerkarte für diese Aufgabe. Darin können Sie Geschäftsprozesse erstellen und Bedingungen (Auslöser) für deren Start definieren. Lassen Sie uns einen solchen Geschäftsprozess für die Schaltfläche Calculate erstellen.

Auslöser

Die Erstellung eines Geschäftsprozesses ähnelt sehr dem, was wir bereits in Modul 4 gesehen haben, als wir einen Geschäftsprozess für das Backend erstellt haben. Es gibt eine gemeinsame Arbeitsfläche, Blöcke, die dort hinzugefügt werden, und Verbindungen zwischen ihnen bestimmen die Reihenfolge der Aktionen. Ein wichtiger Unterschied ist, dass der Front-End-Workflow viele verschiedene Blöcke zum Starten eines Geschäftsprozesses hat. Dies sind die Auslöser, die den Geschäftsprozess starten. Die Auslöser selbst können für jede Komponente unterschiedlich sein (eine Schaltfläche hat einen Klick, eine Tabelle hat eine Datenaktualisierung und eine Liste hat eine Auswahl einer Option), aber die allgemeine Logik der Arbeit ist in jedem Fall die gleiche. Ein Ereignis tritt ein, und dieses Ereignis startet den entsprechenden Geschäftsprozess.

Entscheiden wir uns für einen allgemeinen Plan. Was müssen wir tun, wenn die Schaltfläche angeklickt wird?

• Die X- und Y-Werte herausfinden. Holen Sie sie aus den entsprechenden Eingabefeldern.
• Starten Sie einen Endpunkt für Berechnungen und übergeben Sie X- und Y-Parameter an ihn.
• Den Ergebniscontainer sichtbar machen.
• Tragen Sie das Berechnungsergebnis in die erforderlichen Felder von Label ein.
  

Geschäftsprozessblöcke

Der erste Schritt erfordert einen InputFloat Get Properties Block. Er liest die aktuellen Werte der Komponente, nicht nur die Eingaben des Benutzers, sondern auch andere Einstellungen (z. B. die Einstellungen für das Erscheinungsbild oder den zulässigen Wertebereich). Wir müssen uns ValueGenau dies enthält die vom Benutzer eingegebenen Daten. Für jeden Wert aus dem Eingabefeld benötigen wir zwei Blöcke (für X und für Y). In ihnen müssen Sie den Component ID Wert bei der Eingabe eingeben. Wenn Sie bei der Erstellung nicht vergessen haben, den Namen der Blöcke anzugeben, ist es nicht schwer, die gewünschte Komponente zu finden und auszuwählen.

Der nächste Schritt besteht darin, den Endpunkt zu starten. Hier findet die Verbindung zwischen dem Front-End und dem Back-End statt, und der Befehl für die Berechnungen wird vom Browser an den Server übermittelt. Jeder Endpunkt unserer Anwendung wird als separater Block dargestellt. Sie müssen nur den gewünschten auswählen und ihn verbinden. Dieser Endpunkt wurde mit einer GET Methode und eine module4-basic URL während des fünften Moduls zugewiesen. Er wird unter diesem Namen in der Liste der Blöcke erscheinen - Server request GET /module4-basic/

Im Gegensatz zu Komponenten müssen Endpunkte ihre Endpoint ID nicht einstellen (sie ist standardmäßig korrekt eingestellt). Sie müssen nur auf die im vorherigen Schritt erhaltenen Eingaben X und Y angewendet werden.

Die nächste Aufgabe besteht darin, den Ergebniscontainer sichtbar zu machen. Verwenden Sie dazu den Container Update Properties Block. Im Block selbst wählen Sie die ID des gewünschten Containers und setzen Visible = true.

Als letztes müssen noch die 5 Ergebniselemente aus dem Array auf die entsprechenden Komponenten der Webanwendung verteilt werden. Da wir wissen, dass das Ergebnis immer in einer streng definierten Reihenfolge kommen soll, müssen wir nur noch nacheinander das Element mit dem gewünschten Index abholen und seinen Wert der Komponente Label zuweisen. Zu diesem Zweck verwenden wir die Array Element Blöcke (mit einem Index von 0 bis 4), toString (zur Umwandlung von Float Daten in String), und Label Update Properties um den Text Label zu ändern und das Ergebnis anzuzeigen.

Sie haben vielleicht bemerkt, dass es zwei Blockoptionen für die Aktualisierung der Eigenschaften einer beliebigen Komponente gibt - Update Properties und Set Properties. Der Unterschied zwischen ihnen ist derselbe wie zwischen den Optionen Patch und Put Methoden in der Rest-API. Die erste ändert nur die explizit angegebenen Eigenschaften, während die zweite alle überschreibt.

Endergebnis

Damit ist die Erstellung des Geschäftsprozesses abgeschlossen. Sie können das Endergebnis speichern, veröffentlichen und überprüfen.

Wenn alles richtig gemacht wurde, sollte das Endergebnis wie folgt aussehen: