Una UX migliorata con AJUI_Progressbar

Vi è mai capitato di eseguire un’azione e di non sapere se cliccare di nuovo o continuare ad aspettare? Non viene fornito alcun feedback, anche se l’applicazione sta eseguendo un’azione in background? Forse l’azione richiede un certo tempo per restituire un risultato? Come forse sapete, 4D fornisce già un componente integrato di barra di avanzamento che rende il tempo di esecuzione più tollerabile, ma se volete qualcosa con un design più simile a quello del web, continuate a leggere, perché questo è ciò che vi offre AJUI_Progressbar!

Che cos’è AJUI_Progressbar

AJUI ProgressBar è un componente sviluppato con 4D 17 R3, basato sulla tecnologia SVG e 4D Worker. Consente di generare barre di avanzamento in modo molto semplice. Il componente crea un insieme di proprietà per definire le caratteristiche e la resa visiva delle barre di avanzamento. Sono presenti anche formule per accedere ai valutatori e ai metodi per la generazione delle barre di avanzamento.

Il componente contiene due tipi di istanze, che rappresentano due varianti specifiche delle barre di avanzamento disponibili. Il primo design è uno stile lineare e il secondo è circolare. Ogni variante ha proprietà specifiche per il suo design.

Alle barre possono essere assegnati valori numerici che vanno da 0 a 100, ma poiché il testo visualizzato può essere personalizzato, è possibile rappresentare visivamente altri valori. Il componente utilizza Worker per aggiornare la pagina durante la generazione delle barre di avanzamento. Il Worker ha anche un altro utilizzo: fornire la possibilità di gestire le animazioni.

Il componente offre diversi metodi per personalizzare e manipolare la barra di avanzamento, utilizzando un oggetto e delle funzioni. Fornisce anche due metodi per recuperare istanze per ogni tipo di barra di avanzamento:

• Nuova AJUI_ProgressBar: Barra di avanzamento lineare.
• Nuova AJUI CircularProgressBar: Barra di avanzamento circolare.

Entrambi i metodi restituiscono oggetti contenenti le proprietà della barra, i loro valori predefiniti e le formule per manipolarle.

Gli altri metodi disponibili hanno il prefisso “HDI” (How do I). Questi metodi consentono di richiamare moduli contenenti esempi di utilizzo delle funzionalità del componente.

Impostazione di una barra di avanzamento lineare

• Per prima cosa, aggiungete un oggetto immagine a un modulo. Questo oggetto sarà utilizzato per ospitare la barra di avanzamento. È possibile aggiungere più oggetti immagine se si desidera generare più barre di avanzamento contemporaneamente.
• Il secondo passo consiste nel creare un’istanza della barra di avanzamento. Si può scegliere di lanciare uno dei due metodi descritti sopra. Idealmente, l’oggetto restituito dal metodo scelto dovrebbe essere memorizzato nella variabile “Form”. Si consiglia inoltre di aggiungere un livello all’oggetto “Form”.

Una volta fatto ciò, aggiungere il nome dell’oggetto immagine all’istanza. Per i test, si consiglia di modificare il valore della progressione (default: 0) e di attivare le animazioni. Per generare la barra di progressione, basta lanciare la formula “launch” corrispondente.

Se si sono aggiunti più oggetti immagine, ripetere il secondo passaggio per ciascuno di essi (un’istanza per oggetto immagine).

Ecco come si presenta il codice per una barra di avanzamento lineare:

AJUI_Progressbar in profondità

Ulteriori dettagli e un tutorial passo-passo sull’uso e la configurazione del componente sono disponibili qui. Sia che si scelga di utilizzare AJUI_Progressbar o il componente di barra di avanzamento integrato in 4D, si potrà rassicurare l’utente che qualcosa sta effettivamente accadendo. Buon divertimento!