4ème article de la série où nous allons mettre à jour les onglets pour que l’expérience utilisateur soit plus pertinente. En effet, nous allons faire en sorte que l’onglet “actif” apparaisse d’une façon différente des autres onglets.
Comme dans l’étape 3, nous allons “encapsuler” nos onglets dans un WebMarkupContainer pour pouvoir le mettre à jour via Ajax :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public class PageEtape4 extends TemplatePage { private WebMarkupContainer ongletsContainer; private Integer indexOngletActif = 0; ... public PageEtape4() { ... // Container des Onglets ongletsContainer = new WebMarkupContainer("ongletsContainer"); ongletsContainer.setOutputMarkupId(true); ongletsContainer.add(onglets); add(ongletsContainer); ... } } |
ps : on voit aussi apparaitre assez salement une variable qui nous permeterra de connaitre l’onglet en cours. L’étape 5 se chargera de son cas.
avec le code html correspondant :
|
1 2 3 4 5 6 |
<div id="menu"> <ul class="onglets" wicket:id="ongletsContainer"> <li wicket:id="onglet"><a wicket:id="linkOnglet"><span wicket:id="labelOnglet">[labelOnglet]</span></a></li> </ul> <div class="clear"></div> </div> |
Ensuite, on reprend le code de notre ListView de l’étape 3, et on modifie le code de l’AjaxLink :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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) { // Menu indexOngletActif = _item.getIndex(); target.addComponent(ongletsContainer); // Content ... } }; 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 dire à Wicket de refaire le render du panel des onglets (nommé ongletsContainer).
Cependant, si on s’arrete là, le panel se rafraichira correctement, mais au final, le résultat sera le même.
Il faut donc ajouter un AttributeModifier sur nos ListItem pour pouvoir appliquer une classe Css en accord avec le “statut” de chacun des onglets.
On reprend donc le code de notre ListView et on va implémenter une méthode supplémentaire newItem(int _index) qui surcharge la méthode de la classe abstraite ListView. Cela donne donc le code suivant:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
ListView<String> onglets = new ListView<String>("onglet", listTitresOnglets) { @Override protected void populateItem(final ListItem<String> _item) { ... } @Override protected ListItem<String> newItem(int _index) { final int index = _index; return new ListItem<String>(_index, getListItemModel(getModel(), _index)) { @Override protected void onBeforeRender() { super.onBeforeRender(); add(new AttributeModifier("class", true, new OngletClassAttributeModel(indexOngletActif, index, listTitresOnglets.size() - 1))); } }; } }; |
Surcharger cette méthode newItem(int _index) nous permet de pouvoir manipuler l’instance de ListItem qui sera utilisée, pour pouvoir lui définir sa méthode onBeforeRender(), qui permettra dès lors d’ajouter à la volée, un AttributeModifier.
Déjà c’est pas mal, mais qu’est ce qu’on va donner à manger à notre AttributeModifier ?
J’ai créé une petite classe qui permet en fonction des différents index (index de l’onglet actif, index de l’onglet que l’on traite, le nombre total d’onglets) de retrouver les bonnes classes css à appliquer à chaque onglet. Voilà cette classe :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
public class OngletClassAttributeModel extends Model<String> { private int ongletActif; private int ongletNumber; private int ongletLast; public OngletClassAttributeModel(int ongletActif, int ongletNumber, int ongletLast) { this.ongletActif = ongletActif; this.ongletNumber = ongletNumber; this.ongletLast = ongletLast; } @Override public String getObject() { String cssClass; 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"; } } return cssClass; } } |
Bravo! Vous avez reussi à réaliser un système d’onglets, complètement dynamique, tant sur le nombre d’onglets, que sur le chargement du contenu associé.
Bon, les puristes vous diront que c’est pas mal crado…
C’est pour ca que le 5ème et dernier épisode existe. Il sera consacré au rangement de tout ce bazar… Amusons nous avec Wicket & Ajax : Onglets dynamiques 5/5
Imprimer cet article