Tutoriel JSF pour débutants

Tutoriels

JSF

Bienvenue au tutoriel JSF pour débutants. La technologie Java Server Faces (JSF) est un framework côté client qui facilite la création de composants d’interface utilisateur en réutilisant les composants d’interface utilisateur. JSF est conçu sur la base du modèle Modèle Vue Contrôleur (MVC) qui sépare la présentation, le contrôleur et la logique métier.

Tutoriel JSF pour débutants

Dans le modèle Modèle Vue Contrôleur, le modèle contient la logique métier nécessaire pour accomplir le scénario métier, la vue représente la couche de présentation comme les pages JSP ou JSF et le contrôleur représente le processus de gestion du contrôle vers le modèle/vue en fonction de l’opération demandée. JSF fournit les composants suivants pour créer une interface utilisateur :

Éléments d’entrée de base standard tels que des champs, des boutons, etc. qui forment l’ensemble des composants d’interface utilisateur de base.
Capacité de rendu de JSF en fonction des spécifications du client
Bibliothèque de base
Extension des composants d’interface utilisateur disponibles pour ajouter plus de composants et les utiliser pour répondre aux exigences du client.

Tutoriel JSF pour débutants – Configuration de l’environnement

Ici, nous passerons en revue toutes les étapes nécessaires pour configurer votre ordinateur afin de créer votre première application JSF.

Installation de JDK

Téléchargez le JDK depuis le site web d’Oracle suivant https://www.oracle.com/technetwork/java/javase/downloads/index.html Définissez la variable d’environnement JAVA_HOME pointant vers le chemin d’accès bin du JDK installé. Par exemple « C:\Program Files\Java\jdk1.7.0_60 ». Ajoutez également JAVA_HOME\bin à la variable PATH afin de localiser les binaires Java. Vérifiez maintenant si Java est installé avec succès sur la machine en tapant javac dans la fenêtre de commande, ce qui devrait afficher toutes les options disponibles, ou « java -version » qui devrait montrer la version de Java installée sur la machine. Pour plus de détails, vous pouvez consulter l’article suivant: Comment installer Java sur Windows

Installation de l’IDE

Certains des IDE populaires disponibles incluent Eclipse, NetBeans et IntelliJ IDEA. Téléchargez Eclipse depuis le lien suivant https://www.eclipse.org/downloads/ et exécutez le fichier binaire téléchargé pour installer Eclipse sur votre machine. Pour NetBeans, téléchargez NetBeans IDE depuis https://netbeans.org/downloads/ et terminez l’installation.

Installation d’Apache Tomcat

Téléchargez Tomcat depuis le lien suivant https://tomcat.apache.org/. Exécutez le fichier binaire téléchargé et définissez la variable CATALINA_HOME pour pointer vers le chemin d’installation. Maintenant, démarrez le serveur et allez à https://localhost:8080 dans votre navigateur préféré, qui affiche la page Tomcat par défaut si elle est installée avec succès. Notre configuration de base est prête, passons à la création de notre première application JSF.

Tutoriel JSF pour les débutants – Application Bonjour tout le monde

Créons maintenant une simple application web JSF « Bonjour tout le monde ». Téléchargez les jars suivants qui sont essentiels pour exécuter du code lié à JSF. Ils peuvent être téléchargés depuis le dépôt central Maven https://search.maven.org/. Une manière plus claire de gérer les dépendances est d’utiliser un système de construction comme Maven. Pour tous nos exemples, nous utiliserons Maven. Veuillez vous référer au fichier pom.xml pour les dépendances. jsf-api-1.2.jar jsf-impl-2.2.8-04.jar pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.journaldev.jsf</groupId>
    <artifactId>JSF_HelloWorld</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>JSF_HelloWorld</name>

    <properties>
        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1.13</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.1.13</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>2.6</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

Tutoriel JSF pour les débutants – Créer un bean géré

A managed bean is a java class registered to JSF which makes interaction between the UI and the business logic possible. Create a managed bean named HelloWorld.java using @ManagedBean annotation as

package com.journaldev.jsf.helloworld;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
    
    private static final long serialVersionUID = -6913972022251814607L;
	
    private String s1 = "Hello World!!";

    public String getS1() {
        System.out.println(s1);
        return s1;
    }

    public void setS1(String s1) {
        this.s1 = s1;
    }
  
}

L’annotation @ManagedBean indique que la classe HelloWorld est un bean géré. Le bean @SessionScoped indique que le bean est actif jusqu’à ce que HttpSession soit valide. Ici, une chaîne s1 est déclarée et initialisée avec « Hello World » et les méthodes getter et setter sont définies pour récupérer la valeur de la chaîne s1. Nous pouvons également fournir le nom du bean tel que @ManagedBean(name="helloWorld"). Si aucun nom n’est fourni, il est dérivé selon les normes de dénomination Java. La meilleure pratique est de toujours fournir le nom du bean.

Tutoriel JSF pour débutants – Page de vue

Créez maintenant une page JSF nommée helloWorld.xhtml qui interagit avec le bean HelloWorld et récupère la valeur via la méthode getter et l’imprime dans la page de réponse. helloWorld.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
       #{helloWorld.s1}
<br /><br />

</h:body>
</html>

Ici, nous appelons le nom du bean suivi de la variable de chaîne déclarée dans le bean en tant que « helloWorld.s1 » qui récupère la valeur « Hello World ».

Configuration du descripteur de déploiement

La dernière étape consiste à configurer la classe de contrôleur JSF pour gérer les demandes client. Le servlet contrôleur JSF est FacesServlet, la configuration finale de web.xml est donnée ci-dessous. web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
            30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>

La structure finale du projet JSF Hello World ressemblera maintenant à ce qui suit dans Eclipse. Dans le web.xml, nous spécifions l’entrée du fichier de configuration faces ainsi que le mappage du servlet pour les faces, le délai d’expiration de session et le fichier de bienvenue qui se charge au démarrage de l’application. Une fois ces modifications effectuées, nous exécuterons l’application qui imprime la sortie suivante dans le navigateur. C’est tout pour le tutoriel JSF pour les débutants. Nous examinerons différents composants de page JSF dans les prochains articles. En attendant, vous pouvez télécharger le projet à partir du lien ci-dessous et jouer avec pour en apprendre davantage.

Télécharger le projet JSF Hello World

Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners