Le due lezioni precedenti dedicate alla classe Element ci hanno fornito gli strumenti di base fondamentali per compiere operazioni con gli elementi tramite MooTools. Ma i metodi offerti da Element sono davvero molti e permettono di effettuare qualsiasi operazione di editing del DOM di una pagina. Vediamo ora come mettere in pratica alcuni di essi:
// otteniamo il riferimento al nostro elemento
var el = $('myElement');
// inseriamo l'elemento 'el' in un elemento parente, in modo che risulti il primo elemento figlio
el.inject(myParentElement, 'top');
// ora otteniamo tutti i suoi elementi figli
var children = el.getChildren();
// cloniamo l'elemento in una nuova variabile
var clone = el.clone();
// infine rimuoviamolo dal DOM
el.dispose();
E' inoltre importante ricordare che ogni metodo della classe Element restituisce l'istanza che rappresenta il nostro elemento, permettendoci dunque di "incatenare" le varie chiamate:
el.setStyle('color', 'blue').inject(myParentElement).dispose();
Element.Storage
Dalla versione 1.2, MooTools ci offre un nuovo e potente strumento per effettuare le nostre elaborazioni con gli elementi: l'oggetto Element.Storage. Immaginate che ogni elemento della nostra pagina abbia a disposizione un deposito (uno storage appunto) nel quale possiamo immagazzinare qualsiasi variabile, oggetto o valore e recuperarlo all'occorrenza. I metodi che abbiamo a disposizione per lavorare con lo storage degli elementi sono store e retrieve: il primo permette di salvare una variabile nello storage, il secondo di recuperarne il valore o il riferimento. Vediamo subito un esempio pratico:
// salviamo un semplice valore con la keyword 'initWidth' che rappresenta il valore della larghezza del nostro elemento
el.store('initWidth', el.getStyle('width').toInt());
// successivamente recuperiamo questo valore ed effattuiamone l'alert
alert(el.retrieve('initWidth'));
Ovviamente è possibile salvare all'interno dello storage qualsiasi cosa vogliamo: array,oggetti, stringhe, numeri, riferimenti a funzioni, istanze, Hash e cosi via. Nel successivo esempio viene salvata un'istanza della classe Fx.Tween per creare un'animazione e successivamente azionata:
// salviamo l'istanza
el.store('myEffect', new Fx.Tween(el, {duration: 4000}));
// recuperiamola
var fx = el.retrieve('myEffect');
// successivamente azioniamola...
fx.start('width', [20, 200]);
Utilizzando l'Element.Storage siamo sicuri che i fastidiosi Memory Leak prodotti dai browser (specialmente da Internet Explorer) siano azzerati o ridotti al minimo. Questo permette di risparmiare l'occupazione della memoria e di aumentare la produttività della nostra applicazione. L'Element.Storage è dunque uno strumento molto utile, il cui utilizzo è fortemente consigliato nella gran parte delle applicazioni in cui abbiamo la necessità di lavorare con gli elementi ed i valori che siano in qualche modo ad essi collegati: una volta provato non si abbandonerà più.