Flux de travail

Et nous voilà arrivés au moment clé de la création d'applications web. Après tout, tout ce que nous avons fait jusqu'à présent n'a été que la création d'une image. Plutôt mignon, probablement, mais plutôt inutile. Maintenant, nous devons faire l'essentiel. Le faire revivre, et ajouter une réaction à nos actions.

Chaque composant dispose d'un Workflow onglet pour cette tâche. Dans celui-ci, vous pouvez créer des processus métier et définir des conditions (déclencheurs) pour leur lancement. Créons un tel processus de gestion pour le bouton Calculate.

Déclencheurs

La création d'un processus métier est très similaire à ce que nous avons déjà vu dans le module 4 lorsque nous avons créé un processus métier pour le backend. Il y a un canevas commun, des blocs qui y sont ajoutés, et les connexions entre eux déterminent la séquence des actions. Une différence importante est que le flux de travail frontal a beaucoup de blocs différents pour démarrer un processus d'affaires. Ce sont les déclencheurs qui lancent le processus d'entreprise. Les déclencheurs eux-mêmes peuvent être différents pour chaque composant (un bouton a un clic, un tableau a une mise à jour des données et une liste a un choix d'une option), mais la logique générale du travail est la même dans tous les cas. Un événement se produit, et cet événement lance le processus métier correspondant.

Décidons d'un plan général. Que devons-nous faire lorsque le bouton est cliqué :

• Trouver les valeurs X et Y. Les récupérer dans les champs de saisie correspondants.
• Lancer un point final pour les calculs et lui passer les paramètres X et Y.
• Rendre visible le conteneur de résultats.
• Mettez le résultat du calcul dans les champs obligatoires de Label.
  

Blocs de processus métier

La première étape nécessite un bloc InputFloat Get Properties Le bloc Il lit les valeurs actuelles du composant, non seulement ce que l'utilisateur a saisi mais aussi d'autres paramètres (par exemple, les paramètres d'apparence ou la plage de valeurs autorisée). Nous devons obtenir Valuece bloc contient exactement les données saisies par l'utilisateur. Chaque valeur provient de son champ de saisie et nous avons besoin de deux blocs pour cela (pour X et pour Y). Dans ces blocs, vous devez sélectionner la valeur Component ID valeur à l'entrée. Si vous n'avez pas oublié de préciser leur nom lors de la création, il ne sera pas difficile de trouver et de sélectionner le composant requis.

L'étape suivante consiste à lancer le point de terminaison. C'est là qu'a lieu la connexion entre le front-end et le back-end, et que la commande de calcul est transmise du navigateur au serveur. Chaque point de terminaison de notre application est représenté par un bloc distinct. Il suffit de sélectionner celui dont vous avez besoin et de le connecter. Ce point final s'est vu attribuer une GET et un module4-basic URL au cours du cinquième module. Il se trouvera sous ce nom dans la liste des blocs. Server request GET /module4-basic/

Contrairement aux composants, les endpoints n'ont pas besoin de définir leur Endpoint ID (il est défini correctement par défaut). Il suffit de l'appliquer à l'entrée X et Y obtenue à l'étape précédente.

La tâche suivante consiste à rendre visible le conteneur de résultats. Pour ce faire, utilisez le bloc Container Update Properties . Dans le bloc même, sélectionnez le ID du conteneur souhaité et mettez Visible = true.

La dernière chose qui reste à faire est de distribuer les 5 éléments de résultat du tableau aux composants correspondants de l'application Web. Nous savons que le résultat doit toujours venir dans un ordre strictement défini, il nous suffit donc de prendre séquentiellement l'élément avec l'index souhaité et d'attribuer sa valeur au composant Label. Pour ce faire, nous utilisons les blocs Array Element (avec un indice de 0 à 4), toString (pour convertir Float données en String), et Label Update Properties pour modifier le texte Label et afficher le résultat.

Vous avez peut-être remarqué qu'il existe deux options de bloc pour la mise à jour des propriétés de n'importe quel composant, à savoir Update Properties et Set Properties. La différence entre elles est la même qu'entre les options de bloc Patch et Put dans l'API Rest. La première ne modifie que les propriétés explicitement spécifiées, tandis que la seconde les écrase toutes.

Résultat final

La création du processus d'entreprise est ainsi terminée. Vous pouvez enregistrer, publier et vérifier le résultat final.

Si tout a été fait correctement, le résultat final doit ressembler à ceci :