Développer un plugin jQuery UI : introduction

J'utilise régulièrement quelques-uns des widgets officiels et j'ai utilisé les plugins d'interactions pour développer quelques plugins spécifiques. Mais, je ne m'étais jamais attardé sur l'API sous-jacente à jQuery UI. C'est un tort.

Dans le cadre d'un des projets de Novius Labs, j'avais besoin d'un ensemble d'UI. J'ai commencé par faire un inventaire de tous les plugins jQuery existants qui pouvait me servir. Mais, au final, j'avais une liste de plugins sans cohérence et j'aurais été obligé pour chacun de mettre les mains dans le cambouis, pour leur faire faire ce que je voulais.

Parmi cette liste de plugins, il y avait plusieurs widgets jQuery UI. J'ai donc creusé un peu de ce côté là. Je pris le temps de lire la page jQuery UI API Developer Guide, qui m'a renvoyé vers ce tutorial Understanding jQuery UI widgets: A tutorial. J'ai alors découvert le framework qui me manquait pour développer mes plugins.

Jusqu'à présent, à chaque fois que je devais coder un plugin, je repartais « from scratch ». Avec le framework jQuery UI, toute la logique est déjà pré-pensée, que ce soit pour le JavaScript que pour le CSS. Plus fort, je peux utiliser facilement le système d'héritage pour modifier un plugin existant.

Passons à la pratique. Notre exemple est basique : transformation d'un DIV en un bloc avec titre.

Le code de base d'un widget jQuery UI

// Pour créer mon plugin il suffit d'appeller la méthode $.widget
// Le 1er paramètre est le nom de mon plugin préfixé par demo. (le namespace du widget, ui étant le namespace de jQuery UI)
// Le 2eme paramètres est un objet json de paramétrage du plugin
$.widget("demo.bloc", {
    // options par défaut du widget 
    // modifiables à la construction 
    // mais aussi après la construction du widget 
    options: {
        title: 'Titre'
    },

    // Une variable interne 
    // contient l'objet jQuery du titre du bloc
     uiBlocTitle: null,

    // La fonction _create est appelé à la construction du widget
    // la variable d'instance this.element contient un objet jQuery
    // contenant l'élément sur lequel porte le widget
    _create: function() {
        this.element.addClass('uiBloc');
        this._title() ;
    },

    // Toutes les fonctions commençant par un underscore
    // sont des fonctions internes
     _title: function() {
        this.uiBlocTitle = $('<h5></h5>').text(this.options.title).prependTo(this.element);
     },

    // Les fonctions ne commençant pas par un underscore
    // sont des fonctions pouvant être appelées de l'extérieur
    title: function(text) {
        if (typeof(text)!= 'undefined') {
            // la variable text a été passée en paramètre
            // Modification du texte
            // et ne pas oublier de retourner l'élément (this.element)
            // pour rendre possible le chainage de fonction
            returnthis.uiBlocTitle.text(text);
        } else {
            // la variable text n'a pas été passée en paramètre
            // On retourne le texte actuellement contenu dans l'élément
            returnthis.uiBlocTitle.text();
        }
    }
});

Voici maintenant le code d'utilisation

<div id="monbloc">
 <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn?t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then </p>
</div>
<div>
 <button id="action1">Changer le titre</button>
 <button id="action2">Alert : le titre</button>
</div>
<script type="text/javascript" src="static/js/jquery-ui/js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript">
(function($) {
     $(function() {
         // Appel de la construction du widget
         // en surchargeant les options par défaut
         $('#monbloc').bloc({title : 'Hello world'});

        // Un click sur le bouton Change modifie le texte
        // On rappelle la fonction bloc sur l'élément
        // Le premier paramètre est le nom de la fonction interne (title)
        // Le deuxième est le paramètre de la fonction interne
        $('#action1').click(function() {
            $('#monbloc').bloc('title', 'Bonjour monde');
        }) ;

         // Un click sur le bouton Alert affiche le texte en cours dans une alert
         $('#action2').click(function() {
             alert($('#monbloc').bloc('title'));
         }) ;
     });
})(jQuery);
</script>

Et maintenant la démo

La suite : le skinnage

Passons à la deuxième étape, la mise en forme de notre UI