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>

Continue reading »

 

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 :
Continue reading »

 

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é :
ce que l'on veut
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.
Continue reading »

 

Il y’a quelques temps déjà, les ptits gars de chez Zenika ont lancé le site Yes, Wicket!.

Et ils ont commencé une série d’articles pour débutant : La série de ZenContact!

Ils nous expliquent en détail comment ils ont réalisé l’application qu’ils avaient présentée lors d’un ParisJUG.

ZenContact 0 : Développer une application web en Wicket
ZenContact 1 : Initialisation de l’application de gestion des contacts
ZenContact 2 : Ajouter un libellé dynamiquement
ZenContact 3 : Structuration des pages
ZenContact 4 : La navigation entre pages

N’hésitez pas à suivre leur blog, il risque bien de devenir une mine d’astuce concernant wicket!

Edit du 17/07/2009
Un nouvel épisode (pas trop de wicket dans celui ci, mais bon) : ZenContact 5 : Présentation du métier

 

Si vous utilisez un composant DropDownChoice et que vous souhaitez ajuster au mieux ce qui est affiché, vous allez devoir utiliser un ChoiceRenderer.

Continue reading »

© 2011 NooCodeCommit Suffusion theme by Sayontan Sinha