Désormais, vous pourrez trouver sur le dépôt maven de wiQuery deux nouvelles versions (encore une fois !): la 1.0.3 and surtout la 1.1 !! Celle-ci se base sur jQuery UI 1.8.5 et offre de nouveaux composants. Mais surtout, un gros travail de refonte et d’actualisation a été apporté vis-à-vis des nouveautés qu’apporte Wicket (nous nous basons désormais sur la version 1.4.12 où nous pouvons trouver un tout nouveau listener depuis la 1.4.9:  IComponentOnBeforeRenderListener).

Désormais, et vu que le nombre de committers officiels a augmenté, nous allons essayer de publier tous les deux mois une nouvelle version de wiQuery.

La prochaine version, la 1.2, est donc prévu pour courant Janvier. Elle proposera aux utilisateurs des composants de bases plus poussés et aussi la possibilité d’utiliser les modèles Wicket. Également, de nombreux axes de travail sont prévus:

• Création d’un site dédié à wiQuery
• Documentation renforcée
• Exemples / démonstrations renforcés
• Étude de faisabilité pour un wiQuery-mobile (avec jQuery mobile)
• Création d’une extension avec prévision d’insertion dans le cœur de wiQuery qui utilisera les widgets Wijmo !! Ce sont des widgets avancées qui se basent sur jQuery UI !! Petits exemples: http://wijmo.com/Wijmo-Complete/samples/

Pour plus d’informations, rendez-vous sur le site officiel du projet: http://code.google.com/p/wiquery/

De grands remerciements aux membres de jWeekend, de Wicket et aux committers officiels qui ont permis la sortie de cette 1.1.

Bon weekend à tous !!

Après 6 mois d’attente, l’équipe wiQuery est fière de sortir non pas une mais deux versions de son framework: la version 1.0.2 et la version 1.1-alpha.

La version 1.0.2 corrige de nombreux bugs (certains majeurs) et propose enfin des options de configurations pour le framework wiQuery. Également, il n’y a plus besoin de s’embêter pour l’initialisation de wiQuery.: grâce à la mécanique Wicket, cela se fait tout seul !! (il suffit d’importer le jar dans son projet, et voilà !).

La version 1.1-alpha est une pré-version où nous avons basculé sur jQuery UI 1.8.4 et proposons ainsi de nouveaux composants, tels que Button, AutoComplete ou encore InlineDatePicker.

Pour plus d’informations, rendez-vous sur le site officiel du projet: http://code.google.com/p/wiquery/

De grands remerciements aux membres de jWeekend, aux commiters officiels (Lionel Armanet, Ernesto Reinaldo Barreiro, Julien Roche et François Delalande) et aux simples contributeurs qui ont permis de faire avancer ce projet.

Bon weekend à tous !!

wiQuery est un projet OpenSource (régi sous la licence MIT), qui se propose de coupler et de faciliter l’utilisation de Wicket avec jQuery afin d’obtenir des composants et des comportements riches, mais aussi d’offrir des composants Wicket couplés avec jQuery UI et de pouvoir insérer les plugins jQuery existant.

Introduction

Pourquoi jQuery ? Tout simplement parce que c’est un framework javascript qui est simple d’utilisation, performant, et aussi non intrusif. De plus, de très nombreux plugins sont issus de ce framework, notamment jQuery UI, qui propose des composants, des effets et des comportements très intéressants (encore plus dans la prochaine version).

Quelques composants riches

Si nous voulions intégrer un plugin jQuery dans Wicket, que nous faudrait-il faire ?

1. Importer les ressources javascripts et CSS liées à ce plugin
2. Générer / écrire du code javascript / jQuery afin de pouvoir exécuter le plugin
3. Ecrire le code Java / Wicket, ainsi que le fichier XHTML lié.

wiQuery se propose de s’occuper des deux premiers points, de faciliter l’écriture du code Wicket mais aussi de générer et d’injecter le code javascript au bon moment, à savoir soit au chargement de la page, soit lors d’une transaction Ajax.

Structure de wiQuery

La base de wiQuery se constitue d’un générateur de code jQuery, qui permet ainsi à la mécanique de plugin de les utiliser dans des composants ou des behaviors Wicket. Ce système de plugin a permis d’insérer tous les composants, effets et comportements actuels de jQuery UI et permet également d’intégrer n’importe quel plugin jQuery et d’y accéder via Wicket.

Le générateur de javascript / jQuery

Le générateur code se divise en trois grands types d’objets :

• JsStatement : C’est le type principal. Il a pour but de chainer des portions de code javascript et offre des méthodes afin d’écrire de manière simplifiée et guidée du code jQuery.
• JsQuery : Cet objet se base sur l’élément précédent afin de créer un sélecteur jQuery à qui nous pouvons chainer des méthodes et des arguments.
• JsScope : Cet objet a pour but de créer une fonction (closure) javascript.

Ainsi, pour générer le code jQuery suivant pour l’appliquer sur un composant Wicket :

Il nous suffit de taper le code wiQuery suivant :

Petite remarque tout de même : il est utile d’utiliser ce générateur dans le cas où nous voulons générer des petites portions de code Javascript / jQuery. Si votre objectif est d’intégrer un plugin de votre composition, il vaut mieux écrire le fichier .js et l’importer en tant que ressource wiQuery.

Comment intégrer wiQuery ?

Il existe deux moyens simples d’intégrer wiQuery à son application Wicket :

1. Hériter de la classe WiQueryWebApplication,
2. Si le point précédent ne vous est pas possible, il suffit dans la méthode init() de votre classe Application d’insérer le bout de code suivant, activant ainsi pleinement wiQuery :

Evénements Javascript

Le framework wiQuery vous permet de coupler vos composants Wicket à des événements Javascripts. Dans un premier temps, nous pouvons juste exécuter du code javascript simple, côté client :

Dans un second temps, l’événement javascript peut effectuer une transaction Ajax, afin de pouvoir exécuter un traitement côté serveur :

wiQuery UI

Comme dit plutôt dans cet article, wiQuery a intégré le framework javascript jQuery UI. Ainsi, nous pouvons disposer en Wicket des composants suivants :

• Un accordéon
• Une fenêtre de dialogue
• Un slider
• Une barre de progression
• Des onglets
• Un datepicker

Pour ce qui concerne les behaviors Wicket, nous avons les comportements suivants :

• Draggable
• Droppable
• Sortable
• Resizable
• Selectable

Il est à noter que ces derniers peuvent s’utiliser de deux manières : soit de manière classique, activant ainsi le comportement, soit de manière Ajax. Dans ce dernier cas, selon le comportement, des événements importants pourront être relevés et transmis via Ajax. Ces événements seront répercutés directement dans votre code Wicket. Par exemple sur le comportement « Droppable », nous aurons un événement levé et dans la méthode wiQuery « onDrop » (que vous aurez à déclarer), le composant Wicket qui aura été déposé dans la zone de drop sera fourni.

Créer ses plugins

wiQuery est un framework d’intégration. De ce fait, il permet d’élaborer des plugins wiQuery et de les intégrer / exécuter au sein du framework. C’est ainsi qu’a été intégré le plugin jQuery UI.

Pour cela, vous avez accès :

1. A l’interface IWiqueryPlugin qui vous demandera d’implémenter deux méthodes. L’une demandant de charger les ressources Javascript et CSS de votre plugin. L’autre demande de générer le code Javascript / jQuery pour faire fonctionner le plugin. La présence de cette interface permet de charger automatiquement le cœur de jQuery.
2. A l’annotation @WiqueryUIPlugin. Elle permet d’indiquer à wiQuery qu’il faut le cœur de jQuery UI ainsi que le thème jQuery UI.

De ce fait, si nous voulions écrire un plugin pour faire marcher le Slider jQuery UI (déjà présente dans l’API), il nous suffirait de taper le code suivant :

Appliquer des thèmes

Des thèmes (issues de jQuery UI) peuvent être appliqués sur les composants et behaviors wiQuery UI. Pour cela, rien de plus simple, il suffit d’implémenter sur votre classe d’application Wicket l’interface IThemableApplication :

De plus, il possible d’appliquer des parties de ces thèmes sur des composants Wicket non issus de wiQuery. Par exemple, vous avez un bouton, et vous voulez qu’il reprenne le style du thème en cours, il vous suffira de faire :

L’avenir de wiQuery

A l’heure actuelle, la version de wiQuery est la 1.0, et se base sur Wicket 1.4.3, jQuery 1.3.2 et sur jQuery UI 1.7.2. Tous les composants de jQuery UI ont été intégrés, une mécanique de génération de javascript a été mise en place et un système permet d’appliquer les thèmes. De plus, une petite communauté se forme, et sur le site de wiQuery, vous pourrez trouver des vidéos d’aide et une application de démonstration, où pour chaque exemple, vous avez le code Java / XHTML.

La prochaine mouture de wiQuery est la 1.1. Elle s’efforcera de monter les nouvelles versions des différents frameworks utilisés: jQuery 1.4, jQuery 1.8 (avec les nouveaux composants,) et Wicket 1.4.6. L’objectif sera également de renforcer la communauté wiQuery, de fournir plus de documentations, de vidéos, d’exemples, mais surtout de mettre en place une communauté de plugins wiQuery (dont certains seront développés par l’équipe de wiQuery)  que vous pourrez ainsi télécharger et utiliser au sein de vos applications Wicket.

La mouture wiQuery 1.2 quant à elle comprendra la possibilité d’utiliser les IModel de Wicket comme options aux composants wiQuery. Elle s’efforcera également de préserver l’état des composants côté serveur et aussi de proposer des composants wiQuery UI plus poussé.

Des commiters, des développeurs ou tout simplement des personnes curieuses de connaître Wicket, se sont retrouvés dans les locaux de la librairie Floyds pour assister au London Wicket Event. Lors de cette session d’environ quatre heures, cinq présentations nous ont été faites :

• L’intégration de Javascript dans les applications Wicket,
• WiQuery,
• Brix,
• Les composants de Sven Meier,
• Wicket 1.5

De plus, Martijn Dashorst, auteur de Wicket in Action, nous a annoncé la sortie prochaine de la seconde édition de son livre.

L’intégration de Javascript dans les applications Wicket

Jeremy Thomerson, commiter américain dans le projet Wicket, est venu nous parler du besoin de pouvoir insérer via des composants ou des behaviors Wicket des portions de code Javascript (pour pouvoir rendre plus dynamique nos applications ainsi que de pouvoir utiliser l’internalisation que nous offre Wicket via la gestion des ResourceModel) et aussi les différents moyens pour y arriver.

La première approche est d’utiliser un behavior Wicket, et dans la méthode renderHead, indiquer les ressources Javascript à utiliser, ainsi que le code Javascript à exécuter lors du chargement de la page. Un exemple de code basique :

Dans un second, nous pouvons ajouter à notre behavior la méthode bind. Celle-ci va nous permettre de savoir sur quel composant Wicket le behavior sera utilisé. Ainsi, en récupérant l’identifant HTML que Wicket génère, nous pourrons agir sur le composant via notre Javascript.

Enfin, une dernière approche est d’utiliser un IHeaderContributor sur les composants Wicket qui va nous offrir la méthode renderHead que nous avons vu précédemment.

Grâce à ces différentes techniques, nous pourrions envisager de coupler les validateurs Wicket avec des plugins de validation Javascript, comme le plugin jQuery « jVal ». Nous n’aurions qu’à créer un behavior qui lors du bind, ajout le validateur souhaité (par exemple, MaximumValidator) et aussi d’insérer le Javascript équivalent au validateur sur le composant.

wiQuery

Lors de ce séminaire, Lionel Armanet (accompagné de François Delalande et de Julien Roche) a présenté l’un des projets d’OD labs : wiQuery.

wiQuery est un framework d’intégration, permettant de coupler Wicket avec jQuery, afin de pouvoir élaborer des composants et des behaviors riches.

Ce framework a été conçu de sorte que les développeurs puissent facilement coupler un plugin jQuery avec Wicket. De plus, le framework propose d’utiliser tous les composants, effets et behaviors de la librairie jQuery UI, ainsi que la possibilité d’appliquer les thèmes de jQuery UI à travers son application.

La mécanique interne s’assure de charger les ressources jQuery et jQuery UI nécessaires aux plugins (ainsi que toutes ressources nécessaires qu’auraient déclarés les développeurs), de générer le javascript, et l’insérer lors du chargement de la page ou si nécessaire de l’injecter lors d’une transaction Ajax.

La version 1.0 est officiellement sortie le 18 novembre, et est téléchargeable sur le site de wiQuery.

Brix

Matej Knopp, commiter Wicket, est venu nous présenter Brix.

Brix est un framework basé sur Wicket et JCR (Java Content Repository).  C’est un CMS qui permet :

• De gérer des pages
• De gérer des ressources (images, …)
• De gérer des templates.

Ainsi, une page Wicket peut être décorée avec un template Brix (lui-même pouvant contenir d’autres templates) avec l’utilisation de Tile.

Un Tile est un composant de gestion de contenu quelconque. Un ensemble de tags XHTML dédiés à brix sont utilisés pour insérer des tiles dans un template. Avec Brix, l’écriture d’un tile se limite à l’implémentation d’une interface. Cette interface demande d’implémenter deux factory methods : l’une pour le contenu du tile, l’autre pour son administration.

Brix permet d’élaborer son site de manière simple sans avoir une grande connaissance de l’HTML, ni même de Wicket. En effet, Brix fournit un backoffice pour administrer tous les composants, les pages et le templates utilisés (tel un vrai CMS). Des efforts ont aussi été faits sur la gestion d’urls, gros point faible de Wicket pour le référencement : Avec Brix, nous avons une application pouvant être administrée par un backoffice et surtout qui sera optimisée pour le référencement.

Brix offre également la possibilité de gérer les menus, ainsi qu’un ensemble de variables pour paramètrer les templates.

En résumé, c’st un outil d’aide à la génération d ‘une ossature pour son projet Wicket, où l’on définit une structure de nos pages à afficher (avec une configuration pour savoir comment elle réagit), avec la définition des différents menus et de ressources. A noter la compatibilité de Brix avec WebDav.

Les composants de Sven Meier

Sven Meier, codeur Wicket depuis maintenant cinq ans, est venu nous parler de trois projets qu’il mène de front :

• Wicket-Tree
• Wicket-DnD
• Wicketer

Wicket-Tree est un projet nous proposant d’insérer dans nos applications Wicket un composant de type TreeView. Celui-ci a pour but de remplacer le TreeView de Wicket-extension, qui est relativement lourd, compliqué et aussi utilisant bizarrement le TreeModel de Swing.

Wicket-DnD propose de pouvoir utiliser les composants Wicket via des Drag & Drop.

Enfin, Wicketer est un projet offrant la possibilité d’intéger dans son application un file manager.

Wicket 1.5

Martej Knopp nous a parlé des principales modifications de la prochaine mouture de Wicket : Wicket 1.5. Il semblerait que les commiters de Wicket ont la volonté forte de faire une refonte profonde de leur framework, notamment sur deux points majeurs : le RequestCycle (responsable du processus des requêtes) et de la gestion des urls.

La refonte du RequestCycle car celui-ci est jugé par les commiters comme étant beaucoup trop volumineux, beaucoup trop compliqué et extrêmement dur à appréhender. La nouvelle version sera (est) beaucoup plus légere et simple, avec un gain de traitement notable.

De même, la refonte de la gestion des urls était jugé nécessaire car également très compliqué, énormément de code dédié, beaucoup d’abstractions mais la plupart agissant sur un mauvais niveau et une hiérarchie très complexe. Le nouveau gestionnaire offrira des urls plus simple, ainsi qu’une possibilité de personnaliser ce gestionnaire grâce à un système de délégation. Ceci permettra de résoudre une attente des développeurs afin de faciliter le référencement de leurs applications Wicket.

De plus, ces deux refontes permettront de définir une nouvelle version de WicketTester.

Un autre point intéressant : l’évolution de l’API Javascript Ajax de Wicket. Les commiters souhaiteraient se baser sur un framework Javascript externe tel que YUI ou encore jQuery. Des expérimentations sont en cours afin de tester les différentes implémentations et d’envisager les différentes possibilités de migration.

En bref

Cette conférence nous a permis de découvrir quelles techniques pour améliorer nos applications Wicket, mais surtout de découvrir des frameworks permettant d’enrichir ou de faciliter la conception de nos sites Web, et enfin de découvrir les évolutions ambitieuses de Wicket 1.5.

A suivre !!

jWeekend

Le prochain séminaire aura lieu le samedi 21 Novembre, où Lionel Armanet présentera l’un des projets d’OD Labs qu’il a fondé : wiQuery (framework proposant l’élaboration de composants Wicket utilisant le framework javascript jQuery et jQuery UI). Il sera accompagné de François Delalande et de Julien Roche.

Egalement, nous aurons une intervention de Jeremy Thomerson qui viendra nous parler de l’intégration de javascript avec Wicket. Matej Knopp viendra nous parler de BRIX, framework proposant un gestionnaire de contenu basé sur Wicket et sur JCR (Java Content Repository). Et enfin, Alastair Maw (membre et un des leaders du projet Wicket)  nous exposera l’évolution et  l’état actuel de Wicket.

Nous ne manquerons pas de vous faire un compte rendu dans notre blog de tout ce qui s’est dit à ce séminaire.

A très bientôt.

L’équipe de wiQuery est fière de vous présenter ses premiers screencasts vidéo. Le projet wiQuery intègre les technogologies JavaScript jQuery et jQuery UI avec le framework web java Wicket. WiQuery est sponsorisé par odlabs, le label open source d’Objet Direct.

Au programme, Julien Roche nous propose deux vidéos :

1. Comment installer wiQuery dans une application existante (version anglaise)
2. Utilisation du composant tabs, un composant UI pour la gestion d’onglets (version anglaise)

Plus d’infos sur notre site web et notre google code !

A bientôt pour de nouvelles vidéos, et un grand bravo à Julien pour ses tutoriaux !

WickeXt devient donc Wiquery, l’intégration de jQuery, jQuery UI et Wicket.

La version 1.0 de Wiquery ne concernera pas uniquement un changement de nom pour le projet, mais intégrera tous les composants de jQuery UI, et facilitera encore la génération de code JavaScript depuis le framework Wicket.