MooTools è un framework Javascript orientato agli oggetti, compatto e modulare.
Le sue caratteristiche lo hanno reso negli ultimi tempi uno dei più utilizzati e apprezzati nel panorama delle librerie Javascript di ultima generazione. In questo articolo, che è solo introduttivo, analizzeremo alcune di esse, riservandoci di affrontare nello specifico le sue potenzialità in altri appuntamenti.
La base OOP (Object-oriented_programming) di MooTools offre il vantaggio della semplicità di utilizzo e del ri-utilizzo del codice. Ad esempio, tramite una sola riga di codice è possibile fare in modo che un elemento sia trascinabile sulla pagina (il cosiddetto Drag), impostando sempre nello stesso oggetto tutte le opzioni desiderate:
new Drag.Move (‘mioElemento', opzioni);
La prossima volta che vorremo rendere un altro elemento trascinabile dall'utente, basterà ri-utilizzare la riga di codice precedente, che potrà essere personalizzata in base alle esigenze. Non occorre quindi, creare funzioni ogni volta differenti in base al tipo di applicazione.
La compattezza del codice è una caratteristica comune nelle librerie moderne, e MooTools non manca certo all'appello sfruttando appieno i suoi vantaggi in ogni componente, in modo da ridurre il più possibile le dimensioni dei file singoli e di conseguenza del file completo.
MooTools offre anche modularità non solo nell'utilizzo del codice, ma anche in fase di download.
Questa caratteristica è fondamentale e lo differenzia da molti altri framework moderni.
Se infatti il peso complessivo del framework nella versione v.1.1 è di 42kb, gli autori non ci obbligano a scaricare tutto il pacchetto completo, ma ci forniscono la possibilità di scegliere i componenti desiderati in base alle nostre esigenze.
Se ad esempio in un'applicazione vogliamo creare delle richieste AJAX al server, non ci serve scaricare i componenti Tips o Drag , ma ci basterà scegliere solo gli strumenti AJAX necessari.
Successivamente vogliamo aggiungere degli effetti grafici alla stessa applicazione? Niente paura, scarichiamo i componenti adatti e li inseriamo in un altro elemento script.
Ma le caratteristiche interessanti di MooTools non si fermano qui.
Tutti i metodi e le classi presenti nel codice sono cross-browser. Per la precisione, sono compatibili con Internet Explorer 6 e 7, Mozilla Firefox, Safari, Opera e Camino.
Su questo aspetto non sono mancate alcune critiche che esprimono il desiderio di una compatibilità maggiore soprattutto con IE e le sue versioni precedenti la sesta. Questo può essere considerato uno dei pochi punti deboli di MooTools, anche se non lo condivido. Personalmente so quanto sia difficile sviluppare codice cross-bowser e quanto il modello di eventi proprietario di Microsoft possa creare non pochi problemi; se poi aggiungiamo anche le differenze tra le varie versioni arriviamo alla conclusione che la compatibilità offerta da MooTools è quanto serve per un'applicazione moderna.
Il framework, inoltre, permette agli sviluppatori di estendere il codice con funzionalità
personalizzate, grazie alla sua flessibile base orientata agli oggetti, davvero molto simile ai modelli "originali" del C++, Java e PHP5.
Un esempio (mi si perdoni l'autoreferenzialità), è la mia libreria MOO.RD, in cui ho mantenuto intatte tutte le caratteristiche originali aggiungendo diverse potenzialità al codice nativo di MooTools e di Javascript e offrendo un vasto kit di effetti grafici.
Sfruttando l'oggetto Class, che altro non fa che utilizzare la proprietà prototype, nativa di ogni oggetto Javascript, ma in versione object oriented, è possibile aggiungere metodi e sottoclassi ad ogni oggetto, Class, String, Array e cosi via.
Questo sistema offre grandi vantaggi, sia perché permette di racchiudere un gruppo di funzioni in un oggetto personalizzato e utilizzarlo all'occorrenza (modularità sempre in primo piano), sia perché l'approccio è molto simile alla OOP vero e proprio.
Infatti, gli oggetti Class dispongono dei metodi extend e implement, che, se sfruttati a dovere, permettono di creare gerarchie di oggetti molto complesse.
Ma MooTools non è certo solo un framework "fai da te", e infatti offre molti componenti interessanti pronti all'uso, riguardanti in particolar modo gli effetti grafici.
La maggioranza degli utenti che si avvicinano ai framework non sono interessati ai meccanismi o alla bontà del codice, ma guardano prettamente "cosa si può realizzare", badando soprattutto agli effetti grafici.
Gli autori hanno ad esempio inserito tra i componenti disponibili per il download un ottimo effetto Accordion, effetti di scrolling assortiti, effetti basati sui componenti Drag che sfruttano le proprietà CSS riguardanti la posizione degli elementi, e ancora i cosiddetti Tips e le liste ordinabili chiamate Sortables.
Un esempio per partire
Per verificare sul campo quanto detto, abbiamo preparato un semplice esempio. Si tratta di un cosiddetto Kwick Menu, una tipologia di menu di navigazione a slide (scorrimento se preferite) utile e accattivante, ad esempio, per evidenziare le principali sezioni di un sito sulla home page. Come tale è in effetti utilizzato sulla home page della stessa MooTools. Nel pacchetto zip allegato a questo articolo troverete tutti i file e le immagini utilizzate per la sua realizzazione.
Qui ci interessa evidenziare i punti chiave. Iniziamo dalla sezione head della pagina, in cui troviamo due elementi script:
<script src="mootools.v1.1.js" type="text/javascript"></script>
<script src="kwick_MENU.js" type="text/javascript"></script>
Il primo richiama il file mootools.v1.1.js, il pacchetto di base della libreria che contiene tutti i componenti necessari alla realizzazione del menu selezionati nella pagina dei download cui si accennava in precedenza. Per la precisione sono stati inseriti tutti i componeneti Core
tutti i componenti Class,
tutti i Native,
element.event di Element,
tutti i componenti di Effects tranne Fx.Scroll.
Il secondo richiama lo script che inizializza il menu. Ecco il codice:
window.addEvent('load', function() {
var szNormal = 117, szSmall = 100, szFull = 219;
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i) {
kwick.addEvent("mouseenter", function(event) {
var o = {};
o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
kwicks.each(function(other, j) {
if(i != j) {
var w = other.getStyle("width").toInt();
if(w != szSmall) o[j] = {width: [w, szSmall]};
}
});
fx.start(o);
});
});
$("kwicks").addEvent("mouseleave", function(event) {
var o = {};
kwicks.each(function(kwick, i) {
o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
});
fx.start(o);
})
});
Per quanto riguarda la parte HTML, la struttura del menu è così definita:
<ul id="kwicks">
<li id="kwick_1" class="kwick">
<span> </span>
</li>
<li id="kwick_2" class="kwick">
<span> </span>
</li>
<li id="kwick_3" class="kwick">
<span> </span>
</li>
<li id="kwick_4" class="kwick">
<span> </span>
</li>
<li id="kwick_5" class="kwick">
<span> </span>
</li>
</ul>
<span class="clr"><!-- spanner --></span>
Non stupitevi degli span vuoti all'interni dei list item. Nel nostro caso abbiamo deciso di usare come contenuto del menu delle immagini, che vengono inserite tramite CSS.
Al caricamento della pagina vengono selezionati tutti gli elementi (li) con classe kwick e contenuti nella lista (ul) con id kwicks. La presentazione di tali elementi è gestita da un CSS incorporato nell'esempio che potete consultare direttamente.
Ad ognuno di questi elementi vengono assegnati due eventi: all'entrata del mouse (evento personalizzato mouseenter) e all'uscita del mouse (evento personalizzato mouseleave).
Quando il mouse passa sopra ad uno di questi elementi, viene azionato l'effetto impostato in precedenza con il costruttore Fx.Elements, che permette di applicare un determinato effetto agendo sulle proprietà indicate ad una collezione di elementi passatagli come primo argomento, i kwicks, appunto.
L'elemento che riceve il passaggio del mouse, espande la propria proprietà width a 219px, mentre per tutti gli altri kwick facenti parte della stessa collezione la larghezza viene diminuita a 100px.
Quando il mouse esce dall'area di un elemento della collezione passata a Fx.Elements, ad ogni elemento di quest'ultima viene impostata la proprietà width a 117px, ovvero il valore iniziale di ogni elemento.
Questo è possibile grazie all'uso della proprietà each, che agendo sugli array o sulle collezioni di elementi od oggetti (che sono di per se degli array) permette di compiere determinate operazioni su ognuno degli elementi della collezione.
Per ora è tutto. In questa introduzione abbiamo analizzato i punti di forza di MooTools e dato brevemente un descrizione delle sue caratteristiche principali, con qualche accenno alla sintassi del codice. In prossimi articoli vedremo in modo pratico cosa si può realizzare con questa libreria, analizzando gli oggetti e i metodi principali che il codice che ci mette a disposizione.
