bloggers bloggers

YUI è una libreria JavaScript interamente sviluppata da Yahoo, giunta -ad oggi- alla versione 3.2.0. E' disponibile con Licenza BSD , è molto ben documentata ( http://developer.yahoo.com/yui/3/ e http://developer.yahoo.com/yui/3/api/index.html ) e offre un ricchissimo set di widget.

...diamo un'occhiata !

La prima cosa che salta all'occhio è che YUI e' una libreria modulare: tutte le funzionalità che offre (attraversamento e manipolazione del DOM, utilizzo di eventi, chiamate ajax, utilizzo di JSON, ecc..) sono racchiuse ogniuna all'interno di un modulo specifico che viene caricato dal core di YUI per poi venire utilizzato.

Iniziamo a conoscere la libreria includendo il suo file principale :

<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>

e istanziando l'oggetto YUI nel modo seguente :

YUI().use('<nome del modulo>', function(Y) {
//codice
});

una volta creato l'oggetto YUI invoco il metodo use. Questo metodo è importante perchè accetta come primo dei suoi parametri una stringa che identifica il nome del modulo che voglio utilizzare.
Una funzionalità interessante è quella del caricamento dinamico dei moduli : i file .js e .css necessari all'utilizzo del modulo – le dipendenze - vengono scaricate dalla libreria attraverso una chiamata asincrona, appena il metodo use() viene invocato. L'ultimo argomento di use() è una funzione che viene eseguita quando il modulo e le sue dipendenze sono state caricate. A questa funzione viene passato l'oggetto YUI stesso, sul quale è possibile invocare nuovamente use(<modulo>, fn) per caricare dinamicamente e usare altri moduli che possono servirici.

Nota :
E' tuttavia possibile includere staticamente nella pagina i moduli che si vogliono utilizzare (attraverso il solito tag <script src="***.js"></script> ), quindi caricarli e usarli con la stessa sintassi sopra descritta.

L'oggetto YUI è configerabile e accetta come parametro un oggetto literal con diverse proprietà che ne consentono la creazione customizzata. A esempio è possibile specificare una serie di lingue, forzare o vietare il caricamento di componenti specifiche, settare un timeout per lo scaricamento delle dipendenze, ecc.. Qui http://developer.yahoo.com/yui/3/yui/#loader vengono descritte tutte le opzioni per costruire l'oggettoYUI.

Prima di iniziare a giocare con qualche modulo è importante sapere che out of the box YUI è provvista di una serie di moduli – oltre il core stesso- che consentono ad esempio operazioni sugli array, supporto per il logging, esecuzione periodica di funzioni, loading dinamico di file .js e css, a altro. Qui http://developer.yahoo.com/yui/3/yui/#core c'è la lista compelta dei moduli inclusi nel core.


Particolarmente utile il modulo di logging che consente di loggare nella console di Firebug con una riga di codice. Ecco un piccolo esempio :

Y.log("La variabile a vale : " + a);


Ecco qualche esempio di utilizzo dei moduli di YUI. Cominciamo con un paio di assaggi sul modulo node, che consente di attraversare e manipolare il DOM e i css.

Es 1)

YUI().use('node', function(Y) {
var node = Y.one('#foo');
var parent = node.get('parentNode'); // Node instance

var html = 'I am "' + node.get('id') + '".';
html += 'My parent is "' + parent.get('id') + '"';

node.set('innerHTML', html);
});

Viene utilizzato il metodo one() che accetta una stringa come parametro. Come con jQuery è possibile utilizzare una sintassi simile a xpath per individuare gli elementi del DOM su cui vogliamo operare. Il metodo one() ritorna una sola occorrenza di oggetti Node. Nello script viene recuperato il nodo che ha id=”foo” e il genitore di questo nodo. Sul primo nodo recuperato viene iniettata una stringa che contiene il valore degli id di entrambi i nodi.

Es 2)

YUI().use('node', function(Y) {
Y.all('#demo li').addClass('bar');
});

Questo script utilizza il metodo all() che ritorna un oggetto di tipo NodeList che rappresenta ovviamente una collezione di Node. Aggiunge poi la classe 'bar' a tutti gli elementi <li> figli dell'oggetto DOM che ha id=”demo”

Ecco qualche esempio di utilizzo del modulo di gestione degli eventi :

Es 1)

YUI().use("dump", "event", function(Y) {

var contextObj = {
name: "context"
};

function handleClick(e, arg1, arg2) {
Y.log("Context object:" + Y.dump(this));
Y.log("Event facade object:" + Y.dump(e));
Y.log(arguments);
}

//subscribe odd numbered list items to the click event
Y.on("click", handleClick, "#foo", contextObj, "argumentOne", "argumentTwo");
});

In questo esempio vengono importati due moduli : “dump” e “event” : Il primo consente il dump di un oggetto literal e verrà quindi usato per mostrare informazioni di log. Il secondo modulo include tutto per la gestione degli eventi (sono disponibili anche alcune unità più “leggere” di questo modulo piuttosto corposo che includono soltanto alcune funzionalità essenziali, per esempio 'event-base' , o 'event-focus'). Il motodo on() viene invocato per scatenare un evento. Vediamo in dettaglio io parametri che accetta :

1. Una stringa che indica il tipo di evento da scatenare. YUI fornisce 3 eventi customche sono : a) domready : viene triggerato quando tutto il DOM è stato caricato completamente dal browser b) available : viene triggerato non appena l'elemento sul quale attaccare la funzione di callback viene caricato, senza aspettare che vengacaricato il resto del DOM. c) contentready : viene triggerato non appena viene caricato sia l'elemento sul quale attaccare la funzione di callback sia il suo nextSibling.
2. il riferimento alla funzione di callback che verrà eseguita allo scatenarsi dell'evento.
3. L'oggetto DOM sul quale attaccare l'evento, o una stringa con sintassi xpath-like per identificare un elemento del DOM. E' possibile passare anche un array (vedi esempio seguente) per attaccare l'evento su più nodi.
4. Context Object : Un oggetto literal al quale ci si potrà riferire con this all'interno della funzione passata. Questo vuol dire che la funzione che passiamo viene eseguita all'interno di questo oggetto. Se questo parametro viene omesso o è null, viene valorizzato di default con il Node che ha scatenato l'evento (nel nostro esempio '#foo').
5. Un numero variabile di argomenti che verranno passati alla funzione di callback.

Ecco altri esempi d'uso del metodo on() :

YUI().use('node-base', function(Y) {

function handleClick(e) {
//codice della funzione di callback
}

Y.on("click", handleClick, "#foo p");

var foo = Y.one("#foo"); // cerca il nodo con id='foo'
Y.on("click", handleClick, foo); //attacca l'evento
foo.on("click", handleClick); //coe sopra

var foo = document.getElementById("foo");
Y.on("click", handleClick, foo);

// passa un array di elementi su cui attaccare l'evento
Y.on("click", handleClick, ["#foo p", "#bar"]);
});

Altra funzione intreressante è delegate che permette di attaccare un evento a tutti i figli di un elemento. Vediamone un esempio:

YUI().use("event", function(Y) {
Y.delegate("click", function(e) {

alert('pippo');

}, "#container", "li");
});

Questo script esegue alert('pippo') su ogni elemento <li> figlio di 'container'. I parametri in dettaglio :
1.Stringa che identifica il tipo di evento da scatenare
2.il riferimento a una funzione
3.il nodo dal quale partire per cercare i figli
4.un filtro che identifica i figli di quel nodo

Le gestione degli eventi di YUI è complessa e merita di sicuro un approfondimento ( http://developer.yahoo.com/yui/3/event/ ). Un ultimo argomento assolutamente degno di menzione è la creazione di eventi custom, che permette di fare override -fra gli altri- dei metodi on() e delegate() visti sopra . Vediamo questo esempio che utilizza il metodo define(String eventName Obj config)

YUI().use("event-synthetic", function(Y) {

// Creo un evento chiamato "clickoutside"
Y.Event.define("clickoutside", {

on: function (node, subscription, notifier) {
//codice
},

delegate: function (node, subscription, notifier, filter) {
//codice
},
});



Una volta creato l'evento...lo aggancio, con la sintassi utilizzata prima.

// Aggancio il mio evento custom
Y.on("clickoutside", function (e) {
this.addClass('hidden');
}, "#menu");

Per ora è tutto...alla prossima !