Mootools - cap 2 - gli Elements

Gli Elements
I Browser implementano quello che è conosciuto come DOM(Document Object Model), Javascript non è direttamente legato ai browser (falsa opinione comune) che sono solo il luogo dove gli sviluppatori solitamente usano questo linguaggio per accedere a questa struttura. I browser stessi d’altro canto, estendono il linuaggio di base aggiungendo metodi e proprietà agli oggetti Javascript ( nativi del linguaggio stesso) che sono la rappresentazione dei tag html utilizzati per definire la grafica di una pagina web(e non solo).



I metodi nativi degli oggetti Element, come molti altri metodi nativi di Javascript, lasciano a desiderare e non pemettono la scrittura di un codice pulito e ben strutturato in oltre, per le motivazioni enunciate in precedenza, dipendono direttamente dai browser in cui il codice viene eseguito limitandone la portabilità.

MooTools, il cui scopo è quello di mettere un web developer nella condizione di produrre un codice riusabile e di ingegnerizzare un mondo in cui la buona progettazione è un argomento tabù, mette a disposizione un tipo di oggetto Element e molti metodi che estendono le potenzialità base del linguaggio offrendo la possibilità di migliorare la qualità del lavoro prodotto.

Istanziare un Element MooTools
Istanziamo un element che rappresenta un tag img

var myImg = new Element('img',
{
src: '/foo.jpg',
alt: 'this is foo',
'class': 'fooClass',
events: {
click: function(){ alert('click!');}
},
styles: {
border: '1px solid blue',
marginTop: '10px'
}
});

la sintassi è molto piu simile a quella di un linguaggio OO class-based, all’element istanziato vengono associati in fase di creazione anche altri attributi come gli styles ed events che vedremo in seguito.

Al costruttore viene passato come parametro, una stringa identificativa del tag html che l’element deve rappresentare e un oggetto Javascript che rappresenta le options dell’element cioè gli attributi aggiuntivi che ne descrivono lo stile e la reazione a particolari eventi, quindi possiamo generalizzare e scrivere

Var element=new Element(
‘HtmlTag’,
{
Src:’bla bla’
// insomma oggetto javascript che ha come attributi
// gli attributi da passare al nuovo element al
// momento dell’istaziazione
//options del nuovo element
},
Styles
{
//stile dell’element che si sta istanziando
} );

la dichiarazione di un elemento può essere anche divisa dalla sua caratterizzazione usando i metodi degli Element definiti da mootools come generalizzazione di quelli forniti dal linguaggio.

Element.set(property,value);
metodo che permette di settare qualsiasi proprietà di un element accettando in ingresso parametri nella forma chiave valore.

Element.setStyle(attribute,style);
metodo che permette di modificare lo stile associato ad un particolare Element.

Element.get(property);
Element.getStyle(attribute);
Relativi metodi get che tornano ripettivamente il valore di una proprietà associata all’element o di un attributo css;
grazie all’utilizzo di questi metodi possiamo creare e modificare interamente la struttura di un element.
In aggiunta ai metodi precedenti nella libreria è presente anche il metodo

Element.erase(property);
che permette di cancellare un attributo associato in precedenza ad un element.

Quello che è stato fatto fino ad ora riguarda come istanziare e modificare la struttura di un element, questo però non avrà un effettivo valore fino a quando non sarà inserito nel dom per questo analizziamo i metodi che MooTools mette a disposizione per adempiere a questo compito.


Injection and Removal

Element.inject(newElement,position);
Questo metodo sposta o inserisce l’oggetto di invocazione nella posizione specificata,inoltre prevede la possibilità di specificare la posizione di inserimento:

• "before" inserisce l’elemento come fratello precedente;



• "after" inserisce l’elemento come fratello successivo;



• "top" inserisce l’elemento come padre;



• "bottom" inserisce l’elemento come ultimo figlio.

Element.grab, Element.adopt assolvono allo stesso compito con piccole differenze quindi per la loro trattazione si rimanda alla documentazione ufficiale.

Element.empty();
elimina tutti i figli dell’ elemento su cio è invocato.

Element.destroy();
elimina l’elemento dal dom e ne libera lo spazio di memoria occupato.

Element.dispose();
rimuove l’elemento dalla posizione occupata senza però rimuoverlo dalle strutture di memoria permettendo un suo futuro reinserimento.

Ora conosciamo gli strumenti principali per creare,modificare e eliminare Elements, nei prossimi post analizzaremo caratteristiche piu avanzate degli Elements che mootools ci mette a disposizione come Events e Storage.