Suite à la première remarque de Grégo dans son commentaire, j’ai modifié quelque peu l’étape 5 pour tenter d’avoir le fonctionnement suivant : Lors du clic sur l’onglet, le dit onglet s’active directement et ce n’est que le panel de contenu qui se met à jour via Ajax.
Pour cette 7ème étape j’ai, pour des raisons pratiques, utilisé jQuery pour la partie javascript.
PageEtape7.java
Dans un premier temps, ajoutons au header de la PageEtape7 les ressources javascript :
... add(JavascriptPackageResource.getHeaderContribution(this.getClass(), "jquery-1.3.2.min.js")); add(JavascriptPackageResource.getHeaderContribution(this.getClass(), "jquery.blockUI.js")); add(JavascriptPackageResource.getHeaderContribution(this.getClass(), this.getClass().getSimpleName() + ".js")); ...
Ensuite dans l’implémentation de la méthode onOngletClick on supprime la ligne concernant le rafraichissement du panel ongletsPanel.
public void onOngletClick(AjaxRequestTarget _target, Integer _index) { // Menu getOngletsModel().getObject().setIndexOngletActif(_index); // _target.addComponent(ongletsPanel); <= ligne commentee // Content WebMarkupContainer newContentContainer = new WebMarkupContainer("contentContainer"); newContentContainer.setOutputMarkupId(true); newContentContainer.add(getOngletsModel().getObject().getPanelContent(getOngletsModel().getObject().getIndexOngletActif())); contentContainer.replaceWith(newContentContainer); contentContainer = newContentContainer; _target.addComponent(newContentContainer); }
PageEtape7.js
function updateOnglet(ongletActif){ ongletLast = $("li.onglet").size()-1; $("li.onglet").each( function( ongletNumber ){ if (ongletActif == ongletNumber) { if (ongletActif == ongletLast) cssClass = "onglet lastActif"; else cssClass = "onglet actif"; } else { if (ongletNumber == ongletLast) cssClass = "onglet lastNonActif"; else { if (ongletNumber == ongletActif - 1) cssClass = "onglet preActif"; else cssClass = "onglet preNonActif"; } } $(this).attr("class", cssClass); } ); } $(document).ready(function() { $('li.onglet a').click(function() { $('div.contentContainer div').block({ message: '<h3>Chargement</h3>', css: { border: '3px solid #a00' } }); }); Wicket.Ajax.registerPostCallHandler(function() { $('div.contentContainer div').unblock(); }); Wicket.Ajax.registerFailureHandler(function() { $('div.contentContainer div').unblock(); }); updateOnglet(0); });
On retrouve une déclaration de busy indicator pour notre panel de contenu, ainsi que la fonction javascript qui permet de mettre à jour la classe css de nos onglets (comme le faisait la classe OngletClassAttributeModel dont on à d’ailleurs plus besoin)
OngletAjaxLink
Dans le PanelOnglets, nous utilisions une ListView contenant des AjaxLink. Chaque AjaxLink possède son propre AjaxEventBehavior qui se charge d’écrire le code javascript qui va bien dans l’attribut onclick de notre lien.
J’ai donc décidé de créer mon propre OngletAjaxLink pour avoir la main sur l’AjaxEventBehavior.
public abstract class OngletAjaxLink<T> extends AjaxLink<T> { private static final long serialVersionUID = 8901356885531358065L; private int index; public OngletAjaxLink(final String _id, final int _index) { this(_id, _index, null); } public OngletAjaxLink(final String _id, final int _index, final IModel<T> _model) { super(_id, _model); this.index = _index; add(new AjaxEventBehavior("onclick") { private static final long serialVersionUID = -4741175918353307169L; @Override protected CharSequence getEventHandler() { CharSequence handler = super.getEventHandler(); return "updateOnglet(" + index + "); " + handler; } @Override protected void onEvent(AjaxRequestTarget _target) { onClick(_target); } }); } public abstract void onClick(AjaxRequestTarget _target); }
La partie la plus importante est la surcharge de la méthode getEventHandler() qui nous permet d’ajouter un code javascript (le updateOnglet(" + index + ");)avant le code initial de l’
AjaxEventBehavior
PanelOnglets.java
Plus besoin de la surcharge de la méthode newItem(int _index) vu qu’on a plus besoin de l’OngletClassAttributeModel ce qui du coup simplifie un peu cette classe.
public class PanelOnglets extends Panel { private WebMarkupContainer ongletsContainer; private IOngletObserver observer = null; private CompoundPropertyModel<OngletsModelObject> ongletsModel; public PanelOnglets(String _id, CompoundPropertyModel<OngletsModelObject> _ongletsModel) { super(_id); // CSS add(CSSPackageResource.getHeaderContribution(this.getClass(), this.getClass().getSimpleName() + ".css")); this.ongletsModel = _ongletsModel; // Repeater des onglets ListView<String> onglets = new ListView<String>("onglet", ongletsModel.getObject().getListOnglets()) { @Override protected void populateItem(final ListItem<String> _item) { String libelle = _item.getModelObject(); OngletAjaxLink<Object> linkOnglet = new OngletAjaxLink<Object>("linkOnglet", _item.getIndex()) { private static final long serialVersionUID = 4946012865050423693L; @Override public void onClick(AjaxRequestTarget target) { // Pour l'exemple, on patiente un peu pour voir le busyIndicator try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } // Delegation de l'action a l'Observer if (observer != null) { observer.onOngletClick(target, _item.getIndex()); } } }; Label labelOnglet = new Label("labelOnglet", libelle); linkOnglet.add(labelOnglet); _item.add(linkOnglet); } }; // Container des Onglets ongletsContainer = new WebMarkupContainer("ongletsContainer"); ongletsContainer.setOutputMarkupId(true); ongletsContainer.add(onglets); add(ongletsContainer); } public PanelOnglets setObserver(IOngletObserver observer) { this.observer = observer; return this; } }
PanelOnglets.html
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd" > <head> </head> <body> <wicket:panel> <ul class="onglets" wicket:id="ongletsContainer"> <li wicket:id="onglet" class="onglet"><a wicket:id="linkOnglet"><span wicket:id="labelOnglet">[labelOnglet]</span></a></li> </ul> </wicket:panel> </body> </html>
Encore une fois, j’ai mis à jour le résultat étape par étape et voilà le code source (sous la forme d’un projet Eclipse, il vous faudra aussi maven pour la gestion des dépendances). voir les corrections dans l’article : Onglets Dynamiques : Etape 7 – Corrections
edit : Attention apparemment firebug génère une erreur lors du clic sur un onglet de l’étape 7, mais c’est à cause d’un bug de firebug (sic). Désactivez le quand vous allez sur le résultat étape par étape et tout ira bien.
Imprimer cet article
[...] Onglets Dynamiques : Etape 7 – Corrections Tutorial, Wicket par nicogiard Add comments [...]