NooCodeCommit » Tutorial

Onglets Dynamiques : Etape 7 – Corrections

nicogiard — Mon, 27 Jul 2009 07:58:10 +0000

Après avoir découvert le site Wicket By Example, réalisé par les gars de chez Mystic Coders, j’ai découvert comment améliorer le code de l’étape 7.

En effet, dans cette étape j’ai opté pour créer ma propre classe OngletAjaxLink pour avoir la main sur la déclaration de l’évennement onclick. C’était avant que je découvre l’article Adding Javascript confirm dialog to AjaxButton.

Donc, exit la classe OngletAjaxLink. On revient au code de l’étape 6 pour PanelOnglets c’est à dire :

public class PanelOnglets extends Panel {
  private WebMarkupContainer ongletsContainer;
  private CompoundPropertyModel<OngletsModelObject> ongletsModel;
 
  public PanelOnglets(String _id, CompoundPropertyModel<OngletsModelObject> _ongletsModel) {
    super(_id);
 
    // CSS
    add(CSSPackageResource.getHeaderContribution(this.getClass(), this.getClass().getSimpleName() + ".css"));
 
    this.ongletsModel = _ongletsModel;
 
    // Repeater des onglets
    ListView<String> onglets = new ListView<String>("onglet", ongletsModel.getObject().getListOnglets()) {
      @Override
	    protected void populateItem(final ListItem<String> _item) {
        String libelle = _item.getModelObject();
        AjaxLink<Object> linkOnglet = new AjaxLink<Object>("linkOnglet") {
          @Override
          public void onClick(AjaxRequestTarget target) {
            ...
          }
        }
      };
      Label labelOnglet = new Label("labelOnglet", libelle);
      linkOnglet.add(labelOnglet);
      _item.add(linkOnglet);
    }
    ...
  }
}

Et on redéfinit la méthode IAjaxCallDecorator getAjaxCallDecorator() de l’objet AjaxLink qui nous permet de décorer le script initial avec du code javascript (via la méthode preDecorateScript). ce qui nous donne :

public class PanelOnglets extends Panel {
  private WebMarkupContainer ongletsContainer;
  private CompoundPropertyModel<OngletsModelObject> ongletsModel;
 
  public PanelOnglets(String _id, CompoundPropertyModel<OngletsModelObject> _ongletsModel) {
    super(_id);
 
    // CSS
    add(CSSPackageResource.getHeaderContribution(this.getClass(), this.getClass().getSimpleName() + ".css"));
 
    this.ongletsModel = _ongletsModel;
 
    // Repeater des onglets
    ListView<String> onglets = new ListView<String>("onglet", ongletsModel.getObject().getListOnglets()) {
      @Override
      protected void populateItem(final ListItem<String> _item) {
        String libelle = _item.getModelObject();
        AjaxLink<Object> linkOnglet = new AjaxLink<Object>("linkOnglet") {
 
          @Override
          protected IAjaxCallDecorator getAjaxCallDecorator() {
            return new AjaxPreprocessingCallDecorator(super.getAjaxCallDecorator()) {
              @Override
              public CharSequence preDecorateScript(CharSequence script) {
                return "updateOnglet(" + _item.getIndex() + ");" + script;
              }
            };
          }
 
          @Override
          public void onClick(AjaxRequestTarget target) {
            ...
          }
        }
      };
      Label labelOnglet = new Label("labelOnglet", libelle);
      linkOnglet.add(labelOnglet);
      _item.add(linkOnglet);
    }
    ...
  }
}

Voilà, le code source est donc plus cohérent et utilise pleinement les capacités du Framework!
Comme quoi en fouillant un peu, on arrive toujours à améliorer son code!

Une fois de plus, j’ai mis à jour le résultat étape par étape et voilà le code source qui remplace celui de l’étape 7 initiale (sous la forme d’un projet Eclipse, il vous faudra aussi maven pour la gestion des dépendances).

Note: There is a print link embedded within this post, please visit this post to print it.

Onglets Dynamiques : Etape 7

nicogiard — Wed, 22 Jul 2009 14:01:17 +0000

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.
(...)
Lire la suite (54 mots)

Amusons nous avec Wicket & Ajax : Busy Indicator

nicogiard — Tue, 21 Jul 2009 07:00:03 +0000

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.
(...)
Lire la suite (355 mots)

Amusons nous avec Wicket & Ajax : Onglets dynamiques 5/5

nicogiard — Mon, 20 Jul 2009 14:39:50 +0000

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

(...)
Lire la suite (816 mots)

Amusons nous avec Wicket & Ajax : Onglets dynamiques 4/5

nicogiard — Mon, 20 Jul 2009 07:47:19 +0000

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 :

 id="menu">
   class="onglets" wicket:id="ongletsContainer">
     wicket:id="onglet"> wicket:id="linkOnglet"> wicket:id="labelOnglet">[labelOnglet]>>>
  >
   class="clear">>
>

(...)
Lire la suite (465 mots)

Amusons nous avec Wicket & Ajax : Onglets dynamiques 3/5

nicogiard — Sat, 18 Jul 2009 16:43:18 +0000

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 :

 id="content" wicket:id="contentContainer">
   wicket:id="content">>
>

(...)
Lire la suite (308 mots)

Amusons nous avec Wicket & Ajax : Onglets dynamiques 2/5

nicogiard — Sat, 18 Jul 2009 00:30:11 +0000

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 :
(...)
Lire la suite (329 mots)

Amusons nous avec Wicket & Ajax : Onglets dynamiques 1/5

nicogiard — Fri, 17 Jul 2009 13:25:16 +0000

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é :

 xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
>
  >Onglets>
   rel="stylesheet" type="text/css" href="style.css" />
>
>
   id="menu">
     class="onglets">
       class="onglet actif"> href="#">Salarié>>
       class="onglet preNonActif"> href="#">Contrat>>
       class="onglet lastNonActif"> href="#">Planning>>
    >
     class="clear">>
  >
   id="content">
    >
      >
        >Panel n°1 (non dynamique)>
      >
    >
  >
>
>

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.
(...)
Lire la suite (18 mots)

Découverte de Greasemonkey & premier script : NooPicasaWeb

nicogiard — Sat, 20 Jun 2009 10:14:11 +0000

Il y a quelque temps déjà, on m’avait parlé de Greasemonkey, un plugin de Firefox qui permet de manipuler les pages web que l’on affiche, moyennant un peu de code javascript.

Et il s’avère que je trouve dommage que, dans l’affichage par défaut de PicasaWeb, la couleur « blanche » du fond de la page n’aide pas à mettre en valeur les photos affichées.
Petit regret aussi, le panneau à droite qui affiche les « informations » de la photo soit par défaut minimisé.

Pour illustrer ces critiques, voilà un screenshot de l’interface de picasaweb :

(...)
Lire la suite (94 mots)

Coupler Wicket et Spring

finalspy — Sat, 23 May 2009 08:47:13 +0000

Cet article va vous présenter les quelques étapes nécessaires pour coupler Wicket avec Spring, histoire de bénéficier par exemple de l’injection de dépendances.

note de nicogiard : cet article a été écrit par finalspy. Merci à lui pour ce très bon article!
(...)
Lire la suite (1,010 mots)