JavaScript  »  Guide  »  Guida MooTools 

Come abbiamo imparato dalla precedente lezione, possiamo implementare nella classe base nuove funzionalità in fase di scrittura (tramite la proprietà Implements) oppure in un secondo momento (tramite il metodo implement). Le Class Extras sono proprio tre classi che possono essere implementate all'interno di una qualsiasi superclasse e che ne estendono le potenzialità con funzionalità e compiti ben precisi.

La classe Chain

La classe Chain, implementata in MooTools nelle superclassi Fx e Request, è forse la meno utilizzata del gruppo, ma non per questo la meno utile. I metodi che questa classe implementa nella superclasse sono chain, callChain e clearChain. In particolare il metodo chain permette di eseguire un numero variabile di funzioni, ognuna al completamento della precedente. Vediamo come creare un'animazione strutturata in più fasi tramite il metodo chain:

var fx = new Fx.Tween('myElement', 'opacity');
fx.start(1,0).chain(
    function(){ this.start(0,1); }, // prima animazione
    function(){ this.start(1,0); }, // seconda animazione
    function(){ this.start(0,1); } // terza animazione
);

La classe Events

La classe Events, implementata in molte altre classi avanzate, svolge un ruolo fondamentale all'interno di MooTools. Grazie ad essa, infatti, possiamo impostare, azionare e rimuovere eventi personalizzati alle nostre classi. La logica di un evento impostato in una classe è leggermente diversa da quella di un evento impostato ad un elemento.

Tramite Events possiamo impostare i nostri eventi personalizzati sia nelle opzioni (successivamente in questa lezione vedremo come utilizzarle tramite l'ultima Class Extras, Options) che tramite il metodo addEvent fornito dalla classe Events. Per azionare l'evento occorrerà richiamare il metodo fireEvent e passare il nome dell'evento con opzionalmente gli argomenti e il ritardo in ms. Vediamo un esempio:

// nel metodo 'complete' viene azionato l'evento denominato 'complete'
var myClass = new Class({
    Implements: Events,
	
    initialize: function(element){
        // compi le operazioni...
    },
	
    complete: function(){
        this.fireEvent('complete');
    }
});

var class = new myClass('el');

// aggiungiamo un riferimento alla funzione 'myFunction' che verrà azionata quando viene richiamato l'evento 'complete'  
class.addEvent('complete', myFunction);

La classe Options

L'ultima Class Extras presente nativamente in MooTools è Options. Essa permette di automatizzare l'impostazione delle opzioni nelle nostre istanze. Le opzioni di una classe sono molto importanti poiché permettono di personalizzare e diversificare il compito da essa offerto. Pensiamo all'opzione duration della classe Fx, ad esempio. Se impostiamo una durata pari a 100 ms, l'effetto sarà molto differente rispetto ad uno che ha una durata pari a 6000ms.

Un'altra nota importante è la seguente: se Options ed Events sono implementati in una classe, qualsiasi opzione il cui nome inizia con il prefisso 'on' seguito da una lettera maiuscola (ad esempio 'onStart') può essere impostato come evento da azionare (fireEvent('start') richiamerà la funzione impostata con l'opzione onStart).

L'unico metodo che offre la classe Options è setOptions, che di solito richiamato nel metodo initialize, setta le opzioni desiderate sovrascrivendole a quelle di default.

// impostiamo le opzioni desiderate nella classe Fx.Tween. Il metodo setOptions è utilizzato internamente 
// nella funzione costruttore initialize.
var fx = new Fx.Tween('element', {
	duration: 2000,
	transition: 'bounce:out',
	link: 'chain',
	fps: 80
});

// in una classe personalizzata richiamiamo il metodo setOptions per settare le opzioni che 
// passeremo al costruttore
var myClass = new Class({

	options: { /* lista di opzioni... */ },
	
	initialize: function(element, options) {
		this.element = element;
		this.setOptions(options);
	}

});

Altri articoli

Altre guide

Altre newsletter