Apache Wicket, le Framework Java et HTML

Introduction

Wicket est un Framework Java servant à développer des applications Web puissante, avec des composants réutilisables, orienté objet et tout cela en utilisant seulement Java et HTML.

Installer un projet Wicket

L’application Web créée dans ce cours sera développée sur Eclipse.

Afin de construire le projet rapidement nous allons utiliser Maven. Un outil qui permet d’automatiser la gestion et la construction d’un projet.

Installation de Maven

Le téléchargement peut se faire à partir de cette page : http://maven.apache.org/download.cgi#

Décompressez l’archive dans le répertoire où vous souhaitez travailler et installez les variables d’environnements M2 et M2Home.

Vous aurez accès aux variables d’environnements depuis les paramètres Windows en tapant « Variable d’environnements » dans la barre de recherche (Sous Windows 10) et dans le menu démarrer, cliquer sur panneau de configuration, puis sur Système, onglet avancé (anciennes versions).

Afin de tester que Maven est bien installé, exécutez la commande mvn –version

Voici ce qui devrait apparaître sur votre écran :

Quick start

Afin de lancer le Quick Start, rendez-vous sur cette page :

https://wicket.apache.org/start/quickstart.html

 

 

Vous pouvez le modifier en remplissant le formulaire comme suit :

Et lancer ensuite la commande qui est situé dans le dernier champs. Le projet va donc être construit dans le répertoire où vous avez exécuté la commande. Ici ce sera dans c:/Tuto_Wicket.

Placez-vous à présent dans le répertoire de projet que vous venez de créer, grâce à la commande cd.

Exemple :

Et coller ensuite cette commande qui vous permettra d’utiliser le projet avec Eclipse :

mvn eclipse:eclipse -DdownloadSources=true

Lorsque la commande a été entièrement exécutée, ouvrez le menu File sur Eclipse et cliquez sur Importer.

 

 

Voici la fenêtre d’import, cliquez sur General, puis sur « Existing Project in Workspace »

Et rentrer le chemin du projet dans le champ :

Désormais notre projet est intégré à Eclipse, vous avez accès à l’arborescence en cliquant sur l’onglet Project Explorer.

Nous allons ajouter les dépendances grâce à cette commande :

Mvn -Declipse.workspace eclipse :add-maven-repo

Maintenant que l’installation du projet est achevée, nous allons intégrer un conteneur de servlet afin de pouvoir déployer le projet sur un serveur web.

 

Installation du conteneur de Servlet

Installation de Jetty

Jetty est un serveur http open source entièrement consacré à Java.

On trouve ses libraires dans les dépendances Maven, de ce fait nous l’avons déjà dans l’installation effectué avec le QuickStart.

Vous pouvez lancer Jetty en éxecutant la commande : mvn jetty :run

Le serveur est alors lancé, rendez-vous sur la page : localhost:8080

Si tout fonctionne vous atterrissez sur cette page :

Installation de Tomcat

Tomcat est un conteneur de servlet, il implémente les spécifications des servlets et des JSP du Java Community Process5, est paramétrable par des fichiers XML et des propriétés, et inclut des outils pour la configuration et la gestion.

Vous pouvez récupérer le zip sur cette page : https://tomcat.apache.org/download-80.cgi

Et le décompresser dans le dossier Tuto_wicket

Dans votre projet, faites un clic droit sur le dossier du projet et cliquez sur Run as -> Run on server :

Dans la fenêtre qui suit, choisissez la dernière version de Tomcat :

Et terminez par « Finish ».

Si tout est bon, Tomcat va alors charger notre projet en affichant cette page, lorsque vous cliquez sur Run MyProject

Si vous avez un problème de conflit de port entre Tomcat et Jetty, ouvrez le fichier serveer.xml de Tomcat afin de changer le port, par exemple sur 8090 (Vu que Jetty utilise le port 8080).

Vous avez désormais terminé l’installation du Quick start. Nous allons maintenant nous intéresser aux principes de Wicket.

Les principes de Wicket

Le fichier web.xml

Le fichier web.xml que l’on retrouve dans le dossier web-inf est le descripteur de déploiement de l’application. Il contient les informations de configurations en informant le conteneur de servlet qu’il faut utiliser un filtre Wicket .

La classe d’initialisation

Il s’agit de la classe WicketApplication. La méthode getHomePage() retourne la page servant à afficher la page d’accueil, ici : HomePage.

Page Web Wicket

Une page Wicket est constitué de deux éléments :

  • Une classe qui hérite de la classe WebPage (ou d’une classe dérivée).
  • Un fichier HTML portant le même nom que la classe.

Ces deux éléments doivent être situés dans le même dossier.

C’est pour cela que nous retrouvons dans notre arborescence ces deux fichiers :

HomePage.java et HomePage.html

La page HTML

La page HTML de Wicket est une page HTML classique, mis à part cette ligne :

Celle-ci contient un attribut wicket :id avec le paramètre version.

Lorsque l’on vérifie sur la page voici ce qui apparait à l’endroit où est situé cette ligne :

Si l’on regarde maintenant notre fichier HomePage.Java

On constate que la mention version est utilisé dans la classe Label. Et on peut voir dans les imports que cette classe provient du paquet Wicket.

On peut donc en déduire que la clé version, récupère la valeur grâce à la méthode getVersion() et que c’est grâce à celle-ci que l’on affiche la version de Wicket, sur la page d’accueil.

De cette manière, on peut utiliser un attribut wicket :id pour chaque composant que l’on veut rajouter sur nos pages.

Démarrage de notre application

Maintenant que nous savons comment installer et déployer un projet Wicket. Nous allons maintenant pouvoir démarrer le projet afin de voir plus en détail le fonctionnement de ce framework.

Afin de continuer à travailler avec le css actuel de la page, nous allons enlever le corps de la page, pour y rajouter nos fonctionnalités. On supprime donc les lignes situées dans la div « bd » qui correspond à body (ligne 17 à 55). Nous gardons la balise « p » qui contient notre label.

Voici à quoi devrait ressembler la page à présent :

En prenant exemple sur la manière dont est formée la balise qui contient le label, nous allons remplacer le numéro de version par un message de bienvenue.

Dans Homepage.html, on retire ce qu’il y a à l’intérieur de la balise « p » et on rajoute ceci à la place :

Et dans le HomePage.java, on met a ligne version en commentaire et on rajoute celle-ci.

La ligne version doit être mise en commentaire, car si elle n’est pas utilisée dans le HomePage.Html cela va générer une erreur.

Voilà ce que donne notre modification :

Message personnalisé

Afin de rendre l’application plus personnelle, nous allons faire en sorte de demander à l’utilisateur son prénom, afin que l’application s’adresse à lui dans le message de bienvenue.

Pour cela, créons une nouvelle page html « Login.html », vous pouvez la personnalisé de sorte qu’elle contienne une balise Form, avec la demande du prénom, un champs et un bouton auxquels on va rajouter à chacun un attribut wicket :id.

Rappel :

Pour créer une page HTML sous Eclipse :

Clic droit sur le package com.tuto, situé en dessous de src/main/java et cliquez sur New File :

Voici à peu près à quoi doit ressembler votre code Login.html :

<html xmlns:wicket="http://wicket.apache.org/">

<head>

</head>

<body>

<form wicket:id="loginForm">

<h3>Quel est votre prénom ? </h3>

<input type="text" wicket:id="login">

<input type="submit" value="Valider">

</form>

</body>

</html>

Comme nous l’avons dit plus haut, si l’on crée une page html avec apache Wicket, il faut le fichier Java qui va avec. Le fichier Login.java va contenir le traitement de l’information.

L’utilisation de Wicket donne à la balise Form, une classe correspondante Form. Cette classe inclut la méthode onSubmit() qui va traiter la réponse lorsqu’on appuie sur le bouton Valider du formulaire.

Pour labalise Text, elle sera représentée par un TextField que l’on va aouter à notre instance de Form. Cette instance comprend deux paramètres :

  • Le paramètre « login » auquel on fait référence dans l’attribut wicket :id de la balise Text.
  • Une instance de la classe Model.

package com.tuto;

 

import org.apache.wicket.markup.html.form.Form;

import org.apache.wicket.markup.html.form.TextField;

import org.apache.wicket.model.Model;

 

public class Login {

 

public Login() {

super();

final TextField loginText = new TextField("login", new Model());

Form form = new Form("loginForm") {

@Override

protected void onSubmit() {

System.out.println(loginText.getValue());

}

};

form.add(loginText);

add(form);

}

 

}

La page BasePage.Java quant à elle sera vierge :

Nous allons ensuite faire hériter de la classe BasePage.java les classes qui correspondent à celles de notre application, puis à inclure les pages « filles » dans les balises <wicket :extend>.

Exemple d’héritage BasePage sur HomePage.Java :

L’héritage de BasePage se fait ici grâce à l’extends en première ligne.

 

 

Exemple de l’inclusion des pages filles grâce au wicket :extend :

HomePage.html

Login.html

Les sessions

Le protocole http est un protocole sans état, cela veut dire qu’il traite toutes les requêtes indépendamment les unes des autres. Cependant une web application est censée s’adresser à plusieurs utilisateurs. C’est à ce moment là qu’intervient la Session. Et ici c’est le conteneur de servlet qui va gérer ces sessions. Nous allons ici observer comment utiliser le prénom demandé à l’utilisateur, dans chaque page, grâce à la session.

 La classe User

Nous allons créer une classe User, qui a contenir, un champ String avec ses accesseurs et son constructeur.

Utiliser la session

Afin d’utiliser User comme champ de la session, on va se rendre dans la classe WicketApplication, pour redéfinir la méthode newSession() de la classe Application. Cette méthode retourne un Objet de la classe Session, parente avec WebSession.

Nous allons donc créer une classe que l’on va nommer UserSession, qui va hériter de WebSession, et dans laquelle on va se servir d’User et de ses accesseurs.

WicketApplication.java

UserSession.java

Accès à la session

Afin d’accéder à la session nous allons utilise la méthode getSession() de la classe Component du package Wicket.

Nous allons donc créer une méthode getMySession() dans la classe BasePage.java, celle-ci sera ensuite accessible à partir des pages qui hérite de BasePage.

BasePage.java :

Le message d’accueil va pouvoir être personnaliser grâce à cette partie dans la page HomePage.html:

Laisser un commentaire

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