Oct 06

Premiers pas avec JQuery4Wicket

JQuery, JQuery4Wicket, Tutorial, Wicket par butcho Add comments

Voici le premier article dédié à l’utilisation de JQuery4Wicket.
Une première approche qui vous montre comment utiliser simplement JQuery dans vos applications Wicket.
Cet article nécessite quelques connaissances de base en Wicket et JQuery. NooCodeCommit.com ne pourra être tenu responsable d’éventuelles séquelles rétiniennes permanentes ou temporaires dues à la lecture des lignes qui suivent ;) .

Préparation

Je vais passer ici la partie qui consiste à créer une application web avec Wicket.
Si vous avez besoin d’une piqure de rappel, je vous invite à consulter ce post de nicogiard.

La première chose à faire pour utiliser JQuery4Wicket est de copier le .jar de la dernière version dans votre répertoire WEB-INF/lib

Premiers pas

Lorsque vous utilisez JQuery dans des pages HTML classiques, vous devez insérer dans la section head de votre page les fichiers .js correspondants.

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>

Pour pouvoir utiliser JQuery dans vos pages, il faut donc demander à Wicket d’insérer les fichiers souhaités.
Pour cela, vous allez ajouter dans le constructeur de votre page la ligne suivante

JQCore.init(this);

Ce qui nous donne tout simplement

import org.apache.wicket.markup.html.WebPage;
import com.noocodecommit.wicket.stuff.jquery.JQCore;
 
public class TutorialPage extends WebPage
{
  public TutorialPage()
  {
    super();
    JQCore.init(this);
  }
}

Si vous éxécutez la page dans votre navigateur web préféré et que vous affichez la source,
vous pourrez voir dans la section head les lignes suivantes

<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.JQCore/lib/jquery.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.JQAnimation/lib/effects.core.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.blind.JQBlindPlugin/lib/effects.blind.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.bounce.JQBouncePlugin/lib/effects.bounce.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.clip.JQClipPlugin/lib/effects.clip.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.drop.JQDropPlugin/lib/effects.drop.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.explode.JQExplodePlugin/lib/effects.explode.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.fold.JQFoldPlugin/lib/effects.fold.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.JQAnimation/lib/effects.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.highlight.JQHighlightPlugin/lib/effects.highlight.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.pulsate.JQPulsatePlugin/lib/effects.pulsate.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.scale.JQScalePlugin/lib/effects.scale.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.shake.JQShakePlugin/lib/effects.shake.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.slide.JQSlidePlugin/lib/effects.slide.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.effects.transfer.JQTransferPlugin/lib/effects.transfer.js"></script>
<script type="text/javascript" src="resources/com.noocodecommit.wicket.stuff.jquery.plugin.ui.core.JQUiCorePlugin/lib/ui.core.js"></script>

En utilisant la méthode [JQCore.init()], Wicket a lui même inséré les bons fichiers .js en gérant les dépendances entre les différents composants.
L'utilisation de cette méthode garantit qu'un script utilisant JQuery, JQueryUI ou n'importe quel effet visuel s'éxécutera correctement dans votre page.

Pour illustrer tout cela, nous allons tenter d'animer un élément de la page lors d'un click sur un lien.

Dans le code HTML de votre page, déclarez une div et un lien comme suit

<div style="height:50px;min-height:50px;">
<div wicket:id="block" style="border: 2px solid #0090DF;background-color: #68BFEF;width: 80px;height: 30px;"></div>
</div>
<br>
<a wicket:id="effect1">Toggle Vertical</a>

Dans le code java, dans le constructeur de la page ajoutez le code suivant

// -- cible de l'animation
final Label block = new Label("block", "block");
block.setOutputMarkupId(true);
add(block);
 
// -- Effect toggle Vertical
add(new AjaxLink("effect1")
{
    public void onClick(AjaxRequestTarget target)
    {
        target.appendJavascript(JQAnimation.toggle(block, new JQBlind(JQBlindOptions.DIRECTION_VERTICAL)));
    }
});

Compilez, puis lancez la page dans votre navigateur lorsque vous cliquez sur le lien, votre div s’anime.

Analyse

Nous allons d’abord nous intéresser à la source de la page générée par Wicket.

On remarque tout d’abord que Wicket a remplacé notre [wicket:id="block"] par un id unique.
Même chose pour notre lien [wicket:id="effect1"].
(note : l'id peut être différent sur votre page. L'important est de noter que Wicket a changé cette valeur.)

<div id="block3" class="drag">block</div>
<br>
<a id="effect14" onclick="var wcall=wicketAjaxGet(';jsessionid=C2842056B05C07AF433375040900EAB4?wicket:interface=:0:effect1::IBehaviorListener:0:',null,null, function() {return Wicket.$('effect14') != null;}.bind(this));return !wcall;" href="#">Hide Vertical</a>

On peut également remarquer ; alors que dans notre page HTML nous n’avions rien renseigné de particulier par rapport à l’événement [onclick] du lien ; que celui ci est maintenant affecté à une action.

onclick="var wcall=wicketAjaxGet(';jsessionid=C2842056B05C07AF433375040900EAB4?wicket:interface=:0:effect1::IBehaviorListener:0:', null, null, function() {return Wicket.$('effect14') != null;}.bind(this)); return !wcall;"

La couche ajax de Wicket utilise la fonction javascript [wicketAjaxGet()] pour effectuer des appels au serveur à partir de javascript.

C'est sur ce principe de base que fonctionne JQuery4Wicket.

Je m'attarderais plus en détail sur cette fonction dans un prochain post.
L'essentiel est de noter que cet appel javascript va déclencher sur le serveur l'éxécution d'une portion de code.
Pour nous il s'agit du code suivant

target.appendJavascript(JQAnimation.toggle(block, new JQBlind(JQBlindOptions.DIRECTION_VERTICAL)));

Lorsque vous cliquez sur votre lien, le block s’anime.
Dans la fenetre WICKET AJAX DEBUG vous pouvez voir que Wicket a éxécuté un appel Ajax.

INFO: focus set on effect14
INFO:
INFO: Initiating Ajax GET request on ;jsessionid=C2842056B05C07AF433375040900EAB4?wicket:interface=:0:effect1::IBehaviorListener:0:&amp;random=0.21775740468311766
INFO: Invoking pre-call handler(s)...
INFO: Received ajax response (172 characters)
INFO: <?xml version="1.0" encoding="UTF-8"?><ajax-response><evaluate><![CDATA[$('#block3').toggle('blind', {direction:'vertical'}, 400, function(){});]]></evaluate></ajax-response>
INFO: Response parsed. Now invoking steps...
INFO: Response processed successfully.
INFO: Invoking post-call handler(s)...
INFO: Calling focus on effect14
INFO: focus set on wicketDebugLink

On retrouve ici une trace de notre appel javascript vers le serveur

INFO: Initiating Ajax GET request on ;jsessionid=C2842056B05C07AF433375040900EAB4?wicket:interface=:0:effect1::IBehaviorListener:0:&amp;random=0.21775740468311766

et également une trace du javascript que nous avons ajouté à la requete ajax.

INFO: <?xml version="1.0" encoding="UTF-8"?><ajax-response><evaluate><![CDATA[$('#block3').toggle('blind', {direction:'vertical'}, 400, function(){});]]></evaluate></ajax-response>

C’est cette portion de code javascript qui a été éxécutée pour animer notre div.
La portion de code javascript qui utilise JQuery

$('#block3').toggle('blind', {direction:'vertical'}, 400, function(){});

est en réalité la traduction par JQuery4Wicket du code

JQAnimation.toggle(block, new JQBlind(JQBlindOptions.DIRECTION_VERTICAL))

dans l’absolu, nous aurions pu nous abstenir d’utiliser la classe JQAnimation et passer du javascript à la fonction [appendJavascript()]

target.appendJavascript("$('#" + block.getMarkupId() + "').toggle('blind', {direction:'vertical'}, 400, function(){});");

Conclusion

Félicitations, vous avez utilisé JQuery dans votre page web et pourtant vous n’avez pas écrit une seule ligne de javascript pour cela.
Avec une simple ligne de code ajoutée dans le constructeur de votre page, vous avez maintenant la possibilité d’ajouter du code javascript utilisant JQuery à vos requetes Wicket Ajax.

JQuery4Wicket n’en est qu’à ses débuts, mais avec l’aide de nicogiard, nous allons bosser pour améliorer encore le moteur et fournir de plus en plus de fonctionnalités.

Pour rappel, le site de démo se trouve ici

Partagez:
  • E-mail this story to a friend!
  • Bookmarks .fr
  • Google
  • description
  • Digg
  • Facebook
  • del.icio.us
  • Wikio
  • YahooMyWeb

9 Responses to “Premiers pas avec JQuery4Wicket”

  1. Grégo Says:
    October 6th, 2008 at 17:41

    Petite question à chaud : est-il possible de ne charger que les scripts JS dont on a besoin (genre core + dragndrop)?
    Ce serait sympa de mettre un lien vers l’exemple final :)

  2. nicogiard Says:
    October 6th, 2008 at 18:49

    Lien rajouté Grégo!

  3. butcho Says:
    October 6th, 2008 at 19:06

    Concernant la question sur le chargement des scripts .js, JQuery4Wicket charge lui même une “base” qui permet de faire tourner un minimum de fonctions (cf : exemple dans le tutoriel). Effectivement ça fait un peu de pollution si tu n’as pas besoin de tout, mais c’est toujours moins pire en terme de poids total que de charger jquery + jquery.ui.all .

    Lorsque tu auras besoin de faire du drag’n'drop, JQuery4Wicket fera le chargement pour toi en gérant les dépendances éventuelles.
    Les ajouts par rapport à la base sont limités au strict minimum pour faire fonctionner le plugin voulu.

    Enfin pour l’exemple final, tu le découvriras en faisant le tuto :p
    Mais comme je sais que tu es une feignasse, je te file le lien direct vers le site de démo ;)

    http://www.noocodecommit.com/jquery4wicket/demo/blind

  4. Jawher Says:
    October 7th, 2008 at 00:25

    Hello,
    Merci pour cette introduction fort utile :)

    Sinon:
    - Comptez vous rendre les sources disponibles ?
    - N’avez vous pas envisagé d’utiliser une approche à base de builders au lieu de la surcharge ? quand on voit par exemple qu’il y’a 12 variantes de la méthode JQAnimation.show, ça fait peur :D
    J’avais pensé à un truc fluide (Fluent Interfaces) du genre:

    JQAnimation.component(block).animation(JQAnimation.ANIMATIONMODE_TOGGLE)
    .direction(JQBlindOptions.DIRECTION_VERTICAL)
    .duration(400).build(target);

    Histoire de rester fidèle à l’esprit de JQuery et d’être plus lisible ;)

    - Pour les animations par exemple, pas moyen simple de les déclencher en local (pas d’Ajax) ? ça peut se faire par exemple en faisant :

    effect2.add(new SimpleAttributeModifier(”onclick”, JQAnimation.show(block, new JQBlind(JQBlindOptions.DIRECTION_VERTICAL))));
    add(effect2);

    En fait non, maintenant que j’y pense, je crois que c’est la méthode la plus flexible, excepté peut être le fait d’ajouter un composant spécial qui correspond à un lien et qui joue sur le onclick.

    Voili voilou.
    Keep the cool stuff coming ;)

  5. nicogiard Says:
    October 7th, 2008 at 14:19

    Bonne idée concernant la notion de “Fluent Interface”, j’vais regarder ça prochainement histoire de voir si ça peut être intégrer rapidement.

    On à déjà trouvé quelques axes d’amélioration, donc on va essayer de corriger tout ça.

    Merci en tous cas Jawher pour avoir pris le temps de regarder le boulot de butcho!

  6. butcho Says:
    October 7th, 2008 at 19:06

    Concernant la mise à dispo des sources, c’est prévu à plus ou moins court terme. Nicogiard et moi sommes actuellement en train de faire des ajustements au niveau de l’intégration des plugins JQuery. Lorsque la base sera saine, le code source sera publié je pense.

    Pour ce qui est de l’approche ajax/non ajax, c’est au choix, JQuery4Wicket fournit juste une “traduction” en javascript. Libre a toi de l’utiliser dans le contexte qui t’arrange :)

  7. nicogiard Says:
    October 13th, 2008 at 09:28

    Alors, après presque une semaine de travail acharné, nous avons, avec butcho, trouvé quelques petits loups dans la façon d’organiser les choses. Donc ça avance tranquillement, mais ça avance. Je pense qu’on va préparer un petit article pour dans pas longtemps, pour vous présenter les divers changements (et aussi pour avoir votre avis).

    De plus j’ai presque une version intéressante de Fluent Interface, que j’ai fait pour la migration du plugin Lightbox. Je vous partage tout ça très vite (enfin si mon boulot ne me met pas à genoux)

  8. Loic Says:
    October 13th, 2008 at 16:10

    Merci beaucoup pour cet exemple, cette librairie est destinée à un bel avenir je pense!

  9. butcho Says:
    October 13th, 2008 at 20:55

    Merci pour ces encouragements Loic, n’hésite pas à nous faire part de tes suggestions et tes expériences avec JQuery4Wicket pour contribuer a son amélioration :)

    Effectivement comme le dis nicogiard, nous sommes en train de revoir les mécanismes de fond sur la construction des plugins.

    Dès que tout ca est à peu près stable, on vous en reparle.

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in