Développez en JSF2 sur JBoss 7 AS avec Eclipse - Partie 4
>> 27 August 2012
Un Projet JSF2 complet, avec l'interface visuelle de JBoss Tools
Dans les précédents articles, nous avons vu, comment installer JBoss AS, et le configurer pour la création d'un projet JSF2, sous Eclipse. Dans cette partie nous allons ajouter des composants pour arriver à un projet complet (très simple), de JSF2 (Java Server Faces 2), composé de fichiers .xhtml et d'une classe bean.Note :
Après une installation d'Eclipse JUNO et une mise à jour du JBoss Tools pour cette version d'Eclipse, les exemples semblent marcher sans aucun problème.
Projet JSF2
Un projet JSF2 peut être composé simplement de fichiers .xhtml pour la vue et des classes .java (beans), pour les données et le logique métier (model). L'ensemble de fonctions et navigations est assurés par l'implantation de JSF2. Il est à noter l'existence d’autres parties, comme les Converters, Validators, et autres, formant une framework très complète.JBoss Tools, l'interface graphique
JBoss Tools dispose de beaucoup de fonctions pour assister le développeur. Nous verrons uniquement les plus basiques dans cet article.JBoss Tools est doté par exemple d'une palette graphique permettant d'ajouter des composants JSF2 standards (et autres) à une page .xhtml, par un simple clic.
Il est aussi possible d'utiliser JBoss Tools pour une édition assistée des autres parties d'une application JSF2, comme les Managed Beans, Converters, Validators, etc.
La navigation entre pages .xhtml est assurée par une interface graphique aussi.
Etc. Etc.
Continuons le projet
Changeons d'abord de perspective (si ce n'est pas déjà fait) Window > Open Perspective > Web Development.Note :
Commencez par ajouter une balise
Ajoutez un composant
JBoss Tools est doté d'une palette graphique riche contenant des composants JSF2 standards (et d'autres), groupés par catégories. Il suffit pour ajouter un composant de cliquer sur la palette, entrer les options d'un composant (nom, id,..). Quand vous cliquez sur le bouton Finish, pour terminer, le composant est ajouté dans la page .xhtml ouverte dans l'éditeur quand l'onglet Visual/Source est sélectionné. Les autres onglets permettent de voir le source ou d'avoir un aperçu de la page Web.Un clic sur la palette catégorie JSF HTML > sélectionnez outputText > dans le champ value > entrez un message, par exemple "Entrez votre nom". Avant de quitter la boîte de dialogue > un clic sur le champ style, ouvre un dialogue pour le style CSS > Quand vous terminez le style > OK
Note :
Un composant
Un clic sur Finish pour ajouter le composant dans la page.
A tout moment on peut utiliser la barre graphique.
Ajoutez une classe bean.
JBoss Tools est doté d'un assistant permettant d'ajouter, éditer, et modifier les classes Java utilisées comme beans. Il permet aussi, d'ajouter, éditer et modifier leurs propriétés.Pour ajouter une classe bean, sélectionnez l'onglet Tree > Managed Beans dans l'interface d'édition de JBoss Tool (si l'interface n'est pas visible, double cliquez sur faces-config.xml dans Project Explorer)
Scope (1) est la portée de la class, comme request, session, etc.
Le lien Class(2) permet de lancer un dialogue pour ajouter une nouvelle classe Java Name(3) est le nom donnée au bean (pas le nom de la classe)
Note :
Un clic sur Finish ou Next après avoir entrer le nom de bean et de la classe , la case Generate Source Code étant cochée, permet de générer sans ouvrir la boîte pour personnaliser la classe.
Un dialogue est ouvert pour personnaliser la classe
Un clic sur Finish ajoute la classe dans la partie Managed Beans
La classe est créée et ajoutée à l'interface, sous la rubrique ManagedBean
Un clic sur Add, sous Properties, ouvre une boîte pour entrer une propriété de bean
Note :
Le lien Property Class(2) ouvre un wizard pour créer une classe. Dans le cas présent la propriété, est une simple String, donc on l'entre simplement dans le champ (java.lang.String)
Property Name(1) est le nom de la propriété
ValueKind(3), est la nature de valeur à utiliser.
Value(4) est utilisée, si vous voulez donner une valeur par défaut.
Note :
Au lieu de String, entrez the fully qualified class name (le nom de classe avec le chemin) : java.lang.String. Sinon au moment de l'exécution vous aurez une erreur
Ajoutez un composant pour la saisie
Un clic sur inputText dans la palette sous JSF HTML dans la boîte qui s'ouvre. Un clic sur les trois point du champ value ouvre une autre boîte > sélectionnez nom (le nom d'une propriété dans la class bean) > un clic sur OK. Cette opération va à la fois ajouter le composant et l'attacher à la propriété de ManagedBean. Vous éviterez ainsi de sélectionner une propriété qui n'existe pas dans la classe.
Sélectionnez le nom d'une propriété de la classe bean
Le nom de la propriété est associé au champ. Un clic sur Finish
A tout moment les propriétés d'un composant sont affichées dans Properties. Plus besoin de mémoriser les propriétés d'un composant.
Ajoutons une méthode à la classe Personne
Cette méthode (expression method) va être appelée par une action dans une page .xhtml (un bouton par exemple). La valeur retournée par cette méthode va orienter la navigation, vers une vue, ou page .xhtml précise.
Personne.java
package com.java_javafx.ka;
public class Personne {
private String nom;
public Personne() {
}
public String getNom() {
return nom;
}
public void setNom(String nom) {
this.nom = nom;
}
public String result() {
if(nom==null ||nom.equals(""))
return "false";
return "true";
}
}
Ajoutons une méthode à la classe Personne
Cette méthode (expression method) va être appelée par une action dans une page .xhtml (un bouton par exemple). La valeur retournée par cette méthode va orienter la navigation, vers une vue, ou page .xhtml précise.Personne.java
package com.java_javafx.ka;
public class Personne {
private String nom;
public Personne() {
}
public String getNom() {
return nom;
}
public void setNom(String nom) {
this.nom = nom;
}
public String result() {
if(nom==null ||nom.equals(""))
return "false";
return "true";
}
}
Un bouton (h:commandButton) pour lancer l'action
A partir de la palette de composants, un clic sur commandButton. Dans le champ action, un clic sur le trois points, sélectionnez la méthode qu'on vient d'ajouter > OK. Changer le champ value (titre du bouton) > entrez par exemple Validez > Finish
Encore deux fichiers pour les navigations
De la même manière qu’index.xhtml, on ajoute deux autres fichiers succes.xhtml et echec.xhtml. Si le nom entré dans le champ texte d'index.xhtml est valide on dirige l'utilisateur via un système de navigation vers succes.html, sinon vers echec.xhtml. Les vérifications sont faites dans la méthode result(), ajoutée précédemment.
Note :
La validation au niveau de la méthode d'action est vraiment rudimentaire. JBoss Tools dispose d'outils très puissants pour développer des validateurs.
succes.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Un bouton (h:commandButton) pour lancer l'action
A partir de la palette de composants, un clic sur commandButton. Dans le champ action, un clic sur le trois points, sélectionnez la méthode qu'on vient d'ajouter > OK. Changer le champ value (titre du bouton) > entrez par exemple Validez > Finish
Encore deux fichiers pour les navigations
De la même manière qu’index.xhtml, on ajoute deux autres fichiers succes.xhtml et echec.xhtml. Si le nom entré dans le champ texte d'index.xhtml est valide on dirige l'utilisateur via un système de navigation vers succes.html, sinon vers echec.xhtml. Les vérifications sont faites dans la méthode result(), ajoutée précédemment.
Note :
La validation au niveau de la méthode d'action est vraiment rudimentaire. JBoss Tools dispose d'outils très puissants pour développer des validateurs.
succes.xhtml
Encore deux fichiers pour les navigations
De la même manière qu’index.xhtml, on ajoute deux autres fichiers succes.xhtml et echec.xhtml. Si le nom entré dans le champ texte d'index.xhtml est valide on dirige l'utilisateur via un système de navigation vers succes.html, sinon vers echec.xhtml. Les vérifications sont faites dans la méthode result(), ajoutée précédemment.Note :
La validation au niveau de la méthode d'action est vraiment rudimentaire. JBoss Tools dispose d'outils très puissants pour développer des validateurs.
succes.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head></h:head>
<body>
<h:form>
<h:outputText value="#{personne.nom}">
</h:outputText>
</h:form>
</body>
</html>
echec.xhtml
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head></h:head>
<body>
<h:form>
<h:outputText value="Le nom entré n'est pas valide">
</h:outputText>
</h:form>
</body>
</html>
Création de règles de navigation
Au lieu d'entrer des règles de navigation à la main, JBoss Tools a une interface graphique permettant d'effectuer cette tâche d'une manière visuelle et intuitive.Double cliquez sur faces-config.xml (si l'interface n'est pas visible) > sélectionnez l'onglet Diagram. Normalement le fichier index.xhtml est affiché (une icône sur la surface de navigation), sinon un clic sur l’icône View Template (ou un clic droit sur l'espace graphique > New View)
Entrez le nom d'un fichier avec l'extension .xhtml dans From View Id, laissez les autres options par défaut. Nous faisons de même pour les deux autres fichiers (succes.xhtml et echec.xhtml). Si un fichier existe déjà sur le surface graphique, comme index.xhtml, dans l'exemple, un message d'erreur est affiché.
Un clic d'abord sur l'icône Create New Connection. Un clic par la suite sur l'icône index.xhtml > on tire la ligne de connexion, quand on arrive sur succes.xhml, on clique, pour terminer le lien.
Note :
Comme tout dans l'informatique, il est toujours possible de faire une seule et unique chose par différentes méthodes. Ici par exemple, il est aussi possible de créer les fichiers d'abord sur le Diagram. Il y a une case Crate File on Disk. De cette manière vous pouvez créer des fichiers .xhtml sans passer par File > New etc.
Fixez les conditions de navigation :
La condition utilisée, et affichée pour chaque lien sur le Diagram, indique le sens de navigation entre deux fichiers (ou vues). Pour modifier cette condition > double cliquez sur la chaîne de caractères sur une ligne (ou lien de navigation).Une simple condition est testée dans la méthode "result", permettant de retourner "true" ou "false" et orienter la direction vers echec.xhtml ou succes.xhtml selon la valeur retournée.
Lancez le projet
Clic droit sur le projet > Run As > Run on Server > JBoss 7.1 Runtime Server > FinishDans un navigateur (Firefox) Tapez l'url suivant :
http://localhost:8080/test_jsf/index.jsf
La page index.xhtml est affichée
Si on laisse vide le champs de texte et on clique ensuite sur le bouton "Validez", un message d'erreur est affiché (echec.xhmtl), car le nom est invalid. Par contre enter n'importe quel texte, nous envoie vers succes.xhtml, pour l'afficher.Note :
test_jsf est le nom que j'ai donné à mon projet, veuillez modifier selon votre propre projet JSF2
Read more...
