La fin de semaine dernière, j'ai eu le plaisir de présenter une conférence sur jQuery dans Drupal au Drupal Camp Vancouver, et j'ai jugé utile d'y donner suite avec un billet de blogue où je pourrais reprendre et approfondir certains des points les plus importants, car je trouve que c'est un domaine qui suscite beaucoup de confusion dans le monde Drupal. D'ailleurs, c'est ma propre confusion, au moment de créer une version D6 de Quick Tabs, qui m'a donné l'idée de cette présentation. Voici, par exemple, le genre de questions auxquelles je devais trouver réponse :
- comment puis-je mettre en œuvre le glisser-déposer et l'AHAH dans mon module?
- est-il même possible de rétroporter ce genre de fonctionnalité dans la version D5?
- existe-t-il des pratiques exemplaires pour écrire du jQuery dans vos modules Drupal?
- dois-je changer ma façon d'écrire mon code jQuery dans Drupal 6?
- qu'en est-il de ce plugiciel jQuery UI dont on m'a tant parlé?
J'ai épluché de nombreux fils de discussion sur drupal.org et sur groups.drupal.org/javascript et j'ai fini par trouver des réponses à presque toutes mes questions. Le livre jQuery in Action (dont j'ai fait une critique élogieuse sur mon blogue personnel) m'a aussi été d'un grand secours pour mes questions propres à jQuery. Ce billet vise à épargner aux autres passionnés de jQuery et de Drupal toutes ces recherches et ces lectures, et j'espère finir par intégrer ces renseignements d'une façon ou d'une autre à la documentation de drupal.org.
Au commencement...
jQuery a été intégré au cœur de Drupal avec Drupal 5.0; il a été choisi plutôt que d'autres bibliothèques populaires surtout en raison de sa similarité structurelle avec Drupal : un petit fichier central qui fournit le strict minimum, avec une architecture de plugiciels pour les fonctions plus élaborées; les plugiciels s'« accrochent » à jQuery un peu comme les modules contribués s'accrochent à Drupal. Ainsi, dans votre code Drupal, dans le répertoire misc, vous trouvez jquery.js ainsi que quelques fichiers js propres à Drupal, dont le plus important est drupal.js, qui régit la façon dont les deux fonctionnent ensemble.
Suivre l'évolution
Tout naturellement, jQuery a continué d'évoluer après la version 1.0.1 intégrée à Drupal 5, et la communauté très active qui l'entoure a continué d'enrichir ses fonctionnalités avec de merveilleux plugiciels. L'un d'eux était l'ensemble Interface, qui offrait beaucoup d'améliorations d'interface vraiment alléchantes, comme les éléments déplaçables, les zones de dépôt, les éléments redimensionnables, etc. La question de savoir comment tirer parti de ces nouvelles fonctionnalités dans Drupal soulevait deux enjeux importants :
- comment mettre jQuery à niveau dans une installation D5.x lorsque des changements d'API sont en jeu?
- quelle est la meilleure façon d'inclure des plugiciels jQuery individuels dans des modules Drupal?
Le premier problème tient au fait que les changements d'API de jQuery entraînent l'abandon de méthodes et de sélecteurs; vous ne pouvez donc pas simplement remplacer le fichier jquery.js de votre répertoire misc par la dernière version : les modules dont le code jQuery a été écrit pour l'ancienne version pourraient cesser de fonctionner. La seconde question porte sur la gestion de plusieurs modules Drupal qui veulent utiliser le même plugiciel jQuery. La solution de Jeff Robbins à ce dernier problème a été de créer le module jQuery Interface, qui fournit tous les fichiers js et une simple fonction jquery_interface_add(), devenue de facto la méthode pour inclure Interface dans un module Drupal. Mais Interface exigeait la version 1.1 de jQuery, ce qui voulait dire qu'il fallait d'abord régler le problème de la mise à jour du cœur de jQuery. C'est ainsi qu'est né le module jQuery Update. Il ne se contente pas de fournir la version de jQuery alors courante (1.1.2) pour remplacer celle du répertoire misc : il fournit aussi le fichier de rétrocompatibilité offert par l'équipe jQuery, qui garantit que le code écrit pour jQuery 1.0.x fonctionne toujours avec la nouvelle version, en plus d'un correctif pour collapse.js, apparemment problématique.
[Diagramme de jQuery et Drupal affiché à l'origine ici.]
Une mise à jour à jour?
Le module jQuery Update est devenu un prérequis pour de nombreux modules subséquents basés sur jQuery et semble avoir bien fonctionné dans l'ensemble. Bien sûr, jQuery a continué d'évoluer à son propre rythme et de nouveaux plugiciels sont apparus, exigeant des versions encore plus récentes. Même si l'on pourrait s'attendre à ce qu'il n'y ait eu aucun changement d'API avant la sortie de la version 1.2, cela ne semble pas avoir été le cas, si bien que même la version 1.1.3 brisait certaines choses écrites pour la 1.1.2. Le module jQuery Update ne pouvait donc pas être mis à jour facilement. Résultat : il n'y a eu aucune façon simple d'intégrer dans une installation D5 de nouveaux plugiciels jQuery exigeant une version supérieure à 1.1.2 : le Form Plugin, le Live Query Plugin et l'extraordinaire successeur d'Interface, le UI Plugin, sont tous essentiellement hors de portée des utilisateurs de D5.
Évidemment, si vous êtes Earl Miles, le créateur de Panels et de Views, vous pouvez simplement écrire votre propre jQuery pour obtenir les nouvelles fonctionnalités, mais la plupart d'entre nous ne sont tout simplement pas à ce niveau. Toutefois, ne désespérez pas : au moment même où j'écris ces lignes, des gens travaillent à créer jQuery Update 2.0, qui nous amènera à jQuery 1.2.3; il ne nous faudra alors qu'une version D5 du module UI de Dmitri (le module Drupal 6 qui fournit le plugiciel jQuery UI, un peu comme le module Interface fournissait le plugiciel Interface) et nous aurons plus d'éléments déplaçables, de zones de dépôt, d'onglets, d'accordéons, de boîtes de dialogue modales et d'éléments sélectionnables que nous ne saurons quoi en faire.
Dans la deuxième partie, nous examinerons les changements qu'apporte Drupal 6 du point de vue de jQuery, notamment leurs conséquences sur la façon d'inclure jQuery dans nos modules et les nouvelles fonctionnalités qui s'offrent à nous.
Note : tout le mérite revient à Steve K pour le logo du ninja jQuery/Drupal :-)
[Mise à jour] Voici le lien vers la deuxième partie