Dans ce 2ème article, on va commencer à rendre dynamique (un peu) les choses.
Nous allons utiliser un Repeater pour afficher la liste des onglets.
Dans un premier temps nous allons considérer que la liste des onglets est une liste de String :
List<String> listTitresOnglets = Arrays.asList(new String[] { "Salarié", "Contrat", "Planning" });
Le Repeater que nous avons choisi est un ListView :
ListView<String> onglets = new ListView<String>("onglet", listTitresOnglets) { private static final long serialVersionUID = 6207330868467140651L; @Override protected void populateItem(ListItem<String> _item) { String labelOnglet = _item.getModelObject(); _item.add(new Label("labelOnglet", labelOnglet)); } };
on voit clairement que le seul composant à l’intérieur du ListView est un Label
Cette ListView, coté html est déclarée comme suit :
<ul class="onglets"> <li wicket:id="onglet"><a href="#"><span wicket:id="labelOnglet">[labelOnglet]</span></a></li> </ul>
Donc notre ListView sera un ensemble de tag li
Voila donc le code java complet de la page PageEtape2 :
public class PageEtape2 extends TemplatePage { public PageEtape2() { super(); initPageTitle("Etape 2"); 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(ListItem<String> _item) { String labelOnglet = _item.getModelObject(); _item.add(new Label("labelOnglet", labelOnglet)); } }; add(onglets); } }
ainsi que l’ensemble du code Html :
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" > <head> </head> <body> <wicket:extend> <div id="menu"> <ul class="onglets"> <li wicket:id="onglet"><a href="#"><span wicket:id="labelOnglet">[labelOnglet]</span></a></li> </ul> <div class="clear"></div> </div> <div id="content"> <div> <p> <span>Panel n°1 (non dynamique)</span> </p> </div> </div> </wicket:extend> </body> </html>
Si on omet le css nous devons avoir le résultat suivant :
Et comme on a pas fait grand chose encore, on peut se permettre de passer un peu de temps à faire la mise en forme :
* { margin: 0; padding: 0 } .clear { clear: both; } p { padding: 10px; } /*******************************************************************/ /** ONGLETS */ /*******************************************************************/ .onglets { background-image:url(../../images/fondOnglets.jpg); height: 50px; margin: 0px; } .onglets li { display: inline; padding: 16px 0 0 0; } .onglets li a{ display: inline; margin-left: 10px; } .onglets .onglet { float:left; width: 140px; height: 50px; } .onglets a { font-weight: bold; font-size: 14pt; color: darkgoldenrod; font-style: italic; font-family: 'Arial Black'; text-decoration: none; } .onglets .preActif { background-image:url(../../images/Ong01.gif); background-repeat: no-repeat; } .onglets .actif { background-image:url(../../images/Ong02.gif); background-repeat: no-repeat; } .onglets .preNonActif { background-image:url(../../images/Ong03.gif); background-repeat: no-repeat; } .onglets .lastNonActif { background-image:url(../../images/Ong04.gif); background-repeat: no-repeat; } .onglets .lastActif { background-image:url(../../images/Ong05.gif); background-repeat: no-repeat; }
Pour l’instant on ne peut toujours pas cliquer sur nos onglets, mais ca va venir!
Dans le 3ème épisode, la gestion des clics et du rafraichissement du panel de contenu … Amusons nous avec Wicket & Ajax : Onglets dynamiques 3/5
Imprimer cet article
