Przepływy pracy

I tu dotarliśmy do kluczowego momentu tworzenia aplikacji internetowych. Przecież wszystko, co do tej pory robiliśmy, było tylko tworzeniem obrazka. Całkiem ładny, zapewne, ale całkiem bezużyteczny. Teraz musimy zrobić najważniejszą rzecz. Ożywić go i dodać reakcję na nasze działania.

Każdy komponent posiada Workflow zakładkę do tego zadania. W niej można tworzyć procesy biznesowe i definiować warunki (wyzwalacze) ich uruchomienia. Stwórzmy taki proces biznesowy dla przycisku Calculate.

Wyzwalacze

Tworzenie procesu biznesowego jest bardzo podobne do tego, co widzieliśmy już w module 4, kiedy tworzyliśmy proces biznesowy dla backendu. Jest wspólne płótno, dodawane tam bloki i połączenia między nimi określają kolejność działań. Istotną różnicą jest to, że przepływ pracy dla frontendu ma wiele różnych bloków służących do uruchamiania procesu biznesowego. Są to wyzwalacze, które uruchamiają proces biznesowy. Same wyzwalacze mogą być różne dla każdego komponentu (przycisk ma kliknięcie, tabela ma aktualizację danych w niej, a lista ma wybór jakiejś opcji), ale ogólna logika pracy jest taka sama w każdym przypadku. Następuje zdarzenie, a to zdarzenie uruchamia odpowiedni proces biznesowy.

Zdecydujmy się na jakiś ogólny plan. Co musimy zrobić, gdy przycisk zostanie kliknięty:

• Znaleźć wartości X i Y. Pobrać je z odpowiednich pól wejściowych.
• Uruchomić punkt końcowy dla obliczeń i przekazać do niego parametry X i Y.
• Sprawić, aby kontener wyników był widoczny.
• Wynik obliczeń umieść w wymaganych polach Label.
  

Bloki procesów biznesowych

W pierwszym kroku wymagany jest InputFloat Get Properties block. Odczytuje on aktualne wartości elementu, nie tylko to, co wprowadził użytkownik, ale także inne ustawienia (na przykład ustawienia wyglądu czy dozwolony zakres wartości). Musimy uzyskać. Value, a dokładnie to zawiera dane wprowadzone przez użytkownika. Każda wartość z jego pola wejściowego i potrzebujemy do tego dwóch bloków (dla X i dla Y). W nich należy wybrać Component ID wartość na wejściu. Jeśli nie zapomniałeś podać ich nazwy podczas tworzenia, to znalezienie i wybranie potrzebnego komponentu nie będzie trudne.

Kolejnym krokiem jest uruchomienie punktu końcowego. To tutaj następuje połączenie między front-endem a backendem, a polecenie wykonania obliczeń jest przekazywane z przeglądarki do serwera. Każdy punkt końcowy naszej aplikacji jest reprezentowany jako osobny blok. Wystarczy wybrać ten, który jest nam potrzebny i podłączyć go. Ten punkt końcowy został przypisany do GET method i module4-basic URL podczas piątego modułu. Pod taką nazwą będzie występował na liście bloków -. Server request GET /module4-basic/

W przeciwieństwie do komponentów, punkty końcowe nie muszą ustawiać swojej strony Endpoint ID (domyślnie jest ona ustawiona poprawnie). Konieczne jest jedynie zastosowanie do danych wejściowych X i Y uzyskanych w poprzednim kroku.

Kolejnym zadaniem jest uczynienie kontenera wynikowego widocznym. Aby to zrobić, użyj bloku Container Update Properties bloku. W samym bloku należy wybrać ID żądanego kontenera i ustawić. Visible = true.

Ostatnią rzeczą, która pozostała do zrobienia jest rozdysponowanie 5 elementów wyniku z tablicy do odpowiednich komponentów aplikacji internetowej. Wiemy, że wynik powinien zawsze pojawiać się w ściśle określonej kolejności, więc wystarczy, że będziemy kolejno wybierać element o pożądanym indeksie i przypisywać jego wartość do komponentu Label. Aby to zrobić, używamy m.in. Array Element bloki (o indeksie od 0 do 4), toString (do konwersji Float dane na String), oraz Label Update Properties aby zmienić tekst Label i wyświetlić wynik.

Być może zauważyłeś, że istnieją dwie opcje bloków służące do aktualizacji właściwości dowolnego komponentu -. Update Properties oraz Set Properties. Różnica między nimi jest taka sama jak między Patch i Put w Rest API. Pierwsza z nich zmienia tylko jawnie określone właściwości, natomiast druga nadpisuje je wszystkie.

Wynik końcowy

Na tym kończy się tworzenie procesu biznesowego. Można zapisać, opublikować i sprawdzić wynik końcowy.

Jeśli wszystko zostało wykonane poprawnie, to wynik końcowy powinien wyglądać tak: