dimanche 22 mars 2009

Wicket : Ajax et Composants complexes

Dans ce billet je vais vous présenter un exemple d’utilisation de composants évolués de Wicket et d’événements Ajax.
Nous allons utiliser le Composant Palette qui permet de faire une sélection multiple d’objets à l’aide d’une double liste.

Lors de la modification de la sélection, nous allons déclencher un événement Ajax pour afficher le nombre d’éléments sélectionnés, comme ceci :













On définit un label qui va afficher le nombre d’items sélectionnés dans le composant Palette :
final Modelt<String> labelModel = new Modelt<String>();
final Label label = new Label("nbSelected", labelModel);
add(label);

Afin de permettre une mise à jour du composant label par Ajax, on lui ajoute un id HTML :
label.setOutputMarkupId(true);


Le composant Palette est un Panel qui contient un autre composant appelé Recorder. C’est cet objet qui enregistre la sélection d’objets. C’est donc cet objet que nous allons « ajaxifier » pour déclencher un événement lors de la modification de la sélection. Pour ce faire, nous allons redéfinir la méthode newRecoderComponent de l’objet Palette :

List<Color> choices = myService.getColors() ;
final ArrayList<Color> selectedColors = new ArrayList<Color>();
IChoiceRenderer renderer = new ChoiceRenderer("name","id");
Palette palette = new Palette("palette", new Model<Color>(selectedColors), new Model<Color>((Serializable) choices), renderer, 10, true){
@Override
protected Recorder newRecorderComponent() {
Recorder recorderComponent =  super.newRecorderComponent();
recorderComponent.add(new AjaxFormComponentUpdatingBehavior("onchange"){

@Override
protected void onUpdate(AjaxRequestTarget target) {
labelModel.setObject(selectedColors.size() + " item(s) selected");
target.addComponent(label);
}

});
return recorderComponent;
}
};
myForm.add(palette);

La palette prend en paramètre dans son constructeur la liste des choix, la liste des sélections, un renderer qui permet de manipuler de faire le lien entre un objet et une valeur affichée à l’écran et enfin un booléan qui permet de spécifier si l’on veut afficher ou non les flèches haut et bas qui permettent de changer l’ordre de la sélection dans la liste de droite.
En rajoutant un objet AjaxFormComponentUpdatingBehavior au Recorder, on peut définir une action Ajax. Pour définir les composants à mettre à jour via Ajax suite à cette action, on utilise l’objet target comme ceci :
target.addComponent(label);

On demande ainsi à Wicket de recharger le composant label à chaque modification de la sélection dans l’objet Palette.
Pour rappel, Wicket utilise des fichiers html purs (sans code dynamique) pour gérer le positionnement des composants. Les composants déclarés dans la partie Java sont reliées à des balises HTML par leur id Wicket.
Voici la page HTML correspondante la classe Java présentée plus haut :













Comme vous pouvez le voir, le code html est minimaliste pour le rendu obtenu ! Après ça qui aurait envie de retravailler avec des JSP ?