Archive

Articles taggués ‘jquery ui’

wiQuery en 1.1 !!

Bonjour à tous,

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 !!

Categories: Java EE, RIA, Wiquery Tags: , , , ,

Nouvelles versions de wiQuery !!

Bonjour,

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 !!

Categories: Wiquery Tags: , , ,

Présentation de wiQuery

odlabs-logoAu sein du groupe Objet Direct est né un laboratoire de nouvelles technologies : OD Labs. L’objectif de ce dernier est d’être un pôle d’innovation, mais aussi de soutenir des projets innovants dont l’un d’entre eux se nomme wiQuery.

wiquery

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).

quelquescomposantjqueryui

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.

structurewiquery

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 :

wiQueryCode1

Il nous suffit de taper le code wiQuery suivant :

wiQueryCode2

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 :

wiQueryCode3

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 :

wiQueryCode4

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

wiQueryCode5

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.

wiQueryCode6

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 :

wiQueryCode7

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 :

wiQueryCode8

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 :

wiQueryCode9

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é.

Categories: Java EE, Wiquery Tags: , , ,

Retour sur le séminaire jWeekend

Comme promis sur ce billet, nous allons faire un retour sur le séminaire organisé par jWeekend ce samedi 21 Novembre: le London Wicket Event.

jweekendDes 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 ThomersonJeremy 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 :

jweekend_code_1

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.

jweekend_code_2

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

Lionel ArmanetLors 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 KnoppMatej 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 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 !!

Categories: Java EE, Wiquery Tags: , , , ,

Objet Direct au séminaire jWeekend

jweekendjWeekend (société spécialisée dans le développement, dans le consulting et dans la formation Wicket) organise régulièrement sur Londres (environ tous les deux mois) des séminaires Wicket: le London Wicket. Ces derniers ont pour objectif de discuter des évolutions et des idées pour enrichir ce framework, mais aussi de parler de tout projet se basant sur ce framework.

wiqueryLe 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.

Des tutoriaux vidéo pour wiQuery !

Wiquery intègre jQuery avec le framework web Apache Wicket

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 !