En furetant un petit peu sur le Wiki de Wicket, j’ai découvert cette petite astuce qui concerne le busy indicator
Le ptits gars de Wicket ont très bien fait les choses en pensant à ajouter des fallbacks avant et après leur appel ajax. Ce qui nous donne ce bout de code javascript :
|
1 2 3 4 5 6 7 8 |
window.onload = setupFunc; function setupFunc() { hideBusysign(); Wicket.Ajax.registerPreCallHandler(showBusysign); Wicket.Ajax.registerPostCallHandler(hideBusysign); Wicket.Ajax.registerFailureHandler(hideBusysign); } |
Il ne nous reste donc plus qu’a faire en sorte d’utiliser cela.
BusyIndicatorPanel.html
On commence par le panel que l’on souhaitera afficher lors d’une requete Ajax. J’ai dans un premier temps envie d’un petit panel qui s’affichera en haut à droite de l’écran.
|
1 2 3 4 5 6 7 8 9 |
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" > <head> </head> <body> <wicket:panel> <span>Chargement...</span> </wicket:panel> </body> </html> |
BusyIndicatorPanel.css
Le bout de css qui permettra d’afficher notre panel où on le souhaite :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.busyIndicator { display: none; position: absolute; top: 0; right: 0; background: rgb(255,241,168); margin: 5px 5px 0 0; z-index: 1000; width: 200; font-weight: bold; text-align: center; font-size: 1em; } |
BusyIndicatorPanel.java
C’est maintenant que les choses deviennent rigolottes :
Notre classe BusyIndicatorPanel embarque avec elle le fichier CSS, et pour pouvoir utliser l’astuce trouvée sur le wiki, un fichier JS
Sauf que pour que Wicket ajoute l’id html au résultat final, il faut ajouter la ligne setOutputMarkupId(true);. SAuf que en faisant ça Wicket génère un id à la volée.
Il nous faut donc trouver une parade pour que le fichier JS puisse avoir connaissance de cet id. L’utilisation du PackagedTextTemplate nous permet de remplacer à la volée des variables dans le fichier JS initial (ici, la variable ‘markupId’).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import org.apache.wicket.markup.html.CSSPackageResource; import org.apache.wicket.markup.html.panel.Panel; import org.apache.wicket.model.Model; import org.apache.wicket.util.template.PackagedTextTemplate; import org.apache.wicket.util.template.TextTemplateHeaderContributor; public class BusyIndicatorPanel extends Panel { private static final long serialVersionUID = 6331526342095684636L; public BusyIndicatorPanel(String _id) { super(_id); add(CSSPackageResource.getHeaderContribution(this.getClass(), this.getClass().getSimpleName() + ".css")); PackagedTextTemplate js = new PackagedTextTemplate(this.getClass(), this.getClass().getSimpleName() + ".js"); Map<String, CharSequence> map = new HashMap<String, CharSequence>(); map.put("markupId", this.getMarkupId()); add(TextTemplateHeaderContributor.forJavaScript(js, new Model((Serializable) map))); setOutputMarkupId(true); } } |
BusyIndicatorPanel.js
On utilise donc dans notre ficher JS la variable ${markupId} qui sera remplacée par le PackagedTextTemplate.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
window.onload = setupFunc; function setupFunc() { hideBusysign(); Wicket.Ajax.registerPreCallHandler(showBusysign); Wicket.Ajax.registerPostCallHandler(hideBusysign); Wicket.Ajax.registerFailureHandler(hideBusysign); } function hideBusysign() { document.getElementById('${markupId}').style.display = 'none'; } function showBusysign() { document.getElementById('${markupId}').style.display = 'inline'; } |
Initialement le Busy Indicator n’était disponible que lors des requetes Ajax de l’étape 6 du site d’example.
Mais, comme pour voir faire plaisir j’ai ajouter l’affichage du code source de chaque étape, et que cet affichage se fait dynamiquement via ajax, j’ai généralisé l’utilisation du Busy Indicator à l’ensemble du site.
Et voilà, c’est la fin de cette série d’articles qui vous ont surement permis de vous rendre compte de la facilité avec laquelle on développe un comportement Ajax avec Wicket.
A vous de jouer!
Imprimer cet article