Lors d’un audit, d’une revue de code, ou simplement lors de la maintenance d’un projet Wicket, il est parfois difficile d'obtenir une vision claire des composants qui constituent une page.

Afin de résoudre ce problème, je vous propose un outil permettant de visualiser, directement dans votre navigateur, les différents composants présents sur votre page. Les composants sont représentés sous la forme d’un arbre permettant de comprendre leur hiérarchie.

Visualisation

L'outil est un plugin analogue à celui permettant de visualiser les communications Ajax directement dans une page Wicket en mode développement (Ajax Debug). Un petit encart est ajouté en bas à droite de la page; cliquer sur celui-ci, affiche l'arbre des composants.

Pour avoir un exemple immédiat sur le sujet, prenons une page très simple constituée des panels header, content et footer. Le panel content contient un formulaire avec deux champs classiques d'identification.

Voici ce que nous affiche le plugin :

Encadrement

Les cases à cocher permettent de localiser rapidement chaque composant sur la page en l’encadrant avec une fine bordure. Si vous souhaitez localiser plusieurs composants et les différencier, un survol sur le noeud du composant vous permettra de choisir parmi une palette de couleurs paramétrables.

Informations

En plus du choix de la couleur de l’encadrement, le survol sur le noeud du composant permet d’en obtenir les principales informations, soit:

• le wicket-id
• la classe
• la classe du model
• la classe du modelObject

A gauche de chaque information, se trouve une petite icône permettant de copier par un simple clic la valeur affichée afin de pouvoir la coller rapidement dans votre IDE favori.

Highlight

Une dernière fonctionnalité, très utile lors de la création d’une documentation ou d’une présentation, est la mise en évidence d’un composant. Cette fonction permet d’appliquer un masque noir à l’ensemble de la page à l’exception d’un unique composant .

Pour cela, il suffit d’utiliser la case à cocher highlight présente dans la bulle d’information du composant choisi.

On obtient alors le résultat suivant :

Utilisation

Le plugin est compatible avec les versions 1.3.x à 1.5.x de Wicket et est disponible (en open-source) sur GitHub à l’adresse : github.com/zenika/wicket-component-debug

Note : Une branche est dédiée à chacune des versions de wicket supportées.

Une fois le plugin ajouté à votre projet, pour l'utiliser, rien de plus simple: il suffit d’ajouter un listener dans la méthode d'initialisation de votre application.

// Pour les versions de Wicket 1.5.x :
getComponentPostOnBeforeRenderListeners().add(new WicketDebugListener());
 
// Pour les versions de Wicket 1.4.x :
addPostComponentOnBeforeRenderListener(new WicketDebugListener());
 
// Pour les versions de Wicket 1.3.x :
addComponentOnBeforeRenderListener(new WicketDebugListener());

Lors de cet ajout, vous pouvez paramétrer certains aspects du plugin comme les couleurs de bordures proposées :

getComponentPostOnBeforeRenderListeners().add(new WicketDebugListener() {
   @Override
   protected void configure(Map<String, String> configuration) {
       configuration.put("component.plugin.border.colors", "#333, #666, #587, #854");
   }
});

Reportez vous à la documentation du plugin sur GitHub pour obtenir plus d’informations sur les possibilités de personnalisation qui sont offertes.

Extension

L’outil repose sur l’utilisation d’un IComponentOnBeforeRenderListener qui permet d’effectuer une opération juste avant qu’un composant soit rendu. Il facilite la mise en œuvre de ce listener grâce à l’utilisation de plugins offrant un accès à des méthodes utilitaires. Il est par exemple possible de contribuer à l’entête html d’une page en ajoutant du javascript ou du css.

Vous pouvez donc créer vos propres plugins en héritant de la classe AbstractWicketDebugPlugin et en implémentant la méthode process que wicket component debug se chargera d’exécuter.

public class MyPlugin extends AbstractWicketDebugPlugin {
   @Override
   protected void process(Component component) {
       // plugin’s logic
   }
}

Pour plus d'information sur le développement d'extensions, vous pouvez vous inspirer directement de la classe TreePlugin.java, qui affiche l'arbre des composants dans la sortie standard.

Conclusion

J'espère que cet outil vous sera utile et simplifiera certaines de vos tâches. Bien évidemment, afin de continuer à l'améliorer, n’hésitez pas à contribuer, commenter ou reporter vos bugs directement sur github.

wicket component debug repose sur les librairies suivantes :

• jQuery (1.6.2)
• jQuery.Tree (1.0)
• qTip (1.0)
• clippy