Créer une application JSF dans Eclipse (JSF 2.2)
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Réalisation
- 3.1- Créez un projet JSF avec Eclipse
- 3.2- Créer un template de Facelet par défaut avec Eclipse
- 3.3- Créez les templates d'en-tête et de pied de page
- 3.4- Créez la page login.xhtml
- 3.5- Configurez(créez) le Bean
- 3.6- Créez la page Accueil.xhtml
- 3.6.1- Sommaire du cours JSF
Créer une application JSF dans Eclipse (JSF 2.2)
-
Objectifs
- Etre capable de créer et exécuter une application Web JSF en utilisant les fonctionnalités graphiques fournies par JSF
-
Présentation
- Le projet Outils JSF fournit des outils qui simplifient la création d’applications Web JSF 2.2.Il s’agit notamment d’un éditeur de source HTML amélioré qui fournit une assistance au contenu et une validation des balises JSF.
- Dans ce tutoriel, nous allons créer et exécuter une application Web JSF 2.2.
-
Réalisation
-
Créez un projet JSF avec Eclipse
- Ouvrez Eclipse >> Choisissez l’espace de travail >> Cliquez sur OK
- Dans l’espace de travail Eclipse >> Cliquez sur Fichier >> Sélectionner un
projet Web dynamique - Entrez un nom de projet >> Choisissez la dernière version dans la version du module Web dynamique >> Cliquez sur Suivant
- pour avoir accès à ce type de projet, vous devez lire le tutoriel suivant:Ajouter un dynamic web project à eclipse.
- Saisissez le nom de projet : GestionCentreJSF dans la boite de dialogue qui vient de s’ouvrir
- Ensuite, il faut indiquer à Eclipse que votre projet va utiliser l’outillage JSF.
- Sous Configuration, sélectionnez JavaServer Faces v2.2.
- Une Facet Eclipse est un ensemble de plugins à activer dans votre projet. Bien entendu la Facet à activer se nomme "JavaServer Faces".
- Fermez les boîtes de dialogues en confirmant les changements. Normalement, le projet est crée. Si vous ouvrez l’arborescence du projet, vous devriez y retrouver les éléments suivants:
-
Créer un template de Facelet par défaut avec Eclipse
- Pour préparer facilement nos vues JSF, il nous suffit donc de créer un nouveau type de fichier nommé "
Facelet" et de personnaliser son contenu par défaut.On parle alors d’un template qui sert d’un document de base pour tous nouveau document. - Pour ce faire, rendez-vous dans les préférences d’Eclipse, puis suivez Web >> HTML Files >> Editor >> Templates et cliquez enfin sur New
- Entrez alors comme nom "Template Facelet", puis sélectionnez le contexte "New HTML", entrez comme description "Créer un nouveau page template Facelet ", puis écrivez le code suivant dans le champ pattern et validez enfin en cliquant sur OK
-
Créez les templates d’en-tête et de pied de page
- Créez un dossier "templates" sous le dossier
WEB-INF - Créez les modèles d’en-tête et de pied de page sous le dossier templates à l’aide de l’Assistant Nouveau HTML, comme décrit ci-dessus.
- Dans la page Sélectionnez un modèle de l’assistant, choisissez les fichiers de modèle correspondants, Nouvel en-tête de facette et Nouveau pied de page de facette.
-
Créez la page login.xhtml
- Une fois les tâches précédentes ont été achevées (création des templates), vous pourrez simplement créer une nouvelle Facelet prête à être codée !
- Cliquez avec le bouton droit dans le projet, puis sur New >> HTML File.
- Donner le nom "login.xhtml" à votre fichier et de cliquer sur New dans la fenêtre qui s’affiche.
- Choisissez le template récemment créé dans la liste qui s’affiche et de valider en cliquant sur Finish, comme indiqué à la figure suivante:
-
Configurez(créez) le Bean
- Dans l’Explorateur de projets, développez le nœud, GestionCentreJSF >> WebContent.
- Double-cliquez sur faces-config.xml. Cela lancera l’éditeur de configuration des visages.
- Sélectionnez l’onglet ManagedBean.
- Cliquez sur le bouton Ajouter:Cela lancera l’assistant New Managed Bean.
- Sélectionnez l’option créer une nouvelle classe Java. Dans le panneau suivant de l’assistant, entrez le package as, com.Bean et le nom de la classe en tant que LoginBean.
- Cliquez sur le bouton Terminer.
- Cela créera la classe Java et l’enregistrera en tant que bean géré. Enregistrez l’éditeur de configuration des visages. Pour modifier la classe Java, cliquez sur l’hyperlien, classe ManagedBean dans la page du Bean géré, comme illustré dans la figure ci-dessous. Cela lancera l’éditeur Java.
- Modifiez la classe Java, com.Bean.LoginBean.
- Ajoutez le code suivant et enregistrez.
-
Créez la page Accueil.xhtml
- Répétez la même démarche quand à vue précédemment dans la création de la page Login.xhtml
- Modifiez son contenu de la manière suivant:
Pour ajouter les paramètres JSF à un projet Web dynamique existant, cliquez avec le bouton droit sur votre projet, sélectionnez Propriétés du projet Facettes de projet et ajoutez ensuite la facette JSF à votre projet.
package com.bean;
public class LoginBean {
private String name;
private String password;
public String getName ()
{
return name;
}
public void setName (final String name)
{
this.name = name;
}
public String getPassword ()
{
return password;
}
public void setPassword (final String password)
{
this.password = password;
}
}
<!DOCTYPE html>
<html lang="fr"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Accueil</title>
</h:head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/template/header.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/WEB-INF/template/footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
