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 :
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 :
<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>
