Quickstart Reloaded

Jan 30

Java, Tutorial, Wicket par nicogiard Add comments

Après un démarrage calme, nous allons commencer à rentrer un peu plus dans les artères de Wicket avec ce post sur les formulaires et les modèles.

Pour ce post, nous allons créer une nouvelle application, dont le but est de proposer au visiteur un moyen simple et rapide de transformer un code source HTML, en remplaçant les <, > et & par l’équivalent en code html (<, > et &) pour qu’il puisse saisir facilement du code HTML “lisible” dans Wordpress.

Créez un nouveau projet nommé “cleanhtml” (ne me dites pas que vous ne savez pas comment faire, vous allez me vexer…)

Vous avez évidemment :

créé une classe [CleanHtmlApplication] héritant de [WebApplication]
copier/coller les fichiers [build.xml] et [ivy.xml]
modifié le fichier [web.xml]
créé une classe [HomePage.java]
créé un ficher HTML [HomePage.html] dans le même répertoire que la classe

Voici le contenu de la classe [HomePage.java], nous allons la commenter juste après avoir tout mis en place.

package com.noocodecommit.wicket.cleanhtml.wicket.pages;
 
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextArea;
import org.apache.wicket.model.PropertyModel;
 
public class HomePage extends WebPage
{
	public HomePage()
	{
		add(new CleanHtmlForm("formCleanHtml"));
	}
 
	class CleanHtmlForm extends Form
	{
		private String htmlCode = "";
 
		public CleanHtmlForm(String id)
		{
			super(id);
 
			PropertyModel model = new PropertyModel(this, "htmlCode");
 
			add(new TextArea("txtCleanHtml", model));
			add(new Label("lblCleanHtml", model).setEscapeModelStrings(false));
		}
 
		@Override
		protected void onSubmit()
		{
			super.onSubmit();
 
			setHtmlCode(htmlCode.replaceAll("&amp;", "&amp;"));
			setHtmlCode(htmlCode.replaceAll("&lt;", "&lt;"));
			setHtmlCode(htmlCode.replaceAll("&gt;", "&gt;"));
		}
 
		public String getHtmlCode()
		{
			return htmlCode;
		}
 
		public void setHtmlCode(String htmlCode)
		{
			this.htmlCode = htmlCode;
		}
	}
}

Et voici le contenu du ficher HTML [HomePage.html].

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Clean Html</title>
  </head>
  <body>
	<form wicket:id="formCleanHtml">
		<textarea rows="20" cols="50" wicket:id="txtCleanHtml"></textarea>
		<pre><code class="html" wicket:id="lblCleanHtml">[lblCleanHtml]</code></pre>
		<button type="submit">Compute</button>
	</form>
  </body>
</html>

Alors qu’est ce qu’on a là dedans?

Faisons ensemble l’arbre de cette page.

page
- formCleanHtml
  - txtCleanHtml
  - lblCleanHtml

Cela nous permet de mieux voir comment les composants sont ajoutés les uns aux autres.
En premier lieu, le formulaire. Nous avons défini une “inner class” [CleanHtmlForm] qui hérite de [Form]. Ce composant est la pierre angulaire de la gestion des informations saisies par le visiteur (jusque là rien d'extraordinaire).
Il est lui même composé de deux autres composants, [TextArea] et [Label].

Le traitement que l'on doit effectuer sur le texte saisi par l'utilisateur intervient lors de la validation du formulaire. Il est donc tout à fait naturel de surcharger la méthode [onSubmit] de la classe [Form] pour implémenter notre fonctionnalité.

Ok, mais qu’est ce que c’est que ce « PropertyModel » ?

Et bien, l’objet [PropertyModel] que nous créons est un [Model]!!!
Le [Model] est LE concept le plus important de Wicket. Si vous comprenez ça, plus rien ne vous arrêtera.

Un [Model] est en fait une abstraction entre un Composant et la donnée que vous avez à traiter.

Sans le savoir vous avez déjà utilisé un Model dans l'application helloworld du quickstart. Et oui car

new Label("lblHello", "Salut le monde!!!");

est en fait un constructeur de flemmard. Voilà ce qui se passe derrière cette simplicité:

IModel labelModel = new Model("Salut le monde!!!");
new Label("lblHello", labelModel);

Avec Wicket, toutes les données qui sont manipulées par un composant doivent être “encapsulées” au sein d’un Model. Voyons ce que ça donne dans notre exemple!

Notre donnée à nous elle est là :

private String htmlCode = "";

Ce que le visiteur va saisir sera stocké dans cette variable. Il nous faut donc prévenir Wicket de qui doit être lié à cette variable et de quelle façon elle doit être modifiée/accédée.

Le [PropertyModel] est un model très simple qui, en fonction d'un objet passé en paramètre, et d'une certaine "propriété" de cet objet, est capable de faire appel aux méthodes [getPropriété()] et [setPropriété()].

PropertyModel model = new PropertyModel(this, "htmlCode");

veut donc dire que nous avons un model associé à [this] (donc l'objet [CleanHtmlForm]) et que Wicket devra utiliser les méthodes [getHtmlCode()] et [setHtmlCode()] pour accéder/modifier aux données.

On peut facilement imaginer ce qui se passe :

l’utilisateur saisi un code HTML dans la zone de texte
l’utilisateur appui sur le bouton [Compute]
Wicket appel la méthode [setHtmlCode()] avec le texte saisi
Wicket exécute la méthode [onSubmit()] de l'objet [CleanHtmlForm] qui modifie la variable [htmlCode]
Wicket construit la page de destination (la même), et au moment de générer le code lié au [Label] il appel la méthode [getHtmlCode()] pour récupérer le texte à afficher