Comment installer YUI ?

YUI Global Object

Avec YUI 2.x, il y avait mille et une façon d'utiliser YUI dans vos pages web. Comme mentionné dans le présentation, il s'agit d'une librairie modulaire. A chaque module on peut lier une façon de l'intégrer dans la page web. Avec l'évolution de la librairie vers la version 3.x, une amélioration profonde a été apportée, pour l'intégration de YUI dans vos pages web. Le module YUI Global Object est le seule module qui doit figurer dans vos pages, pour pouvoir utiliser et écrire du code YUI. Ce dernier contient un chargeur de modules et des dépendances dont ils ont besoin. Ainsi vous fournissez uniquement la liste des modules YUI dont vous avez besoin et le code JavaScript qui les utilisent.

Intégrer YUI Global Object

Insérer le script du YUI Global Object de la version 3.x, hébergé sur le serveur Yahoo.

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js"></script>

Comment utiliser YUI ?

Le cœur d'YUI

Vous pouvez créer plusieurs instances d'YUIGlobal Object. Chacune étant complètement configurable et chargée avec seulement les modules dont vous avez besoin. Dans l'exemple qui suit, on souhaite utiliser le module drag and drop de YUI 3.x :

   
 YUI().use('dd-drop',  function(Y) { 
  // le drag and drop est maintenant disponible
  // Il vous reste à écrire le code permettant de l'utiliser
  } 

Dans une autre instance on souhaite utiliser d'autres modules, par exemple le drag and drop et animation de YUI 3.x :

   
 YUI().use('dd-drop', 'anim',  function(Y) { 
  // le drag and drop est maintenant disponible
  // le module animation est maintenant disponible
  // Il vous reste à écrire le code permettant de les utiliser
  } 

On verra plus tard comment charger les modules de YUI 2.x, et même des modules externes.

La méthode use

Vous l'aurez compris, la méthode use vous permet de sélectionner les modules que vous voulez utiliser dans votre instance YUI. Ainsi vous avez une meilleure maitrise des modules présents dans votre pages, et à quel moment ils doivent l'être.

Le Loader

A partir de la version YUI 3.x la fonctionnalité Loader est intégrée à la YUI Global Object, sa puissance se cache derrière la méthode YUI.use. Si vous demandez un module qui n'est pas déjà chargé sur la page, le Loader charge dynamiquement un exemplaire de ce module (et ses dépendances) pour les rendre disponibles dans la méthode YUI().use().

Lang

Une instance YUI vous permet aussi de disposer d'un ensemble d'utilitaires d'extensions qui sont utilisées dans la bibliothèque YUI, et que vous pouvez utiliser pour vos script. Dans la suite on donne quelque exemples d'utilisation :

// Créer une instance de YUI
var Y = YUI();
//Tester des boolean 
Y.Lang.isBoolean(false); // renvoie true
Y.Lang.isBoolean("true"); // renvoie false, la chaine de caractères "true" n'est pas un boolean
//Tester des nombres
Y.Lang.isNumber(1);  // renvoie true, 1 est un nombre

Pour connaitre l'ensemble des fonctionnalités de Lang cliquez ici pour accéder à l'API.

Loader YUI 3.x

Approche classique

Supposons que nous souhaitons utiliser le module node de YUI 3.x (permet de manipuler le DOM) dans notre page web. Pour que ce module fonctionne il faut disposer dans la même pages de toutes ses dépendances, ce qui donne :

<!-- inclure le cœur YUI 3.x --> 
<script type="text/javascript" src="../../build/yui/yui.js"></script> 
<!-- inclure les dépendances du  module node --> 
<script type="text/javascript" src="../../build/oop/oop.js"></script> 
<script type="text/javascript" src="../../build/event/event.js"></script> 
<script type="text/javascript" src="../../build/dom/dom.js"></script> 
<script type="text/javascript" src="../../build/node/node.js"></script>   

En plus vous devez inclure votre propre code javascript dans le page, permettant d'utiliser le module node, ce qui donne :

  
var elem = YUI().get('#demo');

Comme vous pouvez le voir cela alourdi significativement votre page, alors qu'on n'a utilisé qu'un seul module. Si vous souhaitez utiliser un autre module, il faudra faire le même travail tout en faisant attention à ne pas inclure deux fois la même dépendance, pourquoi ? Parce que plusieurs dépendances sont partagées entre plusieurs modules.

Approche dynamique

Charger un module YUI 3.x

Comme expliqué dans les section précédentes, YUI 3.x fournie un utilitaire appelé Loader permettant de gérer dynamiquement les modules et leurs dépendances. Voyons comment cela marche, prenons le même exemple que précédemment, nous souhaitons utiliser le module node. Cette fois, pour que ce module fonctionne, il faut installer YUI 3.x sur notre page :

<!-- inclure le cœur YUI 3.x --> 
<script type="text/javascript" src="../../build/yui/yui.js"></script> 

Et puis écrire notre propre code permettant de l'utiliser le module node dynmaiquement, ce qui donne :

YUI().use('node' , function (Y) { 
    
  var elem = Y.get('#demo');
})

Explication, on crée une instance YUI

YUI() ...

on lui demande de charger le module node

.use('node', ...

Et enfin on lui demande d'exécuter notre code javascript utilisant le module en question

... , function (Y) { 
    
  var elem = Y.get('#demo');
})

Charger tous les modules YUI 3.x

Quand nous créons une instance YUI, on lui demande de charger le module *, c'est un alias qui signifie tous les modules, ce qui donne :

YUI().use('*' , function (Y) { 
      
})

Charger des modules externes

Par modules externes, on entend modules non présents dans YUI 3.x, par exemple les modules YUI 2.x, JQuery , ou tout autre librairie que vous souhaiteriez utiliser, et même vos propre script. Comment définir votre module :

 
  
nom : requis, le nom du module
 
  
type : requis, le type du module (js ou CSS)
 
  
fullpath : l'URL pour accéder au module
 
  
requires: liste de dépendances requis par ce module

Un exemple avec le calendrier YUI 2.x, et un de vos script qu'on appellera votreScript1.js et qui utilise la librairie JQuery :

YUI({ 
   
   modules :  {

      'yui2-yde': { 
	            fullpath: "http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" 
	        },
      'yui2-calendarcss': { 
	            fullpath: "http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css", 
	            type: 'css' 
	        },  
       'yui2-calendar': { 
	            fullpath: "http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js", 
	            requires: ['yui2-yde', 'yui2-calendarcss'] 
	        } ,
        'jquery' : {
		name :"jquery",
		type :"js",
		fullpath :"http://yoja-web.com/dev/build/plugins/jquery/jquery.js"
	},
       
       'votrescript1' : {
		name :"votrescript1",
		type :"js",
		fullpath :"http://www.votresite.com/votrescript1.js"
                requires: ['jquery''] 
	}
   }      

}).use('yui2-calendar', 'votrescript1 ',  function (Y) { 
  //Le calendrier 'yui2-calendar' est disponible, ainsi que ses dépendances 
  //le module CSS  'yui2-calendarcss' et le script 'yui2-yde'

 //Votre script 'votrescript1' est disponible, ainsi que JQuery 
 //chargé comme dépendance de  'votrescript1'
})

Vous pouvez mettre le contenu de l'exemple dans un autre script qu'on appellera votreScript2.js, l'inclusion dans votre page se reduit à ce qui suit :

<!-- inclure le cœur YUI 3.x --> 
<script type="text/javascript" src="../../build/yui/yui.js"></script> 
<!-- inclure votre script 2 --> 
<script type="text/javascript" src="http://www.votresite.com/votrescript2.js"></script>