Dans ce 5ème article de notre série « Amusons nous avec Wicket & Ajax : Onglets dynamiques », nous allons tenter de mettre un peu d’ordre dans le code qu’on à écrit dans les étapes précédentes.
Premièrement nous allons nous occuper du « stockage » des informations pertinentes, puis nous allons rendre nos onglets autonomes (pour pourquoi pas les utiliser dans un autre projet).
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>
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>
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" }); </string>
Le Repeater que nous avons choisi est un ListView :
Read the rest of this entry »
Je commence là une série de 5 articles, pour décomposer clairement le cheminement que j’ai suivi pour réaliser de la fonctionnalité souhaitée : un système d’onglets avec chargement dynamique du contenu.
Voilà une capture du système souhaité :
Et voilà un extrait du code source associé :
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" > <head> <title>Onglets</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="menu"> <ul class="onglets"> <li class="onglet actif"><a href="#">Salarié</a></li> <li class="onglet preNonActif"><a href="#">Contrat</a></li> <li class="onglet lastNonActif"><a href="#">Planning</a></li> </ul> <div class="clear"></div> </div> <div id="content"> <div> <p> <span>Panel n°1 (non dynamique)</span> </p> </div> </div> </body> </html>
Ce premier article de la série permet de poser les bases du système. Il n’y a donc rien de très compliqué dans ce qui suis.
Read the rest of this entry »
Cette création par nicogiard est mise à disposition selon les termes de la licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France.
Cela comprend le contenu de ce site, les articles, les codes sources, les présentations et tout autre document.
Recent Comments