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"/> <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.
