Hands on Wicket – Partie 4

Dans les précédents articles sur Wicket, nous avons exploré les bases du framework. Nous allons nous intéresser maintenant à quelques fonctionnalités avancées comme le templating ou l’internationalisation.

Les mécanismes de templating

Avec Wicket, même le templating est très simple. L’implémentation du templating dans Wicket est très proche de la façon de faire de SiteMesh (au moins pour la partie HTML). La mise en œuvre se fait par des mécanismes d’héritage : Wicket nomme ceci le Markup Inheritance. Prenons un exemple concret.

J’ai une page de template qui va définir le header et le footer commun de mon site. Ensuite le body va varier selon les pages. Je crée donc un fichier HTML et la classe Java associée. Dans le fichier HTML, j’ai juste besoin de préciser où va s’insérer le contenu des fils en positionnant la balise .

Ce qui donne dans le fichier HTML du parent :

La balise <wicket:head> permettra plus tard d’ajouter des éléments (comme le titre de la page) dans le header de la page à partir des enfants. Cette zone est en quelque sorte une zone modifiable du template.

La classe Java (ParentPage.java) associée :

package test.view;

// import ...;

public abstract class ParentPage extends WebPage {

	private static final long serialVersionUID = 1L;

	public ParentPage() {
		super();
		createTemplateComponents();
	}

	protected void createTemplateComponents() {
		// Ajout des composants communs dans le header et le footer
	}
}

Pour les pages du fils, je vais, comme d’habitude en Wicket, définir le fichier HTML et la classe Java associée. La classe Java va hériter de la classe ParentPage (les composants ajoutés et gérés par la page parente seront donc ajoutés à ma page).

package test.view;

// import ...;

public class ChildPage extends ParentPage {

	private static final long serialVersionUID = 1L;

	public ChildPage() {
		super();
		createComponents();
	}

	protected void createComponents() {
		// Ajout des composants propres à cette page
	}

}

Pour ce qui est du fichier HTML, je dois encadrer le code HTML qui doit être inséré dans le code HTML du parent par la balise <wicket:extend>.

	





	
	
Hello dans le fils

Cette fois-ci, dans le header de la page et entre les balises <wicket:head>, j’insère la balise <title>. Ce titre sera inséré dans la page finale rendue à l’utilisateur. De même, je peux ajouter des imports CSS ou JavaScript propres à la page fille.

Et voilà, tout ce que j’ajouterai dans la page parent apparaitra aussi dans les pages filles !

L’internationalisation

L’internationalisation se fait de la façon habituelle, c’est à dire via l’utilisation de fichiers properties nommés en fonction de la langue supportée. Avec Wicket, il est possible d’adjoindre à chaque composant (page, formulaire, composant ‘maison’) un fichier properties portant le même nom et situé dans le même package que la classe associée.

Exemple : Le fichier properties contenant les traductions pour la page fr/xebia/wicket/demo/HomePage.java doit être fr/xebia/wicket/demo/HomePage.properties (par défaut bien sûr).

L’accès aux traductions se fait de trois manières :

• Dans le code HTML, en ajoutant la balise <wicket:message key= »stringKey » />
• Dans le code Java, en utilisant un type de modèle particulier : le StringResourceModel. Ce modèle peut être passé en paramètre de tous les composants Wicket (Label, TextField, etc)
• Toujours dans le code Java, en appelant la méthode getLocalizer().getString() sur n’importe quel composant.

Cependant, Wicket ne s’est pas arrêté là. Pour la classe StringResourceModel, la clé passée en paramètre peut être dynamique. Exemple : « product.${product.id} ». Le modèle passé en paramètre permet de résoudre la clé (dans ce cas, l’objet Product contient un champ id).

L’autre particularité, ici, réside dans le mécanisme de recherche de la traduction. Wicket va utiliser la hiérarchie de classes pour parcourir les fichiers properties.

Prenons en exemple la hiérarchie suivante :

+ fr/xebia/wicket/BasePage.java
+ fr/xebia/wicket/MyPage.java

Si dans la classe MyPage (ou la page HTML correspondante), je recherche une traduction, Wicket va rechercher la valeur en parcourant dans cet ordre les fichiers properties :

• fr/xebia/wicket/MyPage.properties
• fr/xebia/wicket/BasePage.properties
• org/apache/wicket/markup/html/WebPage.properties
• Et ainsi de suite, en remontant la hiérarchie de classe …

Pour les cas où cette façon de faire implique trop de duplication de properties, il est aussi possible de charger arbitrairement des fichiers properties dans la classe principale de l’application) en configurant les IResourceSettings.

Modifier dynamiquement les attributs des balises HTML

Le cas d’usage typique pour ce genre de besoin est la modification dynamique de l’attribut « class » d’un tag HTML pour modifier le rendu en jouant avec les CSS. Un autre type d’utilisation est d’écrire un appel JavaScript dynamique en définissant par exemple l’attribut « onClick » d’un bouton.

Différentes approches sont proposées dans cette page du Wiki mais nous n’en retiendrons ici qu’une seule. Il s’agit d’utiliser la classe AttributeModifier. Cette classe est très simple dans son usage : on ajoute une instance de cette classe à n’importe quel élément Wicket héritant de Component comme suit :

TextField textField = new TextField("myField", new Model());
textField.add(new AttributeModifier("class", true, new Model("formFields")));

Dans cet exemple, un attribut « class » sera ajouté même s’il n’est pas présent dans le HTML (signification du paramètre « true »). La valeur de l’attribut est donnée par le modèle passé en 3ème position.

Il est aussi possible de modifier le comportement par défaut en surchargeant la méthode getObject() :

textField.add(new AttributeModifier("class", new Model() {
   public Object getObject(final Component component) {
         String cssClass;
         if ( test.getAlarmState() )
             cssClass = "alarm";
         } else {
             cssClass="noAlarm";
         }
         return cssClass;
   }
 }));

C’est tout pour cette fois. Vous en savez déjà assez pour commencer votre nouveau projet avec Wicket. D’autres aspects de Wicket sont à découvrir : avec Wicket, on peut aussi faire de l’AJAX, des tests d’IHM et plein d’autres choses.

A l’occasion de ces articles, un projet de démonstration de wicket a été créé et est disponible (sous License Apache 2.0) sous le projet xebia-france hébergé chez GoogleCode. Voici le lien direct vers le repository Subversion.