Dans le précédent billet, nous avons créé une liste de deux contacts et les avons stockés au niveau de la classe ZenContactApplication. Nous allons voir dans ce billet comment les afficher et gérer l'affichage html pour le designer graphique. Wicket possède des "Repeaters" permettant de répéter toute balise HTML sur laquelle le composant est "bindé". Nous utiliserons un type particulier de Repeater, le PropertyListView qui va permettre de simplifier le code Java.

Supprimer le code HTML inutile

Pour se faire, nous allons rajouter dans la page ListContactPage.html la balise <wicket:remove> qui permet de signaler à Wicket tout l'HTML qui ne doit pas être pris en compte. En l'occurrence le deuxième <tr> du template HTML. Seul le premier <tr> nous intéresse et il sera répété autant de fois qu'il y a de contacts.

<wicket:remove>
	<tr>
		<td><div><img src="images/people.png"/></div></td>
		<td><span>[Eelco]</span>&nbsp;<span>[Hillenius]</span></td>
		<td><a href="#"><img src="images/edit.png"/></a></td>
	</tr>
</wicket:remove>

Afin de tester l'effet de cette balise, rafraîchissez la page affichant la liste des contacts, seul Martijn Deshorst est affiché dans la liste.

Identifier les zones dynamiques de la page HTML

C'est la balise <tr> et tout le code HTML inclus, qui va devoir être répété autant de fois qu'il y a de contacts. Nous allons lui setter un identifiant afin de lier cette balise au composant Wicket adéquat. Les deux autres zones dynamiques sont le nom et le prénom. Cela fait trois wicket:id positionnés au niveau de la page HTML.

<tr wicket:id="liste">
	<td><div><img src="images/people.png"/></div></td>
	<td><span wicket:id="prenom">[Martjin]</span>&nbsp;<span wicket:id="nom">[Dashorst]</span></td>
	<td><a href="#"><img src="images/edit.png"/></a></td>
</tr>

Ajouter les composants Java

Dans la classe Java représentant la page, nous allons ajouter 3 composants avec les mêmes wicket:id :

• 1 repeater, via la classe PropertyListView, correspondant à la balise <tr>, ayant comme identifiant "liste"
• 1 Label pour afficher le prénom, ayant comme identifiant "prenom"
• 1 Label pour afficher le nom, ayant comme identifiant "nom"

public ListContactPage() {
	add(new PropertyListView("liste", ZenContactApplication.get().getContactsList()) {
		@Override
		protected void populateItem(final ListItem item) {
			final Contact contact = (Contact) item.getModelObject();
 
			item.add(new Label("prenom"));
			item.add(new Label("nom"));
		}
	});
}

Le deuxième paramètre du constructeur de PropertyListView c'est tout simplement la collection sur laquelle nous voulons itérer.

En testant maintenant votre application, vous devriez avoir une liste qui affiche les deux contacts Nicolas Andre et Carl Azoury triée par ordre alphabétique du nom de famille puis du prénom.

Nous verrons dans le prochain billet comment créer un contact, et nous le visualiserons au niveau de la page que nous venons de modifier.

Précédent : ZenContact 5 : Présentation du métier
Suivant : ZenContact 7 : Création du formulaire d'ajout de contacts