Dans le billet précédent nous avons appris à lister nos contacts avec l'aide du "Repeater" PropertyListView . Nous allons maintenant étudier les étapes de création du formulaire qui va nous permettre d'ajouter des contacts à notre liste. La première étape consiste simplement à ajouter les composants Wicket Form et TextField à notre page EditContactPage.

Dynamiser le markup

Dans un premier temps, nous devons modifier le markup HTML du formulaire de la page EditContactPage en y ajoutant les balises d'identification wicket :

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

Ajouter les composants Java

Ajoutons maintenant ces composants identifiés, à savoir le formulaire et ses éléments, à la page EditContactPage.java :

  1. public class EditContactPage extends TemplatePage {
  2.  
  3.     public EditContactPage() {
  4.         super();
  5.         add(new EditContactFrom("editform", new Contact()));
  6.     }
  7.  
  8.     public class EditContactFrom extends Form {
  9.  
  10.         public EditContactFrom(String id, Contact contact) {
  11.             super(id);
  12.  
  13.             setModel(new CompoundPropertyModel(contact));
  14.  
  15.             add(new TextField("prenom"));
  16.             add(new TextField("nom"));
  17.             add(new TextField("dateNaissance", Date.class));
  18.             add(new TextField("email"));
  19.         }
  20.  
  21.     }
  22. }

Faites attention à bien spécifier le type Date pour le champ date de naissance lors de la création du TextField associé (par défaut le modèle est de type String). De plus, assurez-vous que les identifiants de chaque TextFields correspondent aux noms des propriétés de l'objet contact. Voyons pourquoi cela est nécessaire.

Le CompoundPropertyModel

Pour notre conteneur Form, nous utilisons un modèle de type CompoundPropertyModel auquel est associé notre objet contact. Avec un tel modèle notre code est simplifié et l'application allégée, puisqu'il n'est plus nécessaire de spécifier à chaque TextField son modèle particulier.

Mais alors comment Wicket procède-t'il pour associer les données aux TextFields ?

  • Dans un premier temps, Wicket recherche dans la hiérarchie de chacun des composants un CompoundPropertyModel.
  • Une fois ce CompoundPropertyModel récupéré, il est utilisé comme modèle pour chaque TextField. Les données sont ainsi récupérées à la manière d'un PropertyModel, le "model object" étant l'objet contact et la "property expression" étant l'identifiant du TextField.

Test

Testons maintenant notre formulaire après redémarrage du serveur : http://localhost:8080/zencontact

Que se passe-t'il si nous renseignons une valeur autre qu'une date dans le champ date de naissance ?

Côté serveur, la valeur du champ ne peut être parsée correctement en un type Date, le souci est que l'utilsateur n'en a aucune idée. C'est pourquoi nous verrons dans un prochain billet comment communiquer au client des messages d'erreurs suite à la non validation d'un formulaire côté serveur.

Précédent : ZenContact 6 - PropertyListView
Suivant : ZenContact 8 - FeedbackPanel