Cominciamo questa nuova serie con un articolo che ha l’obiettivo di illustrare i concetti fondamentali che stanno alla base di Alloy UI: dall’uso della sandbox, alla manipolazione del DOM e alle chiamate Ajax. Come vedremo, si tratta di un framework dotato di interessanti caratteristiche e funzionalità.
Cos’è Alloy UI
Alloy UI è un framework, sviluppato da Liferay Inc. e introdotto a partire dalla versione 6.0, che si pone l’obiettivo di fornire allo sviluppatore una API semplice e robusta per lo sviluppo di applicazioni web; l’introduzione di Alloy all’interno di Liferay sostituisce l’utilizzo di jQuery utilizzato fino a quel momento.
Si potrebbe definire un framework a tutto tondo in quanto abbraccia tutti i livelli di operatività di un browser: struttura, stile e comportamento. Ciascuno di questi aspetti si concretizza all’interno del framework con elementi specifici, come risulta immediatamente anche dalla homepage del prodotto con le sue famose 3 casette:
Struttura
Fornisce un insieme di taglib per creare form HTML e per disporre gli elementi nella pagina.
Fornisce supporto a HTML5 anche all’interno di Internet Explorer.
Stile
Fornisce supporto a CSS3.
Sfrutta il concetto di progressive enhancement.
Comportamento
Basato sul framework YUI3.
Consente la gestione di DOM, eventi, Ajax, …
Fornisce widget per realizzare dialog, tree, tabs, autocomplete, …
Cos’è YUI
Come recita il sito stesso: YUI is a free, open source JavaScript and CSS library for building richly interactive web applications. Si tratta infatti di un framework sviluppato da Yahoo, molto diffuso, ben documentato e supportato dalla comunità; Alloy estende YUI3, introducendo alcune nuove funzionalità e semplificandone altre.
YUI ha la peculiarità di essere modulare e leggero, in quanto progettato appositamente per la velocità; uno dei punti più interessanti del framework è infatti la possibilità di caricare in memoria i plugin necessari solamente all’occorrenza e non tutti al caricamento della pagina.
È però importante ricordare che non tutte le funzionalità di YUI sono presenti all’interno di Alloy; infatti le tempistiche di rilascio dei 2 framework sono diverse e sebbene YUI si evolva velocemente (al momento in cui si scrive è stata rilasciata la versione 3.7.3), Alloy viene rilasciato insieme a Liferay con maggiore lentezza: è infatti “solo” la 3.4.0 la versione di YUI su cui Alloy si basa attualmente (ossia nella versione rilasciata con Liferay 6.1.1).
Infine è bene precisare che Alloy, pur essendo il framework di riferimento di Liferay, non è vincolato ad essere usato solamente al suo interno; è infatti possibile scaricare unicamente le librerie di Alloy ed utilizzarle nei propri progetti web.
Sandbox
La sandbox è un concetto ereditato direttamente da YUI che consente di fornire struttura al codice Javascript.
- Consente di dichiarare tutti i moduli (genericamente YUI/Alloy) necessari;
- risolve automaticamente le dipendenze tra i moduli, pertanto non è necessario dichiararli esplicitamente tutti;
- i moduli vengono caricati on demand e non tutti al caricamento della pagina;
- i moduli vengono caricati e messi in cache, pertanto nessun modulo viene caricato duplicato;
- la visibilità dei dati è confinata alla sandbox, quindi si evitano conflitti e l’utilizzo massivo di variabili globali.
Creazione della sandbox
Sia in YUI che in Alloy è presente un oggetto Javascript globale (e sempre disponibile) che rappresenta un po’ il punto di partenza di tutte le attività; il nome dell’oggetto cambia a seconda del framework di riferimento:
- YUI per il framework di Yahoo;
- AUI per il framework di Liferay.
Per creare una nuova sandbox è sufficiente invocare il metodo factory:
var A = AUI();
Una volta creata l’istanza della sandbox, è possibile eseguire il proprio codice al suo interno utilizzando la funzione use:
A.use(moduli_da_usare, funzione_di_callback);
Il primo parametro rappresenta un elenco dei moduli che devono essere agganciati alla sandbox (e caricati secondo quanto visto in precedenza); al termine dell’aggancio viene eseguita la funzione di callback, in modo asincrono, che conterrà la nostra logica applicativa. Vediamo un esempio pratico:
AUI().use('event', 'node', function(A) {
A.one('#console').html('Ciao mondo!');
});
Come si può vedere, la sandbox utilizza due moduli distinti: event e node. Inoltre la funzione di callback riceve come unico parametro l’istanza della sandbox che andrà poi ad utilizzare internamente.
Taglib
Una delle taglib più importanti fornite da Alloy è quella che consente di definire e di lavorare con la sandbox: . Il suo utilizzo è pensato come sostituto del tag HTML standard
Marco nasce verso la fine degli anni Settanta e si trova presto alle prese con monitor e tastiera di un vecchio Olivetti M24 (a tutt