07
juil.
2009

ZenContact 3 : Structuration des pages

Posté par Carl Azoury dans Tutoriel
Tags : Héritage, Templating, ZenContact

Les pages d'une application Web possèdent souvent sur la même structure. Afin d'éviter la redondance de code et de s'assurer de l'uniformité visuel, un système de templating est nécessaire. Nous avons tous utilisé soit sitemesh soit tiles afin de répondre à ce besoin. Les deux technologies nécessitent une configuration XML afin de décrire l'assemblage des pages. En Wicket la gestion de la structure des pages est beaucoup plus simple ! Cela se fait soit par héritage soit par composition.

Nous allons focaliser dans ce billet sur l'héritage et modifier la page d'accueil en conséquence.

Nous allons commencer par créer une classe abstraite, TemplatePage.java, dont vont hériter les pages de notre application de gestion de contact.

  1. public abstract class TemplatePage extends WebPage {
  2.  
  3. }

Cette classe ne possède pour le moment aucun composants commun aux pages de l'application, par contre souvenons nous que chaque classe Java représentant une page possède un markup html associé. Nous allons donc créer le fichier TemplatePage.html qui contiendra la structure générale des pages de notre application.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html 
  3.      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  4.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5.  
  6. <html 
  7. 	xmlns="http://www.w3.org/1999/xhtml"
  8. 	xmlns:wicket="http://wicket.apache.org" 
  9. 	xml:lang="fr">
  10.  
  11. 	<head>
  12. 		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  13. 		<meta name="author" content="Zenika" />
  14. 		<link href="css/zencontact.css" media="screen" rel="stylesheet" type="text/css" />
  15. 	</head>
  16.  
  17. 	<body> 
  18.  
  19. 		<div id="header">
  20. 			<a href="WelcomePage.html">Accueil</a> | 
  21. 			<a href="ListContactPage.html">Liste des contacts</a> |
  22. 			<a href="EditContactPage.html">Créer un contact</a> 
  23. 		</div>
  24.  
  25. 		<div id="content">
  26. 			<div id="contacts">
  27. 				<div class="contact">
  28. 					<wicket:child/>
  29. 				</div>
  30. 			</div>		
  31. 		</div>
  32.  
  33. 		<div id="footer">
  34. 			<p id="legal"><a href="http://www.zenika.com/">Zenika</a> Copyright&copy; 2009</p>
  35. 		</div>
  36. 	 </body>
  37. </html>

On remarque les 3 zones, représentées par des div que sont :

  • La zone d'identifiant « header », partie contenant le menu
  • La zone d'identifiant « content », partie contenant les éléments spécifiques à chaque page
  • La zone d'identifiant « footer », partie contenant la mention de copyright

Nous remarquons aussi, à la ligne 28, la balise <wicket:child/> qui représente l'endroit ou le code HTML des sous classes va être inséré.

Maintenant, modifions la classe Java de la page d'accueil afin de ne plus la faire hériter directement de la classe WebPage de Wicket, mais de la classe TemplatePage que nous venons de créer.

  1. public class WelcomePage extends TemplatePage {
  2. 	…
  3. }

Il reste maintenant à modifier le template html de cette page afin de retirer toutes les parties inutiles et ne conserver que le spécifique à la page d'accueil.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <wicket:extend>
  4. 	<table>
  5. 		<tr>
  6. 			<td width="300px"><img src="images/zenika_logo.png"/></td>
  7. 			<td width="300px"><img src="images/pjug_logo.png"/></td>
  8. 		</tr>					
  9. 	</table>
  10. 	<br/><br/><br/>
  11. 	<div wicket:id="date">[24 fŽvrier 2009]</div>
  12. </wicket:extend>

On parle de Markup Inheritance car Wicket, lors du rendu de la page d'accueil, fera correspondre l'héritage Java des pages en fusionnant les templates HTML correspondant. Ainsi le contenu HTML de la balise <wicket:extend> de la page WelcomePage viendra enrichir le code HTML au niveau de la balise <wicket:child/> de la page TemplatePage.

Il ne reste plus qu'a redémarrer le serveur et tester l'affichage de la page depuis l'URL :

http://localhost:8080/zencontact

Si la page d'accueil s'affiche correctement, passons à l'étape suivante qui consiste à intégrer les deux dernières pages de la maquette.

Les classes Java correspondantes :

  1. public class ListContactPage extends TemplatePage {
  2.  
  3. }
  1. public class EditContactPage extends TemplatePage {
  2.  
  3. }

Les fichiers HTML correspondants :

ListContactPage.html

  1. <wicket:extend>
  2. 	<table cellspacing="5" cellpadding="5">
  3. 		<tr>
  4. 			<td><div><img src="images/people.png"/></div></td>
  5. 			<td><span>[Martjin]</span>&nbsp;<span>[Dashorst]</span></td>
  6. 			<td><a href="#"><img src="images/edit.png"/></a></td>
  7. 		</tr>					
  8. 		<tr>
  9. 			<td><div><img src="images/people.png"/></div></td>
  10. 			<td><span>[Eelco]</span>&nbsp;<span>[Hillenius]</span></td>
  11. 			<td><a href="#"><img src="images/edit.png"/></a></td>
  12. 		</tr>
  13. 	</table>
  14. </wicket:extend>

EditContactPage.html

  1. <wicket:extend>
  2. 	<form>
  3. 		<table cellspacing="5">
  4. 			<tr>
  5. 				<td>Prénom :</td>
  6. 				<td><input class="type="text" /></td>
  7. 			</tr>
  8.  
  9. 			<tr>
  10. 				<td>Nom : </td>
  11. 				<td><input type="text" /></td>
  12. 			</tr>
  13.  
  14. 			<tr>
  15. 				<td>Date de naissance : </td>
  16. 				<td><input type="text" /></td>
  17. 			</tr>
  18.  
  19. 			<tr>
  20. 				<td>Email : </td>
  21. 				<td><input type="text" /></td>
  22. 			</tr>
  23.  
  24. 			<tr>
  25. 				<td><input type="reset" value="Annuler" class="button" /></td>
  26. 				<td><input type="submit" value="Valider" class="button" /></td>
  27. 			</tr>
  28. 		</table>
  29. 		<div id="errorsDiv" class="innerError"/>
  30. 	</form>
  31. </wicket:extend>

La navigation vers et entre ces pages n'est pas encore activée, ce sera l'objet du prochain billet.

Précédent : ZenContact 2 : Ajouter un libellé dynamiquement

Suivant ; ZenContact 4 : La navigation entre pages

Commentaires

1. Le Vendredi 30 octobre 2009, 14:04 par Nicolas

Question : wicket ne permet qu'un seul wicket:child. Du coup, comment feriez-vous pour traiter le use case où une page aurait 2 zones templatées ? Par exemple une zone centrale et une zone sitebar optionnelle, avec une liste des articles du blog.
Je n'ai pas trovué de réponses élégantes et votre exemple prend le cas où une seule partie du template HTML principal est dérivé dans une classe fille. Merci

2. Le Dimanche 1 novembre 2009, 16:14 par cazoury

Bonjour Nicolas,

Avec Wicket il y'a deux façons objet, d'utiliser des templates. La composition et l'héritage.

Par héritage, nous retrouvons le mécanisme de <wicket:child/> qui est calquée sur l'héritage simple Java.

La composition, ce traduit en Wicket par l'utilisation de Panel. Les classes WebPage et Panel sont les deux classes principales associées à du markup HTML. Ainsi quand tu ajoutes un Panel à ta page, comme pour une sidebar par exemple, celui-ci vient avec son HTML / CSS etc....

Un autre moyen consisterait à avoir une hiérarchie de pages comme nous pourrions avoir une hiérarchie de classes et sous-classes.

En espérant avoir répondu à la question.

3. Le Lundi 2 novembre 2009, 10:45 par Olivier Croisier

Tu peux par exemple avoir une page template de base BasePage sans barre latérale, dont hérite une page SideBarBasePage possédant la barre latérale. Les "vraies" pages de ton application peuvent alors hériter de l'une ou l'autre, en fonction du besoin.

L'autre approche est d'utiliser des Panels pour composer la page.

Bien sûr il est possible de combiner les deux techniques pour obtenir une flexibilité maximale.

Fil des commentaires de ce billet


Copyright Zenika, tous droits réservés. | Icônes FamFamFam