Faire un widget avec YUI3

Ce tutoriel est en cours de rédaction et il n'est pas du tout achevé !!!!

Avant d'aborder cette partie il faut avoir bien compris les principes de YUI3.

Je m'adresse donc à un public ayant déjà pas mal de pratique avec YUI3.

Comme d'habitude je ne m'attarde pas trop sur la théorie. Je vous invite à aller voir un speach de Satyen Desai - A Widget Walkthrough.

Je vais donc m'intéresser à un exemple concret : un textfield remis à 0 quand on clique sur un bouton "reset" à coté. (je sais c'est un peu neuneu, mais il faut commencer par le début...)

Pour créer le widget il faut suivre les étapes suivantes :

• Créer un module
• Dans ce module créer une classe correspondante à votre futur widget
• Donner un nom à votre module
• Définir un parseur HTML à votre futur widget
• Définir des attributs à cette classe
• Faire hériter la classe de Y.Widget
• Définir la méthode initializer
• Définir la méthode renderUI
• Définir la méthode bindUI
• "publier" la classe dans YUI

Puis pour utiliser le widget, voilà les étapes à suivre :

• Créer l'HTML nécessaire
• Créer le javascript nécessaire

Depuis l'arrivée du YUI Application Framework (Y.App), on a 2 composants qui se ressemblent : Y.Widget et Y.View.

En gros Y.Widget est plus lourd à mettre en place mais plus complet. Il permet de faire des composants diffusables et réutilisables.

Y.View est plus léger et plus simple. Il est destiné à faire des composants utilisés uniquement dans votre projet.