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 //