Nous avons vu dans de précédents billets les bases du WicketTester et comment intégrer Spring et Wicket. Nous allons pousser l'étude du WicketTester pour voir comment tester une application Wicket qui utilise Spring pour accéder à ces données. Nous verrons aussi comment utiliser des mock objects avec Mockito pour ne pas dépendre d'une véritable couche d'accès au données dans nos tests.

Spring est un framework d'injection de dépendances qui permet d'assembler les composants de votre application (services, objets d'accès aux données, etc.). Il propose aussi un support pour l'accès aux données (support JDBC, intégration avec Hibernate/JPA, gestion des transactions). Spring est donc une solution intéressante pour les parties "basses" d'une application Wicket. Wicket et Spring s'intégre très bien et ce billet vise à montrer comment mettre en place cette intégration.

Les tests automatisés sont une pratique logicielle assez courante mais l'effort de test porte rarement sur l'interface graphique. Nous avons en effet tendance à mettre l'accent sur les tests des couches de services fonctionnels et d'accès aux données. Une raison à cela est certainement la difficulté à tester correctement la couche graphique. Avec Wicket, il est possible tester ses pages ou ses composants avec le WicketTester. Cette série d'articles va vous faire découvrir les bases du WicketTester mais aussi des usages plus avancés, dans une application Wicket + Spring.

Pour gérer l'affichage des listes, Wicket propose le mécanisme des repeaters, comme nous l'avons vu dans le billet ZenContact 6.

En plus de la ListView qui permet de répéter facilement un markup pour chaque élément d'une liste, Wicket propose des repeaters plus avancés, que je vais vous présenter en suivant leur hiérarchie de classes. Nous allons aussi voir comment les utiliser pour remplacer la ListView utilisée dans ZenContact.

Dans ce billet nous allons voir comment ajouter la fonctionnalité "drag and drop" afin de faciliter davantage l'édition de contacts.

Voici ce que nous souhaitons obtenir :

• avoir la possibilité de déplacer un contact présent dans la liste de contacts vers le formulaire d'édition, afin de pré-remplir les champs de ce dernier avec les infos du contact correspondant.

Dans ce billet nous allons voir comment créer et utiliser un Panel avec Wicket. Les panels sont des templates réutilisables contenant des composants, ils sont ajoutés à une page par composition.

A titre d'exemple, nous allons intégrer le formulaire d'ajout de contacts dans son propre Panel.

Maintenant que les contacts peuvent être convenablement créés, il faut pouvoir les éditer ! Nous allons voir comment procéder dans ce billet.

Edition simple de contacts

Dans la liste des contacts nous plaçons un lien sur l'image crayon qui symbolise l'édition. Ce lien doit rediriger l'utilisateur vers le formulaire de création/édition des contacts avec les champs correspondant pré-remplis. Pour ce faire, il suffira de passer en paramètre le contact à éditer à notre page EditContactPage.

Dynamiser le markup

Ajoutons un attribut wicket:id dans la balise a déjà présente :

ListContactPage.html

<wicket:extend>
			<table cellspacing="5" cellpadding="5">
				<tr wicket:id="liste">
					<td><div><img src="images/people.png"/></div></td>
					<td><span wicket:id="prenom"/>&nbsp;<span wicket:id="nom"/></td>
					<td><a href="#" wicket:id="editer"><img src="images/edit.png"/></a></td>
				</tr>
			</table>
</wicket:extend>

Ajout du lien côté Java

Ajoutons l'élément Link et implémentons sa méthode onClick() afin de renvoyer l'utilisateur vers la page d'édition des contacts.

public class ListContactPage extends TemplatePage {
 
	public ListContactPage() {
		add(new PropertyListView("liste", ZenContactApplication.get()
				.getContactsList()) {
			private static final long serialVersionUID = 1L;
 
			@Override
			protected void populateItem(final ListItem item) {
				final Contact contact = (Contact) item.getModelObject();
 
				item.add(new Label("prenom"));
				item.add(new Label("nom"));
 
				item.add(new Link("editer") {
					@Override
					public void onClick() {
						setResponsePage(new EditContactPage(contact));
					}
				});
			}
		});
	}
 
}

Vous remarquez que nous utilisons un constructeur de la page EditContactPage qui prend en paramètre un objet de type Contact. Créons donc ce constructeur.

public class EditContactPage extends TemplatePage {
 
	public EditContactPage() {
		this(new Contact());
	}
 
	public EditContactPage(Contact contact) {
		super();
		add(new EditContactFrom("editform", contact));
	}
 
        public class EditContactFrom extends Form {/**/}
 
}

Testons

Lancez Jetty, et cliquez sur un des liens nouvellement créés dans la page listant les contacts.

http://localhost:8080/zencontact

Super ! Nous pouvons désormais éditer un contact facilement. Cependant, nous n'avons pas tout à fait terminé, je vous avez promi un peu d'Ajax !

Edition avec une pointe d'Ajax

Voyons comment l'utilisateur peut éditer très rapidement le nom du contact avec seulement 12 caractères de code ! Il suffit de remplacer le Label du nom par un AjaxEditableLabel qui se trouve dans wicket-extensions.

public class ListContactPage extends TemplatePage {
 
	public ListContactPage() {
		add(new PropertyListView("liste", ZenContactApplication.get()
				.getContactsList()) {
			private static final long serialVersionUID = 1L;
 
			@Override
			protected void populateItem(final ListItem item) {
				final Contact contact = (Contact) item.getModelObject();
 
				item.add(new Label("prenom"));
				item.add(new AjaxEditableLabel("nom"));
 
				item.add(new Link("editer") {
					@Override
					public void onClick() {
						setResponsePage(new EditContactPage(contact));
					}
				});
			}
		});
	}
 
}

Testons

Dès que l'utilisateur clique sur le Label "nom", celui est remplacé dynamiquement par un input de type texte. La modification est soumise avec une requêtre AJAX dès que le focus n'est plus sur l'input.

Dans le prochain épisode nous aborderons la création d'un Panel.

Dans le billet précédent nous avons vu comment intégrer un DatePicker à notre formulaire, cette étape finalisait la validation côté serveur. Cependant, nous avons également besoin d'une validation en amont, côté client. Voyons comment l'ajouter.

Ajout du Behavior Yav

Ce que nous voulons côté client, c'est appliquer les mêmes règles de validation que côté serveur. Pour cela, nous faisons appel au plugin Yav, un composant "made in" Zenika intégré dans le projet Wicket Stuff. Wicket Stuff-Yav a pour but d'intégrer Yav un framework de validation purement Javascript à Wicket.

Nous ajoutons tout simplement une instance du Behavior Yav à notre formulaire.

public class EditContactPage extends TemplatePage {
 
    public EditContactPage() {
    super();
    add(new EditContactFrom("editform", new Contact()));
 
    }
 
    public class EditContactFrom extends Form {
 
    public EditContactFrom(String id, Contact contact) {
        super(id);
 
        setModel(new CompoundPropertyModel(contact));
 
        add(new TextField("prenom").setRequired(true));
        add(new TextField("nom").setRequired(true).add(
            new MaximumLengthValidator(10)));
        add(new TextField("dateNaissance", Date.class)
            .add(new DatePicker()));
        add(new TextField("email").add(EmailAddressValidator.getInstance()));
 
        add(new FeedbackPanel("feedback"));
 
        add(new YavBehavior());
    }
 
    @Override
    protected void onSubmit() {
        Contact contact = (Contact) getModelObject();
 
        ZenContactApplication.get().getContacts().add(contact);
 
        setResponsePage(ListContactPage.class);
    }
 
    }
}

Nous pouvons tester la validation côté client : http://localhost:8080/zencontact

C'était la dernière étape de l'implémentation de la création de contacts. Dans un prochain billet nous verrons comment éditer rapidement ces contacts nouvellement créés avec un peu d'AJAX.

Précédent : Zencontact 11 - DatePicker

Dans le précédent billet nous avons vu comme persister un nouveau contact créé avec note formulaire. La création de contacts est donc désormais tout à fait opérationnelle, cependant il nous manque encore quelques fonctionnalités. Dans ce billet, nous allons voir comment faciliter l'insertion et le formatage de la date de naissance à l'aide d'un DatePicker YUI.

Ajouter un Behavior de type DatePicker au composant Java

public class EditContactPage extends TemplatePage {
 
    public EditContactPage() {
    super();
    add(new EditContactFrom("editform", new Contact()));
 
    }
 
    public class EditContactFrom extends Form {
 
    public EditContactFrom(String id, Contact contact) {
        super(id);
 
        setModel(new CompoundPropertyModel(contact));
 
        add(new TextField("prenom").setRequired(true));
        add(new TextField("nom").setRequired(true).add(
            new MaximumLengthValidator(10)));
        add(new TextField("dateNaissance", Date.class).add(new DatePicker()));
        add(new TextField("email").add(EmailAddressValidator.getInstance()));
 
        add(new FeedbackPanel("feedback"));
    }
 
    @Override
    protected void onSubmit() {
        Contact contact = (Contact) getModelObject();
 
        ZenContactApplication.get().getContacts().add(contact);
 
        setResponsePage(ListContactPage.class);
    }
 
    }
}

Le DatePicker n'a pas pour unique but de faciliter l'insertion d'une date pour l'utilisateur. Il permet également de s'assurer qu'il n'y aura pas de problèmes lors de la conversion de la chaîne de caractères en type Date, puisque le format de date provient du serveur.

Testons : http://localhost:8080/zencontact

La validation côté serveur est maintenant complète. Cependant, pour davantage de fiabilité, il serait utile de valider en amont, côté client. Nous verrons comment procéder dans le prochain billet.

Précédent : Zencontact 10 - Persistance du contact
Suivant : Zencontact 12 - Validation côté client

Après s'être assuré de la validation de notre formulaire, nous pouvons enfin persister ce nouveau contact dans notre liste.

Persister le nouveau contact

Cette étape s'effectue au moment de la soumission du formulaire. Nous allons donc surcharger la méthode onSubmit() de notre composant EditContactForm.

public class EditContactPage extends TemplatePage {
 
    public EditContactPage() {
        super();
        add(new EditContactFrom("editform", new Contact()));
 
    }
 
    public class EditContactFrom extends Form {
 
        public EditContactFrom(String id, Contact contact) {
            super(id);
 
            setModel(new CompoundPropertyModel(contact));
 
            add(new TextField("prenom").setRequired(true));
            add(new TextField("nom").setRequired(true).add(new MaximumLengthValidator(10)));
            add(new TextField("dateNaissance", Date.class));
            add(new TextField("email").add(EmailAddressValidator.getInstance()));
 
            add(new FeedbackPanel("feedback"));
        }
 
        @Override
        protected void onSubmit() {
            Contact contact = (Contact) getModelObject();
 
            ZenContactApplication.get().getContacts().add(contact);
        }
 
    }
}

Nous récupérons ici l'objet de type Contact modifié à partir du modèle de notre formulaire, puis nous l'ajoutons à notre liste de contacts.

Il est intéressant de remarquer que Wicket fait usage du pattern "Redirect After Post" afin d'empêcher l'utilisateur de soumettre le même formulaire en rafraîchissant sa page après l'envoi d'une première requête POST.

Vous pouvez tester vous même : http://localhost:8080/zencontact

Rappelons que notre Collection de contacts est un Set qui ne peut contenir d'éléments dupliqués !

Rediriger vers la liste de contacts

Une fois le contact correctement persisté, nous pouvons rediriger le client vers la page listant les contacts (ListContactPage), afin d'y voir le contact nouvellement ajouté.

public class EditContactPage extends TemplatePage {
 
    public EditContactPage() {
        super();
        add(new EditContactFrom("editform", new Contact()));
 
    }
 
    public class EditContactFrom extends Form {
 
        public EditContactFrom(String id, Contact contact) {
            super(id);
 
            setModel(new CompoundPropertyModel(contact));
 
            add(new TextField("prenom").setRequired(true));
            add(new TextField("nom").setRequired(true).add(new MaximumLengthValidator(10)));
            add(new TextField("dateNaissance", Date.class));
            add(new TextField("email").add(EmailAddressValidator.getInstance()));
 
            add(new FeedbackPanel("feedback"));
        }
 
        @Override
        protected void onSubmit() {
            Contact contact = (Contact) getModelObject();
 
            ZenContactApplication.get().getContacts().add(contact);
            setResponsePage(ListContactPage.class);
        }
 
    }
}

L'ajout de contact est maintenant opérationnel. Cependant notre formulaire ne possède pas encore toutes les fonctionnalités requises, nous verrons dans un prochain billet comment faciliter l'insertion de la date de naissance de notre contact à l'aide d'un DatePicker.

Précédent : Zencontact 9 -Validation côté serveur
Suivant : Zencontact 11 - DatePicker