ProgressBar | Development – Part 2
Molto bene, spero che fino a qui sia tutto chiaro. Siamo finalmente arrivati alla parte in cui occorre letteralmente dare vita al nostro nuovo componente, andando a definire di fatto una semplice funzione che andrà ad impostare la larghezza della del “fillElement” e il valore percentuale associato all’interno del “textElement” in corrispondenza del valore impostato. Continuate quindi a leggere per rimanere assolutamente basiti dalla semplicità con cui è ottenibile questo risultato.
Diamogli Vita!
A questo punto abbiamo già steso le basi del nostro componente, abbiamo infatti i parametri di configurazione e gli elementi HTML necessari al suo funzionamento. Come vi ho spiegato nell’articolo precedente, non occorre più definire le funzioni di get e set per tutti i parametri di configurazione che andiamo a definire, perché sarà il framework stesso ad andarle a creare automaticamente per noi, ma allora, vi chiederete voi, come andiamo ad aggiornare il “fillElement” non appena viene impostato un valore diverso? Beh, la domanda sorge spontanea 
. Quello che ancora non sapete, è che automaticamente, non appena viene richiamata la funzione set di un parametro di configurazione, verrà automaticamente richiamata anche la funzione update. Prima di spiegavi nel dettaglio questo concetto, diamo un’occhiata al codice della funzione in oggetto:
/**
* @class Ext.tux.ProgressBar
* @extend Ext.Component
* @author Andrea Cammarata
*/
Ext.define('Ext.tux.ProgressBar', {
extend: 'Ext.Component',
alternateClassName: 'Ext.ProgressBar',
xtype: 'progressbar',
config: {
/**
* @cfg {Number} maxValue Il valore massimo raggiungibile
* dalla ProgressBar.
* @accessor
*/
maxValue: 100,
/**
* @cfg {Number} value Il valore iniziale ProgressBar.
* @accessor
*/
value: 0
},
template: [
{
tag: 'div',
className: Ext.baseCSSPrefix + 'progressbar',
reference: 'progressBarElement',
children: [
{
tag: 'span',
className: Ext.baseCSSPrefix + 'progress-value',
reference: 'textElement'
},
{
tag: 'div',
className: Ext.baseCSSPrefix + 'progress-fill',
reference: 'fillElement'
}
]
}
],
/**
* Aggiorna il valore all'interno del textElement.
* @param {Number} value Il nuovo valore percentuale da impostare.
* @private
*/
updateValue: function(value) {
var me = this,
maxValue = this.getMaxValue();
//Viene reimpostato il valore se minore di 0
if (value < 0) {
value = 0;
/* Viene reimpostato il valore se maggiore di quello
* massimo consentito impostato nella configurazione */
}else if (value > maxValue){
value = maxValue;
}
//Aggiornamento del valore percentuale all'interno del textElement
me.textElement.setHtml(value + '%');
/* Viene richiamata la funzione di aggiornamento
* addetta ad impostare la larghezza del fillElement. */
me.upadateProgress(value);
},
/**
* Aggiorna la dimensione del fillElement.
* @param {Number} value Il nuovo valore percentuale impostato.
* @private
*/
upadateProgress: function(value){
var me = this;
//Calcolo della larghezza del fillElement
value = (value * 100) / me.getMaxValue();
//Aggiornamento della larghezza del fillElement
me.fillElement.setStyle('width', value + '%');
}
});
Eccoci qua! Cominciamo con il dire che, come avrete potuto sicuramente notare, sono state aggiunte due nuove funzioni al nostro componente e, come leggete dai commenti, queste sono private, ovvero che non dovranno mai essere richiamate al di fuori del componente stesso. Come abbiamo detto poco fa, il framework si preoccuperà automaticamente di richiamare la funzione update del parametro di configurazione subito dopo aver richiamato quella di impostazione valore (set). Quindi, ricapitoliamo: se per ipotesi avessimo definito un parametro di configurazione “cloud” (non mi piacciono i nomi dei personaggi Walt Disney quindi userò quelli di Final Fantasy 
, verranno automaticamente definite le funzioni getCloud e setCloud, che saranno pubbliche e quindi accessibili anche all’esterno del componente stesso al fine di reperire ed impostare il valore del parametro stesso. Inoltre, non appena richiamata la funzione “setCloud” verrà automaticamente richiamata la funzione updateCloud, che sarà privata e quindi non accessabile al di fuori del componente, ma che dovrà essere definita manualmente al fine di consentirci la gestione dei vari elementi che compongono il componente stesso. Quindi direi che non ci manca proprio niente . Ma andiamo ad esaminare nel dettaglio le due nuove funzioni appena definite. La funzione updateValue come vi ho appena spiegato verrà richiamata automaticamente all’impostazione del valore specificato, quindi dobbiamo andare a gestire il ridimensionamento dell’elemento di riempimento della ProgressBar. A tal proposito, alla riga 66, noterete la seguente riga di codice:
me.textElement.setHtml(value + '%');
tramite questa semplice istruzione, verrà infatti impostato il contenuto html dello span corrispondente al “textElement” che abbiamo definito poco fa all’interno del template del componente. Vi faccio appunto notare come “textElement” sia il medesimo nome assegnato al parametro di configurazione “reference”, definito per l’elemento in questione. Il framework quindi, non solo a creato per noi l’elemento Html all’interno della pagina, ma ci ha anche reso disponibile una variabile di referenza, che ci permetterà di accedere direttamente a tale elemento. Ovviamente la stessa logica è applicata anche per tutti gli altri elementi definiti. Fantastico non vi pare? Vi faccio inoltre notare come alla riga 54, venga utilizzata la funzione getMaxValue automaticamente generata, al fine di prelevare il valore del parametro di configurazione “maxValue” che abbiamo definito. Su questo funzione quindi non aggiungerei altro in quanto mi sembra tutto abbastanza chiaro. Vengono infatti effettuati alcuni controlli sul nuovo valore che dovrà essere aggiornato al fine di evitare impostazioni fuori range, dopodiché viene aggiornato, come spiegato, il valore percentuale all’interno del “textElement”, ed infine richiamata l’altra nuova funzione “updateProgress” appena definita. Lo scopo di questa funzione è molto semplice: Viene infatti semplicemente calcolato il valore percentuale in corrispondenza del valore passato alla funzione stessa ed il maxValue impostato nella configurazione del componente e reperito tramite la funzione getter automaticamente creata getMaxValue. Infine, dopo aver calcolato tale valore, questo viene usato al fine di impostare il valore percentuale di larghezza che dovrà essere utilizzato dal fillElement, che, ricordiamo, è l’elemento addetto appunto a visualizzare la percentuale di avanzamento della nostra ProgressBar. Molto bene, a questo punto abbiamo creato tutte le funzioni base che permetteranno al componente di funzionare correttamente, a questo punto quindi, passiamo oltre, ed andiamo a definire tutti gli stili che la compongono utilizzando COMPASS, SASS e CSS3. Seguitemi quindi nel prossimo tutorial e scopriamo insieme come poterla rendere graficamente accattivante. La ProgressBar dovrà infatti essere, proprio come disse il grande Steve Jobs a Cordell Ratzlaff in merito alle ScrollBars di OS X, “bella a tal punto da volerla leccare”
