MooTools 1.2 - Compatibilità

Prima di addentrarci nell'universo delle nuove meccaniche, tecniche e logiche offerte dalla versione 1.2 di MooTools, è opportuno capire cosa è cambiato e cosa invece è rimasto intattto rispetto alla precedente major release.

Come accennato nei tutorial precedenti, tutto ciò che avete apprezzato con le versioni antecedenti è ancora saldamente disponibile, ma migliorato e potenziato sotto tutte le componenti. I maggiori ostacoli potrebbero essere rappresentati dai cambiamenti di alcuni namespace molto famosi, come quelli della classe Fx, o dalla variazione di alcuni argomenti necessari a classi e funzioni. Ma, come sottolineato da Valerio Proietti nell'intervista che ci ha rilasciato, sono state modifiche necessarie per rendere la struttura del framework ancora più solida ed elastica. Proprio nell'intervista ho rivolto a Valerio diverse domande riguardo alla compatibilità: nella sesta domanda, in seconda pagina, vengono elencate tutte le novità degne di nota della nuova versione, mentre nella domanda successiva in terza pagina troviamo i consigli ufficiali per migrare alla 1.2.

Compatibility.js

Tra questi ultimi troviamo il file compatibility.js che può essere incluso in aggiunta a MooTools. Esso garantisce una media retro-compatibilità con parecchie funzionalità delle versioni precedenti: selezionando l'opzione Include Compatibility with previous versions nella pagina del download il file in questione verrà automaticamente aggiunto.

Cambiamenti incisivi

Vi ricordo di visitare la nuova documentazione ufficiale prima di passare all'analisi dei cambiamenti. Essa offre uno strumento molto potente per comprendere al meglio le meccaniche del framework: ogni classe o metodo è riportato con relativi parametri, opzioni, valori restituiti e brevi esempi di funzionamento.

Namespace

Come ho accennato qualche riga sopra, alcuni namespace sono stati modificati. Le classi Fx.Base, Fx.Style ed Fx.Styles sono diventate rispettivamente Fx, Fx.Tween ed Fx.Morph.

Le classi XHR, Ajax e JSON.Remote sono ora Request, Request.HTML e Request.JSON.

L'oggetto window che permetteva di scoprire il tipo di browser utilizzato è stato sostituito dal ben più potente Hash Browser, che contiene tutte le informazioni relative non soltanto al nome del browser, ma anche al tipo di versione, al sistema operativo ed alle possibili features (XPath ad esempio).

I file "core" necessari al corretto funzionamento di tutto il framework sono ora degli oggetti di tipo Native ed ereditano alcuni metodi importantissimi come implement e alias.

Funzioni Core

Oltre alle molte funzioni core (contrassegnate dal simbolo "$" iniziale) presenti nelle precedenti versioni, ora ne abbiamo disposizione di nuove molto utili.

Tra queste troviamo:

• $arguments, che permette di creare una funzione che restituisce l'argomento presente all'indice specificato;
• $lambda crea una funzione vuota che restituisce il valore passato come parametro;
• $splat converte tutti gli argomenti passati in un Array;
• $time restituisce il timestamp corrente;
• $try, come indica il nome, tenta di eseguire tutte le funzioni passate come argomento restituendo il valore della prima funzione andata a buon fine.

Prossimamente vedremo come utilizzare queste nuove funzioni in applicazioni reali.

Class

Il costruttore Class, uno dei più importanti in assoluto, è stato potenziato ulteriormente. Ora per creare un oggetto di tipo Class si deve procedere nel seguente modo:

var mySubClass = new Class({

  // estende ed eredita dalla classe mySuperClass
  Extends: mySuperClass,

  // implementa le classi Options ed Events
  Implements: [Options, Events],

  // opzioni
  options: {},

  // costruttore
  initialize: function() {
	// crea la classe
  }
});

È evidente come ora la creazione sia molto più compatta e pulita. Tramite le nuove keywords "Extends" ed "Implements" è possibile specificare rispettivamente la classe genitore e le classi le cui funzionalità devono essere implementate. Abbiamo inoltre ancora a disposizione il metodo implement, che svolge la stessa funzione della proprietà Implements ma è utile nel caso di classi già create alla quale vogliamo aggiungere nuove funzionalità.

Per quanto riguarda le Class.Extras, la novità più importante riguarda il metodo chain: ora è possibile concatenare tutte le funzioni che vogliamo solamente con un'unica chiamata del metodo in questione:

fx.start('blue').chain(
  function() { fx.start('green'); },
  function() { fx.start('orange'); }
);

Hash

Le potenzialità della classe Hash sono così elevate che in questa nuova versione è stata apportata una "promozione" ad oggetto Native. Gli oggetti Native costituiscono la solida base di MooTools (come Array, String, Element, Event e cosi via), quella dalla quale dipende ogni altro componente. Essi sono molto vicini al Javascript core.

La classe Hash è stata largamente migliorata proprio per un motivo simile: dato che non possiamo alterare l'oggetto Object.Prototype, abbiamo a disposizione un nuovo potente wrapper il cui oggetto Prototype è liberamente modificabile, con tutti i vantaggi che ne derivano.

Una volta creato un Hash, possiamo veramente compiere qualsiasi tipo di operazione: iterarlo, estenderlo, controllarlo, combinarlo, eliminarlo, svuotarlo, impostarlo. Vediamo un semplice esempio:

// creiamo un Hash passando un oggetto come argomento, nella stessa modalità di creazione di un normale oggetto
var hash = new Hash({first: "Sunday", second: "Monday", third: "Tuesday"});

// ora possiamo utilizzare tutti i metodi della classe Hash sulle sue proprietà e metodi
// Iterazione
hash.each(function(value, key){
    alert("the " + key + " day of the week is " + value);
});

// Controllo
hash.has('second'); // true

// Estensione
var days = {
 fourth: 'Wednesday',
 fifth: 'Thursday'
};

hash.extend(days);

// Svuotamento
hash.empty();

// Impostazione di una nuova proprietà
hash.set('sixth', 'Friday');

Element

Il costruttore Element possiede ora nuovi metodi molto interssanti, come quelli ad argomento dinamico: set e get ad esempio, che permettono di lavorare con i valori delle proprietà di un elemento:

// prendi l'id dell'elemento myEl
myEl.get('id');

// imposta l'id ad un nuovo valore
myEl.set('id', 'new');

Come vedremo meglio nei successivi tutorial, è possibile impostare anche proprietà personalizzate e creare applicazioni molto interssanti:

// invisible
Element.Properties.invisible = { 
	get: function(){ return this.get('opacity') == 0; }, 
	set: function(){ this.setStyle('opacity',  0); } 
}};

// settiamo a 0 il valore di opacity
element.set('invisible');

Un'altra novità è rappresentata dagli Element Storage. Ogni elemento possiede uno storage dove è possibile memorizzare valori di qualisiasi tipo ed utilizzarli al momento dell'occorrenza. Questo sistema è stato progettato per ridurre al minimo la presenza di Memory Leaks e occupare il minor spazio possibile di memoria.

A questo proposito troviamo i metodi store e retrieve. Il primo permette di memorizzare un valore nello storage, il secondo di recuperarlo. Vediamo un esempio:

// salviamo come proprietà 'fx' un'istanza della classe Fx.Tween
myEl.store('fx', new Fx.Tween(myEl, {duration: 2000});

// recuperiamo l'istanza ed usiamola
myEl.retrieve('fx').start('color', 'orange');

Sempre nel file Element.js troviamo l'Hash Element.Properties che permette di creare proprietà personalizzate da usare in combinazione con i metodi get e set visti in precedenza.

La nuova classe IFrame permette di creare iframe in modo molto semplice, ovvero utilizzando una sintassi simile a quella che permette di geneare un nuovo elemento.

Infine, ricordo che ora le funzioni $ ed $$ non sono più semplici variabili, ma metodi del costruttore Window.

Fx

Le classi che permettono di generare effetti sono state potenziate ulteriormente.

Una delle novità più importanti è rappresentata dalla variazione degli argomenti da utilizzare. Con Fx.Tween ad esempio, ora la proprietà da alterare deve essere dichiarata dinamicamente all'interno del metodo start (oppure attraverso l'opzione property. In quest'ultimo caso la proprietà non deve essere specificata nel metodo start).

Per tutte le classi dedicate agli effetti l'Hash Element.Properties ci fornisce shortcuts molto utili, che permettono di utilizzare le istanze in una modalità del tutto nuova. Abbiamo così a disposizione i metodi tween (con le alternative fade ed highlight), morph e slide. Essi restituiscono l'elemento sulla quale sono richiamati, e non l'istanza dell'effetto come gli shortcut precedenti.

Vediamo un esempio di utilizzo:

// settiamo le opzioni per un'istanza di Fx.Tween di questo elemento
myEl.set('tween', {duration: 2000, transition: 'bounce:out'});

// utilizziamo l'effetto per alterare la proprietà width
myEl.tween('width', 200, 480);

// settiamo le opzioni per un'istanza di Fx.Morph di questo elemento
myEl.set('morph', {duration: 400});

// utilizziamo l'effetto per alterare le proprietà css
myEl.morph({
	'width': [200, 480],
	'height': [10, 160]
});

Come specificato da Valerio, questi potenti shortcut dovrebbero rappresentare la parte "client" dell'applicazione. Per tutte le altre occasioni, come la creazione di gerarchie di classi, è opportuno utilizzare le istanze Fx.

Inoltre, esiste una nuova e più veloce modalità per gestire le transizioni dell'effetto tramite Fx.Transitions. Invece che specificare la proprietà di Fx.Transitions desiderata, è possibile passare una stringa nella forma transition[:in][:out]. Ad esempio:

var fx = new Fx.Tween('myEl', {
	transition: 'bounce:in'
	// transition: 'bounce:in:out'
	// transition: Fx.Transitions.Bounce.easeInOut
});

Ricordo infine che è stata apportata una "classificazione" delle classi Fx.

Fx.Tween ed Fx.Morph che sono oggetti factory con la quale è possibile creare effetti di base alterando le proprietà css, sono parte della sezione Fx (così come le altre classi factory quali Fx ed Fx.CSS), mentre le classi Fx.Slide, Fx.Scroll ed Fx.Elements che consentono di creare effetti specifici sono state spostate nella sezione Plug-In, dato che non incidono nella parte core del framework diversamente dalle precedenti. Questa scelta aumenta la consistenza e la modularità del framework in fase di costruzione e download dello stesso (vedi voce "Caratteristiche generali" più in basso).

Request

Un altro grande componente di MooTools è il framework interno che permette di creare richieste asincrone al server tramite chiamate Ajax e JSON. Questo è stato migliorato e reso più completo tramite le classi Request, Request.HTML e Request.JSON.

Le modalità di esecuzione sono simili a quelle precedenti, con qualche rilevante variazione, come ad esempio la possibilità di utilizzo dell'url come argomento dinamico nei metodi post, get, put (e altri) in aggiunta all'opzione url. Ecco un esempio:

// richiesta get semplice
var myRequest = new Request.HTML().get('myPage.html');

// richiesta get con parametri
var myRequest = new Request.HTML({url:'load/'}).get({'user_id': 25}); 

Per garantire un'estrema flessibilità e compattezza, anche con le classi Request è possibile utilizzare gli shortcuts dinamici. Abbiamo dunque i metodi load e send. Il primo utilizza lo storage per impostare un'istanza della classe Request.HTML applicata ad un elemento (le opzioni data ed update sono impostate all'elemento preso in cosiderazione):

// imposta istanza
el.set('load', {method: 'get'});

// aziona richiesta
el.load('my_page.html');
 

Il secondo apre una connessione con il server ed invia una richiesta. È molto utile quando è applicato ad elementi di dati, come form ed input. Ecco il relativo esempio:

var myForm = $('myForm');

// imposta l'istanza
myForm.set('send', {url: 'contact.php', method: 'get'});

// invia alla pagina contact.php i dati del form
myForm.send();

La classe Request.JSON permette infine di inviare e ricevere informazioni con il server in formato JSON. Essa accetta un solo argomento: le opzioni. Tra queste troviamo url che permette di impostare l'url da contattare, e secure, che se settata a true permette di effettuare un controllo sulla stringa JSON risultante per evitare eventuali attacchi/parole indesiderate. Molto utile l'evento onComplete che consente di lavorare con l'oggetto JSON restituito dal server:

var jsonRequest = new Request.JSON({url: "teams.php", onComplete: function(team) {
    alert(team.name); // "Real Madrid"
    alert(team.city); // "Madrid"
    alert(team.cup); // "Liga"
}}).get({'city': 'Madrid', 'position': '1'});

Nuovi componenti

Molti nuovi componenti che non fanno parte delle precedenti analisi sono stati aggiunti. Tra questi troviamo la classe Swiff che permette di creare oggetti Flash con opzioni e paratri personalizzati, e i potenti Selectors, di cui Valerio ci ha parlato largamente nell'intervista.

A quest'ultimo componente verrà dedicato un ampio spazio nei prossimi tutorial, perché svolge funzionalità fondamentali per le applicazioni di nuova generazione. Oltre agli immancabili metodi di Element per "filtrare" e selezionare elementi e collezioni di elementi, come getElement e getElements, troviamo il metodo match e gli pseudo-Selettori.

Il metodo match restituisce true se l'elemento corrisponde al selettore passato come parametro:

// se l'elemento è un link con name 'somename' resituisce true
$('myElement').match('a[name=somename]');

Gli Psuedo Selectors sono selettori personalizzati che permettono di recuperare elementi in base a determinate situzazioni. Ne esistono parecchi di default, ma è anche possibile crearne di personalizzati.

Tra quelli già disponibili troviamo "enabled", "empty" che restituisce gli elementi dal contenuto vuoto, "contains" che restituisce gli elementi che contengono una particolare stringa di testo e molti altri ancora come i child selectors (first, last ed only).

Caratteristiche generali

Ora tutti i componenti aggiuntivi, come Drag, Drag.Move, Color, Group, Assets, Accordion, Fx.Slide, Fx.Scroll, Fx.Elements e molti altri, sono racchiusi nella sezione plug-in. Questa caratteristica permette una maggiore modularità: è possibile decidere se avere un framework con plug-in built-in oppure costruire i nostri unicamente scaricando la componente "core".

A questo proposito saranno disponibili due download builder: uno dedicato alla parte core ed un altro dedicato ai plug-in.

Conclusione

In questo articolo abbiamo analizzato i maggiori cambiamenti che la release 1.2 di MooTools porta con sé e tutti i nuovi e più importanti strumenti che ci offre.

Oltre a questa panoramica generale, verranno dedicati tutorial specifici per ognuno dei componenti più importanti ed utili, come i Selettori e i plug-in più accattivanti quali Accordion, Slider e cosi via.