Flussi di lavoro

E qui siamo arrivati al momento chiave della creazione di applicazioni web. Dopo tutto, tutto ciò che abbiamo fatto finora è stato solo creare un'immagine. Molto carina, probabilmente, ma praticamente inutile. Ora dobbiamo fare la cosa principale. Ravvivarla e aggiungere una reazione alle nostre azioni.

Ogni componente ha una Workflow per questo compito. In essa è possibile creare processi aziendali e definire condizioni (trigger) per il loro avvio. Creiamo un processo aziendale di questo tipo per il pulsante Calculate.

Trigger

La creazione di un processo aziendale è molto simile a quanto già visto nel modulo 4, quando abbiamo creato un processo aziendale per il backend. Esiste un canvas comune, i blocchi che vi vengono aggiunti e le connessioni tra di essi determinano la sequenza delle azioni. Una differenza importante è che il flusso di lavoro del front-end ha molti blocchi diversi per avviare un processo aziendale. Questi sono i trigger che avviano il processo aziendale. I trigger stessi possono essere diversi per ogni componente (un pulsante ha un clic, una tabella ha un aggiornamento di dati e un elenco ha una scelta di qualche opzione), ma la logica generale del lavoro è la stessa in ogni caso. Si verifica un evento e questo evento avvia il processo aziendale corrispondente.

Decidiamo un piano generale. Cosa dobbiamo fare quando il pulsante viene cliccato:

• Trovare i valori X e Y. Prelevarli dai campi di input corrispondenti.
• Avviare un endpoint per i calcoli e passargli i parametri X e Y.
• Rendere visibile il contenitore dei risultati.
• Inserite il risultato del calcolo nei campi richiesti di Label.
  

Blocchi di processi aziendali

Il primo passo richiede un blocco InputFloat Get Properties ...che legge i valori correnti del componente. Esso legge i valori correnti del componente, non solo quelli inseriti dall'utente, ma anche altre impostazioni (ad esempio, le impostazioni di aspetto o l'intervallo di valori consentito). Abbiamo bisogno di ottenere Valueesattamente questo contiene i dati inseriti dall'utente. Ciascun valore del campo di input e abbiamo bisogno di due blocchi per questo (per X e per Y). In essi, è necessario selezionare il Component ID valore in ingresso. Se non si è dimenticato di specificare il loro nome al momento della creazione, non sarà difficile trovare e selezionare il componente richiesto.

Il passo successivo consiste nel lanciare l'endpoint. È qui che avviene la connessione tra il front-end e il back-end e il comando di calcolo viene trasmesso dal browser al server. Ogni endpoint della nostra applicazione è rappresentato come un blocco separato. È sufficiente selezionare quello di cui si ha bisogno e collegarlo. A questo endpoint sono stati assegnati un GET e a module4-basic URL durante il quinto modulo. Si troverà con questo nome nell'elenco dei blocchi -. Server request GET /module4-basic/

A differenza dei componenti, gli endpoint non devono impostare il loro Endpoint ID (è impostato correttamente per impostazione predefinita). È necessario solo applicare agli input X e Y ottenuti nel passaggio precedente.

Il prossimo compito è rendere visibile il contenitore dei risultati. Per farlo, utilizzare il blocco Container Update Properties . Nel blocco stesso, selezionare ID del contenitore desiderato e impostare Visible = true.

L'ultima cosa da fare è distribuire i 5 elementi del risultato dell'array ai componenti corrispondenti dell'applicazione web. Sappiamo che i risultati devono sempre arrivare in un ordine rigorosamente definito, quindi dobbiamo solo prendere in sequenza l'elemento con l'indice desiderato e assegnare il suo valore al componente Label. Per farlo, utilizziamo i blocchi Array Element (con un indice da 0 a 4), toString (per convertire Float i dati in String) e Label Update Properties per modificare il testo di Label e visualizzare il risultato.

Si sarà notato che ci sono due opzioni di blocco per aggiornare le proprietà di qualsiasi componente Update Properties e Set Properties. La differenza tra le due opzioni è la stessa che esiste tra le opzioni Patch e Put nell'API Rest. Il primo modifica solo le proprietà esplicitamente specificate, mentre il secondo le sovrascrive tutte.

Risultato finale

Questo completa la creazione del processo aziendale. È possibile salvare, pubblicare e controllare il risultato finale.

Se tutto è stato fatto correttamente, il risultato finale dovrebbe apparire come questo: