Premiers pas avec YUI3

Nous considérons que le lecteur connaît correctement HTML, les CSS et javascript.

Cette introduction s'appuie sur un exemple simple que l'on va décortiquer étape par étape.

Nous vous invitons à copier ce code dans un fichier helloworld.html et à le lancer dans un navigateur.

• doctype : on utilise l'html5
• je ne reviens pas sur le title...
• on ajoute un style "display: none" pour la classe CSS "hidden"
• on va ensuite charger le script yui-min.js sur les serveurs de Yahoo. Ce script permet de charger les éléments de base de YUI3

Voyons élément par élément la signification de chaque ligne

• YUI().use("node", function(Y) {...});
• YUI().use() est une fonction créée dans le fichier yui-min.js qu'on a inclu dans le header
• cette fonction va servir à isoler du reste de la page et éventuellement d'autres scripts javascript le script que vous souhaitez développer
• le paramètre "node" indique que l'on souhaite utiliser le module YUI3 appelé "node". YUI3 se débrouille pour aller chercher les fichiers nécessaires sur le serveur de Yahoo
• function(Y) {....} est la fonction dans lequel on place l'ensemble de notre code Javascript. Cette fonction est appelée dès que l'ensemble des modules fournis en paramètre ("node" uniquement dans notre cas) sont chargés
• à l'intérieur de cette fonction, Y est l'objet à partir duquel nous pouvons appeler les fonctions de YUI3

• Y.one("#my-button")
• Avec YUI3 on ne manipule pas les node du DOM directement. Ces nodes sont encapsulés dans une classe YUI3 appelée Node. Ce Node est très comparable à l'élément du DOM lui même, mais en corrigeant les incompatibilités entre les navigateurs.
• Y.one("#my-button") permet de récupérer le Node YUI3 ayant pour id "my-button". (avec JQuery on aurait fait $("#my-button")). On peut utiliser n'importe quel sélecteur CSS3
• Si l'élément récupéré n'avait pas été unique, il aurait fallu faire Y.all à la place de Y.one, nous y reviendrons dans la page consacrée à Node
• Bref, on récupère le Node correspondant au lien "<a ...></a>" du code HTML

• Y.one("#my-button").on("click",function(e) {...});
• sur ce Node, on écoute l'évènement "click". Si cet évènement intervient (c'est à dire si quelqu'un clique sur le lien), on lance la fonction définie en paramètre.
• la fonction prend un argument : e. C'est l'évènement lui même. Il fournit des informations sur l'évènement lui même.

• e.preventDefault();
• Annule le comportement par défaut de l'évènement. Dans notre cas, le lien aurait du mener vers une page "unLien.html". On va bloquer ce comportement.

• var button = e.currentTarget;
• on récupère l'élément sur lequel le click a eu lieu (dans notre cas, c'est le Node de tout à l'heure)

• var container = button.get("parentNode");
• Node.get permet de récupérer l'attribut d'un node
• récupère le node parent, c'est à dire la div de classe "my-container" (allez voir l'HTML)
• Notons que cet attribut parentNode est complètement bugguée dans le DOM réèl sur plusieurs navigateurs. Un des avantage de YUI avec ce système de Node est de corriger les bugs des navigateurs.

• var textDiv = container.one(".my-text");
• on récupère la div cachée avec cette commande
• dans ce cas, on n'utilise pas Y.one(), mais Node.one(). C'est à dire qu'on récupère un node en utilisant un sélecteur CSS, mais en ne cherchant qu'à l'intérieur du node "container" qu'on a récupéré juste avant

• les lignes suivantes permettent de supprimer la classe "hidden" si elle est présente ou de l'ajouter si elle est absente. Bref de faire apparaître ou disparaître la div. quand on clique sur le lien.
• Note : il existe aussi des fonction show() et hide() sur les nodes. Nous aurions pu les utiliser également.

• On peut chaîner les éléments, on aurait pu écrire :
• var textDiv = e.currentTarget.get("parentNode").one(".myText");

• on peut travailler sur une liste de Node d'un coup. Si on veut effacer tous les éléments <p> d'une page par exemple on peut écrire :
• Y.all("p").addClass("hidden");

• le lien dans le code HTML mène vers une page bidon. Ensuite on bloque le comportement par défaut avec e.preventDefault(). Ce mécanisme n'est pas anodin. On parle de "progressive enhancement" : si le navigateur n'accepte pas javascript, l'internaute est bien renvoyé quelque part. Si le navigateur accepte javascript on utilise un mode de fonctionnement plus évolué. Ce "progressive enhancement" est un des principes fondateurs de YUI.

On a vu ici un fonctionnement de base de YUI 3, comment fonctionne l'encapsulation, et quelques qualités du framework comme le fait de corriger des bugs des navigateurs.

Pour l'instant nous n'avons rien fait de révolutionnaire par rapport à JQuery (qui est également une librairie remarquable). Nous verrons dans les tutoriaux à venir des fonctions bien plus évoluées de YUI3.