Exercice – Créer une application web JavaServer Faces sur Tomcat
Il vous a été demandé de créer une application web JavaServer Faces (JSF) capable de traiter les envois de formulaires. Vous allez créer une application web et la déployer localement sur un serveur Tomcat.
Créer une application web JSF simple sur Tomcat
Dans cet exercice, nous allons créer un projet Maven pour votre application web Java. Une fois le projet créé, vous devez définir trois configurations. Une première pour ajouter les bibliothèques de dépendances au fichier pom.xml. Une seconde pour créer un fichier de configuration CDI comme beans.xml pour utiliser Contexts and Dependency Injection (CDI). Une troisième pour configurer JSF dans le fichier web.xml. Une fois les configurations définies, nous pouvons créer une page web JSF et le backing bean pour l’opération back-end côté serveur. Pour finir, nous procéderons à une évaluation dans l’environnement Tomcat local.
Créer un projet Maven
Exécutez la commande Maven archetype suivante. Cette commande a pour effet de créer un projet Maven pour l’application web Java.
mvn archetype:generate \
-DgroupId=com.microsoft.azure.samples \
-DartifactId=azure-javaweb-app \
-DarchetypeArtifactId=maven-archetype-webapp \
-Dversion=1.0-SNAPSHOT \
-DinteractiveMode=false
Le résultat suivant s’affiche :
[INFO] Parameter: package, Value: com.microsoft.azure.samples
[INFO] Parameter: groupId, Value: com.microsoft.azure.samples
[INFO] Parameter: artifactId, Value: azure-javaweb-app
[INFO] Parameter: packageName, Value: com.microsoft.azure.samples
[INFO] Parameter: version, Value: 1.0-SNAPSHOT
[INFO] project created from Old (1.x) Archetype in dir: /private/tmp/TMP/azure-javaweb-app
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 5.416 s
[INFO] Finished at: 2020-11-02T11:12:58+09:00
[INFO] ------------------------------------------------------------------------
Les fichiers et répertoires suivants sont maintenant disponibles.
├── pom.xml
└── src
└── main
├── resources
└── webapp
├── WEB-INF
│ └── web.xml
└── index.jsp
Modifier le fichier Maven pom.xml
Pour utiliser les bibliothèques JSF, nous devons ajouter les bibliothèques de dépendances suivantes dans pom.xml.
Remplacez le contenu de votre fichier pom.xml par le code suivant :
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.microsoft.azure.samples</groupId>
<artifactId>azure-javaweb-app</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>azure-javaweb-app Maven Webapp</name>
<url>http://maven.apache.org</url>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<failOnMissingWebXml>false</failOnMissingWebXml>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.glassfish</groupId>
<artifactId>javax.faces</artifactId>
<version>2.4.0</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>8.0</version>
</dependency>
<dependency>
<groupId>org.jboss.weld.servlet</groupId>
<artifactId>weld-servlet</artifactId>
<version>2.4.8.Final</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mockito</groupId>
<artifactId>mockito-core</artifactId>
<version>2.23.0</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>azure-javaweb-app</finalName>
</build>
</project>
Si vous souhaitez utiliser Java SE 11 plutôt que Java 8, modifiez l’entrée pom.xml suivante :
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
Activer Contexts and Dependency Injection
Mettez ensuite CDI à la disposition de votre application web. Créez un fichier beans.xml sous le répertoire src/main/WEB-INF et décrivez le contenu suivant :
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd"
bean-discovery-mode="all">
</beans>
Activer JSF
Ensuite, pour reconnaître tous les fichiers à extension xhtml en tant que Facelets JSF, apportez les modifications suivantes à web.xml sous le répertoire WEB-INF.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>nova-light</param-value>
</context-param>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Modifier le nom d’index.jsp
Maintenant que les paramètres d’environnement permettant l’exécution de JSF sont complétés, il est temps de créer la page JSF. Les pages web JSF sont écrites au format de fichier XHTML et non JSP, comme défini dans web.xml dans l’exemple précédent. Il convient donc de modifier le nom du fichier index.jsp qui a été généré automatiquement au moment de créer le projet dans index.xhtml.
mv index.jsp index.xhtml
Créer une page web de base pour JSF
Supprimez l’ensemble du contenu décrit dans index.xhtml, puis copiez le code suivant :
<?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="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Input Value Counter Sample</title>
</h:head>
<h:body>
<h:form>
<p:outputLabel value="Basic" /><br />
<p:inputText value="#{indexcontroller.inputValue}" /><br />
<p:commandButton update="ajaxUpdateText" value="Submit" action="#{indexcontroller.submitButtonAction()}" />
<br />
<p:outputLabel id="ajaxUpdateText" value="Input Value: #{indexcontroller.inputValue}" /><br />
</h:form>
</h:body>
</html>
Créer un backing bean JSF
Ensuite, créez un backing bean pour implémenter le traitement back-end côté serveur. Créez un répertoire pour votre package Java, qui va servir à créer le backing bean sous le répertoire src/main.
mkdir src/main/java
mkdir src/main/java/com
mkdir src/main/java/com/microsoft
mkdir src/main/java/com/microsoft/azure
mkdir src/main/java/com/microsoft/azure/samples
Créez ensuite un fichier IndexController.java et copiez-collez le code du backing bean JSF qui suit :
package com.microsoft.azure.samples;
import java.io.Serializable;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;
@Named("indexcontroller")
@ViewScoped
public class IndexController implements Serializable{
private static final long serialVersionUID = 8485377386286855408L;
@Setter @Getter
private String inputValue;
private int counter;
public void submitButtonAction(){
inputValue = inputValue + " : " + counter;
counter++;
}
}
Cette dernière action finalise votre programme. La structure de répertoires après l’implémentation du programme se présente comme suit :
├── pom.xml
└── src
└── main
├── java
│ └── com
│ └── microsoft
│ └── azure
│ └── samples
│ └── IndexController.java
├── resources
└── webapp
├── WEB-INF
│ ├── beans.xml
│ └── web.xml
└── index.xhtml
Exécuter dans l’environnement Tomcat local
Si vous avez installé Tomcat 9.0.x dans votre environnement local, passez à l’étape suivante. Sinon, passez à la section suivante.
Compilez le code source et exécutez-le dans un environnement Tomcat installé localement. Exécutez la commande suivante.
Compiler et empaqueter le projet Java
Exécutez la commande suivante pour compiler le code :
mvn clean package
Copier l’artefact dans le répertoire de déploiement sur Tomcat
Copiez le fichier war de l’artefact dans le répertoire de Tomcat.
cp target/azure-javaweb-app.war /$INSTALL_DIR/apache-tomcat-9.0.39/webapps/
Démarrer le serveur Tomcat
Démarrez le serveur Tomcat.
$INSTALL_DIR/apache-tomcat-9.0.39/bin/startup.sh
Après avoir démarré Tomcat, accédez à http://localhost:8080/azure-javaweb-app/, puis vous verrez l’écran suivant :
Vous avez réussi à exécuter votre application web JSF dans votre environnement Tomcat local.