Pour ce 3ème article nous allons gérer le clic sur les onglets ainsi que le rafraichissement du panel de contenu.
Avant tout, on change un peu le code en ajoutant un WebMarkupContainer qui contiendra notre panel correspondant à l’onglet cliqué :
public class PageEtape3 extends TemplatePage { private WebMarkupContainer contentContainer; public PageEtape3() { super(); ... // Panel du contenu contentContainer = new WebMarkupContainer("contentContainer"); contentContainer.setOutputMarkupId(true); contentContainer.add(new PanelGenerique("content", "panel 3 Salarié")); add(contentContainer); } }
avec le code html correspondant :
<div id="content" wicket:id="contentContainer"> <div wicket:id="content"></div> </div>
Ensuite, on reprend le code de notre ListView de l’étape 2, et on ajoute un AjaxLink :
ListView<String> onglets = new ListView<String>("onglet", listTitresOnglets) { @Override protected void populateItem(final ListItem<String> _item) { String libelle = _item.getModelObject(); AjaxLink<Object> linkOnglet = new AjaxLink<Object>("linkOnglet") { @Override public void onClick(AjaxRequestTarget target) { // Content WebMarkupContainer newContentContainer = new WebMarkupContainer("contentContainer"); newContentContainer.setOutputMarkupId(true); newContentContainer.add(new PanelGenerique("content", "panel 3 " + _item.getModelObject())); contentContainer.replaceWith(newContentContainer); contentContainer = newContentContainer; target.addComponent(newContentContainer); } }; Label labelOnglet = new Label("labelOnglet", libelle); linkOnglet.add(labelOnglet); _item.add(linkOnglet); } };
Ce que l’on fait dans le code du onClick c’est de remplacer le panel de contenu (nommé contentContainer) par celui correspondant à l’onglet cliqué (bon ici c’est juste un panel générique, mais le principe reste le même).
Ensemble du code de cette étape
Ce qui nous donne le code java complet suivant :
public class PageEtape3 extends TemplatePage { private WebMarkupContainer contentContainer; public PageEtape3() { super(); initPageTitle("Etape 3"); // Repeater des onglets List<String> listTitresOnglets = Arrays.asList(new String[] { "Salarié", "Contrat", "Planning" }); ListView<String> onglets = new ListView<String>("onglet", listTitresOnglets) { private static final long serialVersionUID = 6207330868467140651L; @Override protected void populateItem(final ListItem<String> _item) { String libelle = _item.getModelObject(); AjaxLink<Object> linkOnglet = new AjaxLink<Object>("linkOnglet") { private static final long serialVersionUID = 8616644389430286913L; @Override public void onClick(AjaxRequestTarget target) { // Content WebMarkupContainer newContentContainer = new WebMarkupContainer("contentContainer"); newContentContainer.setOutputMarkupId(true); newContentContainer.add(new PanelGenerique("content", "panel 3 " + _item.getModelObject())); contentContainer.replaceWith(newContentContainer); contentContainer = newContentContainer; target.addComponent(newContentContainer); } }; Label labelOnglet = new Label("labelOnglet", libelle); linkOnglet.add(labelOnglet); _item.add(linkOnglet); } }; add(onglets); // Panel du contenu contentContainer = new WebMarkupContainer("contentContainer"); contentContainer.setOutputMarkupId(true); contentContainer.add(new PanelGenerique("content", "panel 3 Salarié")); add(contentContainer); } }
et le Html :
<div id="menu"> <ul class="onglets"> <li wicket:id="onglet"><a wicket:id="linkOnglet"><span wicket:id="labelOnglet">[labelOnglet]</span></a></li> </ul> <div class="clear"></div> </div> <div id="content" wicket:id="contentContainer"> <div wicket:id="content"></div> </div>
Désormais, quand on clic sur l’onglet, le panel de contenu se met a jour (via ajax), par contre il pourrait être interessant de signifier à l’utilisateur quel onglet est actif.
Ce sera le but du 4ème épisode… Amusons nous avec Wicket & Ajax : Onglets dynamiques 4/5
Imprimer cet article
