Astuce wicket: pour pas casser son HTML

Comme vous le savez, un composant Wicket doit obligatoirement être associé à un élément HTML (via id) lors de sa création.
Or il arrive des fois où ce n’est tout simplement pas possible sans “casser” la structure de son HTML.

[Suite:]

Par exemple, considérons le cas suivant:

<span>Vous connecté en tant que $$$</span>

Et qu’on désire associer la partie $$$ avec un composant Label de Wicket.
Pour se faire, on doit encapsuler la chose dans un élément HTML comme span par exemple … sauf que l’on est déjà dans un span …

Ou encore le cas suivant:
On désire répéter deux lignes d’une table pour chaque élément d’une liste (composant ListView de Wicket):

<table> 
  <tr> 
    <td>ligne 1 | colonne 1</td> 
    <td>ligne 1 | colonne 2</td> 
  </tr> 
  <tr> 
    <td>ligne 2 | colonne 1</td> 
    <td>ligne 2 | colonne 2</td> 
  </tr> 
</table>

Il faut toujours encapsuler les deux éléments t dans un élément HTML, ce qui n’est malheureusement pas possible.

Rassurez vous, Wicket propose une solution à ce problème via un élément spécial <wicket:container /> qui est un élément abstrait qui ne sert qu’à contenir d’autres éléments HTML.

Ainsi, le premier cas peut être résolu ainsi:

<span>Vous connecté en tant que <wicket:container wicket:id="user">$$$</wicket:container></span>

De même pour le second cas:

 
<table> <wicket:container wicket:id="doubleRow"> 
  <tr> 
    <td>ligne 1 | colonne 1</td> 
    <td>ligne 1 | colonne 2</td> 
  </tr> 
  <tr> 
    <td>ligne 2 | colonne 1</td> 
    <td>ligne 2 | colonne 2</td> 
  </tr> 
 </wicket:container> 
</table>

Les naviguateurs vont tout simplement ignorer ce wicket:container dans le HTML généré, et meiux encore, on peut même configurer Wicket pour qu’il filtre ses éléments (du namespace wicket) en ajoutant cette ligne dans la méthode init de votre WebApplication:

getMarkupSettings().setStripWicketTags(true);

Remarque que ceci va retirer tout ce qui a lien avec Wicket, y compris les attributs wicket:id.

—-

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: