Initiation à WICKET

APACHE WICKET

1- INTRODUCTION

Le framework Wicket est un projet développé par la fondation Apache (site officiel : http://wicket.apache.org/) ayant pour but de développer des applications web. Certes, il existe déjà une multitude de frameworks équivalent (Struts, Spring MVC, etc...) mais cet outil se démarque des autres outils notamment par quelques caractéristiques. Ainsi les objectifs principaux de ce framework sont :

  • La facilité de prise en main : Les composants HTML (label, formulaire, lien hypertexte, etc...) sont représentés par des classes JAVA de type POJO (ex : un formulaire est associée à la classe Wicket wicket.markup.html.form.Form ; cf : http://wicketstuff.org/wicket14/compref/) ; Wicket n'utilise pas de nombreux fichiers XML pour configurer l'application.
  • La réutilisabilité de composants Wickets déjà existants (ex : l'autocomplétion avec la classe Wicket AutoCompleteTextField du package org.apache.wicket.extensions.ajax.markup.html).
  • Aucun fichier HTML ne contient de lignes de code JAVA ; le développeur doit uniquement « marquer » les composants HTML en leur donnant un identifiant propre à Wicket (« wicket-id »).

Pour illustrer ce concept, examinons la conception d'une application web.

APACHE WICKET

1- INTRODUCTION

Le framework Wicket est un projet développé par la fondation Apache (site officiel : http://wicket.apache.org/) ayant pour but de développer des applications web. Certes, il existe déjà une multitude de frameworks équivalent (Struts, Spring MVC, etc...) mais cet outil se démarque des autres outils notamment par quelques caractéristiques. Ainsi les objectifs principaux de ce framework sont :

  • La facilité de prise en main : Les composants HTML (label, formulaire, lien hypertexte, etc...) sont représentés par des classes JAVA de type POJO (ex : un formulaire est associée à la classe Wicket wicket.markup.html.form.Form ; cf : http://wicketstuff.org/wicket14/compref/) ; Wicket n'utilise pas de nombreux fichiers XML pour configurer l'application.
  • La réutilisabilité de composants Wickets déjà existants (ex : l'autocomplétion avec la classe Wicket AutoCompleteTextField du package org.apache.wicket.extensions.ajax.markup.html).
  • Aucun fichier HTML ne contient de lignes de code JAVA ; le développeur doit uniquement « marquer » les composants HTML en leur donnant un identifiant propre à Wicket (« wicket-id »).

Pour illustrer ce concept, examinons la conception d'une application web.

2- FONCTIONNEMENT DE WICKET

Avant de commencer fournissons les outils nécessaires au développement de l'application. Ajoutons les dépendances à Wicket, SLF4J et à Jetty (pour lancer l'application sur un serveur d'application avec le plugin jetty:run-war) dans le fichier pom.xml :

Extrait du fichier pom.xml :

<dependency>

           <groupId>org.apache.wicket</groupId>
           <artifactId>wicket</artifactId>
           <version>${wicket.version}</version>
       </dependency>
       <dependency>
           <groupId>org.apache.wicket</groupId>
           <artifactId>wicket-extensions</artifactId>
           <version>${wicket.version}</version>
       </dependency>
       <dependency>
           <groupId>org.slf4j</groupId>
           <artifactId>slf4j-log4j12</artifactId>
           <version>1.0.1</version>
       </dependency>
       <dependency>
           <groupId>org.mortbay.jetty</groupId>
           <artifactId>jetty</artifactId>
           <version>${jetty.version}</version>
           <scope>provided</scope>
       </dependency>
       <dependency>
           <groupId>org.mortbay.jetty</groupId>
           <artifactId>jetty-util</artifactId>
           <version>${jetty.version}</version>
           <scope>provided</scope>
       </dependency>
       <dependency>
           <groupId>org.mortbay.jetty</groupId>
           <artifactId>jetty-management</artifactId>
           <version>${jetty.version}</version>
           <scope>provided</scope>
       </dependency>

Pour que Wicket traite chaque requête HTTP, il est indispensable de déclarer une servlet Wicket pour filtrer les requêtes HTTP dans le fichier web.xml :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 
                                             "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
	<display-name>Une application Wicket</display-name>
	<servlet>
		<servlet-name>WicketApplication</servlet-name>
		<servlet-class>
			org.apache.wicket.protocol.http.WicketServlet
		</servlet-class>
		<init-param>
			<param-name>applicationClassName</param-name>
			<param-value>com.gdelattre.WicketApplication</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>WicketApplication</servlet-name>
		<url-pattern>/wicket/*</url-pattern>
	</servlet-mapping>
</web-app>

Fichier WicketApplication.java :


public class WicketApplication extends WebApplication {

	   protected void init() {
   	}

	   public Class getHomePage() {
		      return HomePage.class;
   	}
}

Ce filtre (WicketServlet) appelle la classe WicketApplication qui hérite de la classe Wicket WebApplication, classe très importante de ce framework. Il s'agit du point d'entrée de toutes requêtes HTTP. Cette classe redéfinit la méthode getHomePage() qui indique quelle classe Wicket est en charge de construire la page d'accueil de l'application, ici HomePage.

La création d'un site web avec Wicket se rapproche de l'utilisation d'un framework graphique Desktop comme Swing ou SWT.
Pour qu'il puisse être lié à la page web...

  • On traite la page comme un objet.
  • On lui ajoute les composants directement en lui donnant l'ID du composant en question.

Observons l'implémentation de la page d'accueil. Plaçons-y un élément dynamique en bas à droite (la date du jour) et un lien redirigeant l'utilisateur vers une page.
Fichier HomePage.html :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket="http://wicket.apache.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Une application Wicket</title>
    </head>
    <body>
        <h1>Page d'accueil</h1>
        
        <div style="text-align: right; font-size: 70%" wicket:id="datetime">
            Plaçons la date à cet endroit !!!
        </div>
    </body>
</html>

Fichier HomePage.java :

public class HomePage extends BasePage {

    public HomePage() {
    	Date now = new Date();
      Label labelDateTime = new Label("datetime", now.toString());
      this.add(labelDateTime);
    }
}

Vous constaterez que les noms des fichiers HTML et JAVA (HomePage) sont exactement les mêmes, condition obligatoire dans Wicket.
La classe JAVA étend la classe WebPage : Les classes corespondant aux pages de l'application doivent hériter de cette classe. La classe comporte un constructeur par défaut dans lequel le développeur ajoute les éléments souhaités (ici, la date du jour).

Voici le résultat :

Capture1.png

Ajoutons maintenant un lien hypertexte à notre page d'accueil. Pour cela, implémentons ce lien par une classe héritant de la classe Wicket Link que l'on ajoutera à la page d'accueil. Nous nous apercevons que l'implémentation d'une page d'une application ressemble à la programmation graphique type AWT ou SWING (programmation orientée également composant).
La page cible affiche uniquement un message destiné à l'utilisateur :
Page.html

<html xmlns:wicket="http://wicket.apache.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Link</title>
    </head>
    <body>
    	<h2>Vous avez cliqué sur le lien !</h2>
    </body>
</html>

avec sa classe associée (Page.java):

public class Page extends WebPage{
	
	public Page() {
    }

}

La classe correspondant au lien PageLink qui hérite de Link:

public class PageLink extends Link {

    public PageLink(String id) {
        super(id);
    }

    @Override
    public void onClick() {
        Page target = new Page();
        this.setResponsePage(target);
    }
}

Ajoutons le lien dans la page d'accueil :

<ul>
  <li><a href="#" wicket:id="lien">Cliquez ici</a></li>
</ul>

Nous devons alors ajouter ce lien dans la classe HomePage :
PageLink lien = new PageLink("lien");>

Regardons le résultat :

Capture2.png

Capture3.png

2- STRUCTURE DE L'APPLICATION

Ajoutons une feuille de style afin de donner une cohérence graphique aux pages de l'application :
HTML :

<link wicket:id="stylesheet" rel="stylesheet" type="text/css" href="#"/>

HomePage.java et Page.java :

import org.apache.wicket.markup.html.resources.StyleSheetReference;

this.add(new StyleSheetReference("stylesheet", HomePage.class,
	            "style.css"));

Capture4.png

Allons un peu loin et definissons une classe de base regroupant les éléments communs aux pages de l'application. Toutes les classes implémentant les pages devront alors hériter de cette classe.

BasePage.java :

public class BasePage extends WebPage {

    public BasePage() {
        this(null);
    }

    public BasePage(IModel model) {
        super(model);
        this.add(new StyleSheetReference("stylesheet", BasePage.class,
                "style.css"));
    }
}

HomePage.java et Page.java :

public class HomePage extends BasePage
public class Page extends BasePage

Modifions l'application et ajoutons aux pages de l'application un en-tête comportant 2 liens : un pour revenir sur la page d'accueil et l'autre pour afficher la page cible. Ces liens seront donc ajoutés à la classe de base des pages.

Pour créer cet en-tête, nous allons créer une classe héritant de la classe Panel de Wicket permettant de rajouter des liens hypertextes.

HeaderPanel.html :

<html xmlns:wicket="http://wicket.apache.org">
    <head>
        <title>Une application wicket</title>
    </head>
    <body>
        <wicket:panel>
            <ul>
                <li><a href="#" wicket:id="home">Page d'accueil</a></li>
                <li><a href="#" wicket:id=&qu
ot;lien">lien</a></li>
            </ul>
        </wicket:panel>
    </body>
</html>

HeaderPanel.java :

public class HeaderPanel extends Panel {

    public HeaderPanel(String id) {
        super(id);

        Link homeLink = new Link("home") {

            @Override
            public void onClick() {
                this.setResponsePage(new HomePage());
            }
        };
        this.add(homeLink);

        Link lien = new Link("lien") {

            @Override
            public void onClick() {
                this.setResponsePage(new Page());
            }
        };
        this.add(lien);
    }
}

BasePage.java :

this.add(new HeaderPanel("mainNavigation"));

HomePage.html & Page.html :

<div wicket:id="mainNavigation">lien vers les pages communes</div>

Résultat :

Capture-5.png

Ajoutons comment faire pour afficher un formulaire, interface quasi-obligatoire pour toute application. Pour cela ajoutons un autre lien « formulaire » à l'en-tête de la page de base.

HeaderPanel.html :

<li><a href="#" wicket:id="formulaire">Formulaire</a></li>

HeaderPanel.java :

Link formLien = new Link("formulaire") {

            @Override
            public void onClick() {
                Object objet = new Object();
                this.setResponsePage(new FormulairePage("formulaire"));
            }
        };
        this.add(formLien);

FormulairePage.java :

public final class FormulairePage extends BasePage {

    public FormulairePage(Object unObjet) {
        this.add(new Formulaire("formulaire"));
    }
}

Formulaire.html :

<html>
       <body>
        <div wicket:id="mainNavigation">links to common pages</div>

        <form action="#" wicket:id="formulaire">
            <table>
                <tr>
                    <th>Nom:</th>
                    <td><input wicket:id="nom" type="text"/></td>
                </tr>
                <tr>
                    <th>Prenom:</th>
                    <td><input wicket:id="prenom" type="text" size="4"/></td>
                </tr>
            </table>
            <input value="Sauvegarder" name="save" type="submit"/>
        </form>
    </body>
</html>

Formulaire.java :

public class Formulaire extends Form {

    public Formulaire(String id) {
        super(id);

        //CompoundPropertyModel model = new CompoundPropertyModel(unObjet);
        //this.setModel(model);

        this.add(new TextField("nom"));
        this.add(new TextField("prenom"));
    }

    @Override
    public void onSubmit() {
        //Object objet = (Object) this.getModelObject();
        this.setResponsePage(new HomePage());
    }
}

Nous constatons que le formulaire est ajouté de la même façon que les autres composants HTML, c'est-à-dire en liant chaque élément par une instance d'une classe wicket.

Résultat :

Capture-6.png

4- POPULARITE

Sites développés avec Wicket :



...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.