L'étape précédente consistait à ajouter les éléments wicket constituant notre formulaire. Nous avons pu remarquer en testant ce dernier, qu'aucun message d'erreur n'était affiché pour l'utilisateur lorsqu'il renseignait incorrectement les champs. Cette courte étape aura donc pour but de vous introduire aux FeedbackPanel qui permettent d'afficher ce type de messages.

Markup HTML

Qui dit Panel dit MarkupContainer, le message sera donc affiché dans une balise div qui est déjà présente dans notre markup. Il suffit simplement d'y ajouter l'attribut d'identification wicket, afin de la rendre dynamique.

<wicket:extend>
    <form wicket:id="editform">
        <table cellspacing="5">
            <tr>
                <td>Prénom :</td>
                <td><input wicket:id="prenom" class="type=" text" /></td>
            </tr>
            <tr>
                <td>Nom :</td>
                <td><input wicket:id="nom" type="text" /></td>
            </tr>
            <tr>
                <td>Date de naissance :</td>
                <td><input wicket:id="dateNaissance" type="text" /></td>
            </tr>
            <tr>
                <td>Email :</td>
                <td><input wicket:id="email" type="text" /></td>
            </tr>
            <tr>
                <td><input type="reset" value="Annuler" class="button" /></td>
                <td><input type="submit" value="Valider" class="button" /></td>
            </tr>
        </table>
        <div wicket:id="feedback" id="errorsDiv" class="innerError" />
    </form>
</wicket:extend>

Composant Java

Ajoutons maintenant notre FeedbackPanel à notre page, c'est ce dernier qui contiendra notre message.

public class EditContactPage extends TemplatePage {
 
    public EditContactPage() {
        super();
        Contact contact = new Contact();
        ZenContactApplication.get().getContacts().add(contact);
        add(new EditContactFrom("editform", contact));
 
    }
 
    public class EditContactFrom extends Form {
 
        public EditContactFrom(String id, Contact contact) {
            super(id);
 
            setModel(new CompoundPropertyModel(contact));
 
            add(new TextField("prenom"));
            add(new TextField("nom"));
            add(new TextField("dateNaissance", Date.class));
            add(new TextField("email"));
 
            add(new FeedbackPanel("feedback"));
        }
 
    }
}

Nous pouvons à nouveau tester l'insertion d'un type non-date et vérifier que cette fois un message d'erreur informe l'utilisateur que le type n'a pas été validé : http://localhost:8080/zencontact

La validation de notre formulaire n'est pas tout à fait terminée, nous avons bien évidemment intérêt à valider les autres champs. Ceci sera l'objet du prochain billet !

Précédent : ZenContact 7 - Création du formulaire
Suivant : ZenContact 9- Validation du formulaire côté serveur