Dans le doute, reboot !

jQuery UI Widget inheritance | février 13, 2010

Je n’ai trouvé que trés peu de ressources sur le web illustrant cette technique. Ma seule trouvaille fut celle-ci.

Widget factory

Tout les widgets jQuery UI sont crées en passant par la méthode $.widget(‘ui.widgetname’, prototype); (jQuery UI Widget Factory).

Lorsque un widget est crée, la factory créée pour vous le namespace adéquat, ici $.ui (qui existe déjà, mais vous n’y êtes pas restreint), une nouvelle classe $.ui.widgetname, ainsi qu’un helper au niveau du namespace de jquery répondant au nom de votre widget. Ici, $.fn.widgetname permettant l’intialisation et la manipulation du widget par l’intermédiaire de $(selector).widgetname(options);

Je ne m’étendrais pas plus sur le sujet puisque cet article se borne à présenter la mise en place d’un héritage simple de widgets existants. Le lien sur le wiki linké plus haut est une très bonne source d’information.

Gimme your prototype

Comme expliqué un peu plus haut, les widgets crées via la widget factory fournissent ce qu’on appelle un prototype. C’est de ce prototype dont nous partirons pour créer notre custom Dialog widget.

$.widget("wt.myDialog", $.extend({}, $.ui.dialog.prototype, {
	_init: function(){
		console.log("I am a extended widget!");

		// Don't forget to call the super one
		return $.ui.dialog.prototype._init.apply(this, arguments);
	}
}));

Nous aurons aussi besoin de copier l’intégralité de la configuration par défaut du widget parent, habituellement disponible via $.namespace.widgetname.defaults:

// You also have to copy the whole defaults widget properties
// You may want to add your owns too
$.wt.myDialog.defaults = $.extend({}, $.ui.dialog.defaults, {
	foo: "foo",
	bar: function(){},
	whatever: true
});

Ce faisant, vous n’avez plus qu’à tester le code:

$("<div />").myDialog();

Et l’on peut voir notre tant attendu log lors de l’initialisation alors qu’une dialog apparaît à l’écran. Avec toutes les fonctionnalités du widget de base 😉 Pretty handy, right?

On peut trouver beaucoup à redire sur cette implémentation. On pourrait grandement l’améliorer en manipulant plus finement le prototype comme expliqué dans le post sur Hacking at 0300. J’aime beaucoup l’effort pour promouvoir une _super method, basé sur l’implémentation de jresig (elle même basé sur celle de Dean Edwards, enfin bref…).

Do my stuff!

Vous avez pu en voir un bref exemple plus haut sur la méthode init, surcharger une méthod du widget revient à redéfinir une méthode du widget parent dans votre propre ptototype en veillant à appeller la super method:

open: function(){
	console.info("show:", this, arguments);
        // Does the same thing than this._super but is more verbose.
	$.ui.dialog.prototype.open.apply(this, arguments);
}

Sources utilisés dans cet article: http://github.com/MkLabs/snippets/

Ressources
Advertisements

Laisser un commentaire »

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

About author

I'm not your buddy, dude!

Recherche

Navigation

Catégories :

Links:

Archives:

Feeds

%d blogueurs aiment cette page :