NooCodeCommit

Suite à la première remarque de Grégo dans son commentaire, j’ai modifié quelque peu l’étape 5 pour tenter d’avoir le fonctionnement suivant : Lors du clic sur l’onglet, le dit onglet s’active directement et ce n’est que le panel de contenu qui se met à jour via Ajax.

Pour cette 7ème étape j’ai, pour des raisons pratiques, utilisé jQuery pour la partie javascript.
Read the rest of this entry »

En furetant un petit peu sur le Wiki de Wicket, j’ai découvert cette petite astuce qui concerne le busy indicator

Le ptits gars de Wicket ont très bien fait les choses en pensant à ajouter des fallbacks avant et après leur appel ajax. Ce qui nous donne ce bout de code javascript :

window.onload = setupFunc;
 
function setupFunc() {
  hideBusysign();
  Wicket.Ajax.registerPreCallHandler(showBusysign);
  Wicket.Ajax.registerPostCallHandler(hideBusysign);
  Wicket.Ajax.registerFailureHandler(hideBusysign);
}

Il ne nous reste donc plus qu’a faire en sorte d’utiliser cela.
Read the rest of this entry »

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).

Read the rest of this entry »

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>

Read the rest of this entry »

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>

Read the rest of this entry »