Werkstromen

En hier zijn we aangekomen bij het sleutelmoment van het maken van webapplicaties. Immers, alles wat we tot nu toe hebben gedaan was alleen maar het maken van een plaatje. Best leuk, waarschijnlijk, maar behoorlijk nutteloos. Nu moeten we het belangrijkste doen. Het nieuw leven inblazen, en een reactie toevoegen aan onze acties.

Elk onderdeel heeft een Workflow tabblad voor deze taak. Daarin kunt u bedrijfsprocessen aanmaken en voorwaarden (triggers) definiëren voor de lancering ervan. Laten we zo'n bedrijfsproces maken voor de knop Calculate.

Triggers

Het maken van een bedrijfsproces lijkt erg op wat we al zagen in module 4, toen we een bedrijfsproces voor de backend maakten. Er is een gemeenschappelijk canvas, blokken die daar worden toegevoegd, en verbindingen daartussen bepalen de volgorde van de acties. Een belangrijk verschil is dat de front-end workflow veel verschillende blokken heeft voor het starten van een bedrijfsproces. Dit zijn de triggers die het bedrijfsproces starten. De triggers zelf kunnen voor elk onderdeel verschillend zijn (een knop heeft een klik, een tabel heeft een gegevensupdate in zich, en een lijst heeft een keuze uit een of andere optie), maar de algemene logica van het werk is in elk geval hetzelfde. Er vindt een gebeurtenis plaats, en deze gebeurtenis start het bijbehorende bedrijfsproces.

Laten we een algemeen plan opstellen. Wat moeten we doen als er op de knop wordt geklikt:

• Zoek de X en Y waarden. Haal ze uit de corresponderende invoervelden.
• Start een eindpunt voor berekeningen en geef er X- en Y-parameters aan door.
• De resultaatcontainer zichtbaar maken.
• Zet het rekenresultaat in de vereiste Label velden.
  

Bedrijfsprocesblokken

De eerste stap vereist een InputFloat Get Properties blok. Die leest de huidige waarden van het onderdeel, niet alleen wat de gebruiker heeft ingevoerd, maar ook andere instellingen (bijvoorbeeld de instellingen voor het uiterlijk of het toegestane waardenbereik). We moeten Valueprecies de gegevens bevatten die de gebruiker heeft ingevoerd. Elke waarde uit zijn invoerveld en daarvoor hebben we twee blokken nodig (voor X en voor Y). Daarin moet de Component ID waarde bij de invoer. Als u bij het maken niet bent vergeten hun naam op te geven, zou het niet moeilijk zijn de gewenste component te vinden en te selecteren.

De volgende stap is het starten van het eindpunt. Hier vindt de verbinding plaats tussen het front-end en het back-end, en wordt de opdracht voor de berekeningen van de browser naar de server gestuurd. Elk eindpunt van onze toepassing wordt voorgesteld als een afzonderlijk blok. U hoeft alleen maar degene te selecteren die u nodig hebt en deze te verbinden. Dit eindpunt kreeg een GET methode en een module4-basic URL tijdens de vijfde module. Het zal onder deze naam staan in de lijst van blokken -. Server request GET /module4-basic/

In tegenstelling tot componenten, hoeven endpoints hun Endpoint ID niet in te stellen (het is standaard correct ingesteld). Het is alleen nodig om de in de vorige stap verkregen invoer X en Y toe te passen.

De volgende taak is het zichtbaar maken van de resultatencontainer. Hiervoor gebruikt u het Container Update Properties blok. Selecteer in het blok zelf de ID van de gewenste container en stel in Visible = true.

Het laatste wat we nog moeten doen is de 5 resultaatelementen uit de array verdelen over de overeenkomstige componenten van de webapplicatie. We weten dat het resultaat altijd in een strikt gedefinieerde volgorde moet komen, dus we hoeven alleen maar het element met de gewenste index op te halen en de waarde ervan toe te wijzen aan de component Label. Daartoe gebruiken we de Array Element blokken (met een index van 0 tot 4), toString (om te converteren Float gegevens naar String), en Label Update Properties om de tekst Label te wijzigen en het resultaat weer te geven.

U hebt misschien gemerkt dat er twee blokopties zijn voor het bijwerken van de eigenschappen van een component - Update Properties en Set Properties. Het verschil daartussen is hetzelfde als tussen de Patch en Put methoden in de Rest API. De eerste wijzigt alleen de expliciet opgegeven eigenschappen, terwijl de tweede ze allemaal overschrijft.

Eindresultaat

Hiermee is de creatie van het bedrijfsproces voltooid. U kunt het eindresultaat opslaan, publiceren en controleren.

Als alles correct is gedaan, dan zou het eindresultaat er zo uit moeten zien: