Esempio di ProgressBar

Introduzione

In questo articolo vediamo come integrare un componente di tipo progressbar utilizzando Progress.js.
Vogliamo ottenere questo risultato:

Definizione nell'IDE

Innanzitutto nel progetto abbiamo creato una libreria client chiamata ID Progress Bar e definito proprietà, metodi ed eventi:

Le proprietà progress, duration ed easing servono per impostare la percentuale che deve essere mostrata inizialmente e con quale animazione, mentre le altre proprietà servono per configurare il layout del componente.
L'evento OnClick viene notificato lato server quando si clicca sul componente, mentre l'evento OnProgress viene notificato durante l'animazione per informare che è cambiato il valore della proprietà progress.
Il metodo animate serve per impostare le proprietà progress e duration in un'unica chiamata (normalmente usato dopo l'apertura della videata quando si vuol cambiare lo stato di avanzamento).

Poi è stata creata una videata al cui interno è stata trascinata la libreria client.
Nell'evento Load viene inizializzato il componente impostandone le proprietà di layout e il valore iniziale di progress.

Classe wrapper lato client

Nella custom è stata copiata la libreria progressbar.js scaricata dal sito di riferimento ed è stato creato un file javascript IDProgressBar.js contenente il codice della nostra classe wrapper.

Nota: Non abbiamo modificato i file Desktop.htm e Desktop_sm.htm perché il file IDProgressBar.js viene automaticamente caricato mentre il file progressbar.js viene caricato, all'apertura della videata, dalla classe wrapper IDProgressBar.js.

Nella classe javascript è stato definito il costruttore nel quale sono stati impostati alcuni valori predefiniti per alcune proprietà ed è stata definita l'estensione della classe CustomElement. E' stata definita la property progress per intercettare la modifica della proprietà da parte del server. Nel setter, qualora il componente non sia ancora stato realizzato, viene memorizzato il valore in una variabile temporanea this._progress, altrimenti viene aggiornato subito il componente grafico.

Caricamento progressbar.js

E' stato definito il metodo Init nel quale viene caricato il file javacript progressbar.js e viene invocato subito in modo da caricare il javascript il prima possibile (vedi chiamata IDProgressBar.Init();. Per essere sicuri di caricare il file una volta sola è stata usata la variabile statica IDProgressBar.inited. Se ci sono più istanze a video, infatti, non è necessario che tutte carichino il file progressbar.js.

Realizzazione del componente

E' stato definito il metodo Realize nel quale viene costruito l'elemento tramite le classi ed i metodi della libreria "nativa" progressbar.js.
Dopo aver creato l'oggetto viene impostato il valore leggendo la proprietà this.progress. Se la proprietà duration è maggiore di 0 viene fatto in modo animato.
Da ultimo, se lato server è stato implementato l'evento OnClick l'oggetto grafico viene reso cliccabile, viene intercettato il click e, quando arriva, viene notificato al server. Questo può essere utile per risparmiare messaggi verso il server se quest'ultimo non è interessato ad alcuni eventi.

Infine è stato definito il metodo animate per poter cambiare con animazione il valore attuale di progress notificando l'evento OnProgress ogni 250ms. Vengono anche aggiornate le proprietà progress e duration lato server.