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.
Application
Donc on commence par écrire notre classe Application :
public class OngletsApplication extends WebApplication { public Class<? extends WebPage> getHomePage() { return PageEtape1.class; } }
TemplatePage
Pour des raisons pratiques, j’utilise une TemplatePage dont voici le code java :
public class TemplatePage extends WebPage { public TemplatePage() { // Chargement automatique du fichier css portant le meme nom que la page en cours add(CSSPackageResource.getHeaderContribution(this.getClass(), this.getClass().getSimpleName() + ".css")); // init par défaut du title de la page initPageTitle("template"); } protected void initPageTitle(String _pageTitle) { addOrReplace(new Label("pageTitle", "Onglets - " + _pageTitle)); } }
et le code html:
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" > <head> <title wicket:id="pageTitle">[Title]</title> </head> <body> <wicket:child/> </body> </html>
PageEtape1
Pas grand chose de fait en java concernant cette classe PageEtape1, c’est juste pour poser les bases…
public class PageEtape1 extends TemplatePage { public PageEtape1() { super(); initPageTitle("Etape 1"); } }
Et le html associé qui nous permet un peu mieux de voir ce que l’on va avoir a faire dans l’étape 2 qui va suivre :
<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 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> </wicket:extend> </body> </html>
Voilà, pour l’instant rien de transcendant dans tout ça, juste peut être à noter dans la classe TemplatePage, la ligne :
... add(CSSPackageResource.getHeaderContribution(this.getClass(), this.getClass().getSimpleName() + ".css")); ...
qui permet de charger dynamiquement un fichier css nommé comme la page (par exemple : PageEtape1.css). C’est tout con mais c’est super pratique :p
La suite très vite … Amusons nous avec Wicket & Ajax : Onglets dynamiques 2/5
Imprimer cet article
Excellent tuto, merci beaucoup ! Y a-t-il moyen de télécharger un projet contenant le source ?
Merci ^^
Je t’invite à aller à la 5ème étape où tu trouvera un lien vers un site de démo (avec les sources en ligne) et un zip de mon projet Eclipse.