Guide pas à pas de l'utilisation de JBoss tools pour le développement JSF

Date de publication : 30/10/08 , Date de mise à jour : 30/10/08

Par Lotfi Mellouk
 

I. Introduction

I-A. Présentation de Jboss Tools

I-A-1. Installation de JBoss tools

I-A-1-a. Compatibilités système

• Java
• Système d'exploitation
• Plug-ins

I-A-1-b. Installation

Il est important de vérifier la compatibilité de la version de JBoss tools avec la version d'Eclipse.

II. Présentation des outils JBoss tools pour JSF

II-A. La perspective Web development

II-B. La palette Jboss tools

II-C. Editeur Graphique

Un éditeur pour pages JSF de type WYSIWYG est disponible pour aider au développement.

II-D. Vue du fichier de configuration de JSF

JBoss toos fournit un puissant éditeur du fichier de configuration faces-config.xml, il contient trois modes:

• Diagram Visialise le workflow de navigation
  
  
• Tree Contient tous les éléments du faces-config avec la possibilité de réaliser les opérations d'ajout/suppression/modification de chaque élément
  
  
• Source Le code source du faces-config.

II-E. Assistant du contenu du code source

II-F. Vérificateur et reporteur d'erreur

II-G. Autres éditeurs

• Editeur XML
• Editeur Graphique de Properties
• Editeur Graphique de TLD
• Editeur Graphique de fichier de description de l'application Web (web.xml)
• Editeur CSS
• Editeur JavaScript
• Visualiseur d'Image
• Editeur XSD

III. Guide de création d'un nouveau projet JSF

III-A. Création d'un nouveau projet

Click droit sur la vue Web project séléctionner Create New JSF project :

Ajouter le nom du projet, l'environnement JSF et le template. Nous allons choisir l'implémentation JSF 1.1 avec les librairies.


L'assistant nous propose le choix de la version de l'implémentation JSF : JSF 1.1 ou 1.2 ainsi que myfaces 1.1.4.

Déclaer la version de l'api des servlet et le serveur de déploiement:

III-B. Première page JSF

Création d'un nouveau fichier JSP:
On fait un click droit sur le dossier WebContent, New, File, et on choisi JSP file.

Choix de template:


L'assistant nous propose de définir le template de page, les templates proposées sont:
Blank: Une page JSP vide
JSFBasePage: Page JSF avec la saisie des librairies de tags à utiliser:
JSPRedirect: Une page de redirection.

En utilisant la palette: utiliser la palette Jbos Tools, on sélectionne JSF HTML dans la palette, et on click sur outputText

En utilisant l'éditeur: Il suffit de commencer d'écrire 'h:out' et l'éditeur propose la liste des composants qui matchent avec les premières lettres tapées.

Deployer l'application:

Pour déployer notre application,on l'ajoute dans les modules web dans la perspective J2EE/Server, ou on clique droit sur le projet et on fait Run on Server, le démarrage et l'arrêt du serveur peut se faire à l'aide de:

Le résultat:

III-C. Ajouter un managedBean

Ouvrir le fichier faces-context.xml qui se trouve dans : le dossier configuration

Aller dans l'onglet Tree, et click droit sur ManagedBeans et faire New ManagedBean

Saisir les paramètres du managedBean: L'assistant de création du managedBean nous propose de saisir le scope le classe et le nom du managedBean, on coche generate Source Code, la classe sera générée dans le package définis.

Ajouter des properties: Nous allons maintenant ajouter les properties du bean, en cliquant sur le bouton Add dans l'éditeur du mangedBean

Si on ne connait pas le package exact de la classe, utiliser l'assistant en cliquant sur CTRL-ESPACE

III-D. Ajouter une règle de navigation

Nous allons créer la navigation entre la page login.jsp et la index.jsp, passons maintenant sur l'onglet Diagram de l'éditeur du faces-config

Click droit dans l'éditeur, New View

On ajoute une page JSFBasedPage login.jsp

Dans le diagramme, on click sur l'icône create New connection

On lie index.jsp à login.jsp

Il est possible de modifier le cas navigation en double cliquant sur la connection

<h:form>
	<h:panelGrid columns="2" cellspacing="5" cellpadding="5">
		<h:outputText value="Login" />
		<h:inputText value="#{compte.login}" />
		<h:outputText value="Mot de passe" />
		<h:inputSecret value="#{compte.password}" />
	</h:panelGrid>
	<h:commandLink value="#{compte.connect}"></h:commandLink>
</h:form>
</f:view>

public String connect(){ 
 return "index"; 
 }

Ajouter un cas de navigation: Pour ajouter un autre cas de navigation, on ouvre l'éditeur de faces config et l'onglet Tree, il est possible de créer règle de navigation ou ajouter un cas de navigation à une règle existante.

III-E. Importer un projet existant

Si l'on souhaite utiliser Jboss tools avec un projet existant, un assistant d'import de projets est disponible dans la vue WebProject.
Cliquer droit dans la vue Web Project, ou utiliser le bouton import:

L'assistant nous demande l'endroit ou se situe le web.xml du projet à importer, ensuite, on saisit le nom du projet, les dossiers sources et le serveur de déploiement

III-F. Utilisation avec un projet déjà présent dans le workspace

Pour utiliser Jboss Tools avec un projet JSF qui existe déjà dans le workspace, il faut lui ajouter des capacités JSF: JSF capabilities, pour cela
Click droit sur le projet en question puis séléctionner Jboss tools/add JSF capabilities :
Ensuite nous donnons l'adresse du web.xml et les dossiers web/sources ainsi que le serveur de déploiement comme pour l'import de projet.

III-G. Créer un Converter

1. Editer le faces config et en passe dans l'onglet Tree
   
   
2. Sélectionner Converters et cliquer sur Add ou cliquer droit sur Converters et ensuite New/Converter with Id
   
   
3. Ciquer sur le lien Converter-Class pour créer la classe Si on clique sur Finish avant de créer la classe, une croix rouge apparait dans la déclaration du converter, on peut cliquer sur Converter-Class pour le créer
   On Crée la classe qui implémente l'interface javax.faces.convert.Converter
4. Ajouter le code de conversion On peut maintenant définir la logique métier de notre Converter

III-H. Créer un Validator

De la même manière on peut créer un validator personnalisé en utilisant l'assistant

IV. Customiser l'utilisation de JBoss Tools

IV-A. Créer son propre template de projet

1. Création du Template Dans l'explorateur de projet, click droit sur le projet et sélectionner JBoss Tools JSF et Save As Template…
2. Ajouter l'implémentation
   
   
3. Ajouter les préférences
   
   On choisit les dossiers et/ou librairies à ajouter dans le template.
4. Choix des Templates Velocity
   JBoss tools prend en charge les template Velocity, il n'est pas obligatoire d'ajouter un fichier pour velocity, le template sera crée en cliquant sur Finish.
   Pour en savoir plus sur Velocity, consultez le site Apache Velocity

IV-B. Ajouter une librairie de tag

1. Ajouter les tags Rcfaces ou le jar qui les contient dans le projet
2. Utiliser le bouton import dans la palette
   
   
3. Sélection du fichier TLD L'assistant de création de tag nous propose de sélectionner le fichier TLD
   
4. Choix des Tags L'assistant propose la liste des tags disponible, si la librairie n'est pas dans la liste, vérifier que le projet contient bien le fichier TLD, parfois, il est nécessaire de redémarrer Eclipse.
   
5. Ajouter un nouveau group de librairie On ajoute la librairie à un nouveau Group créer en cochant create New Group, en cliquant sur ok, on termine l'ajout de la nouvelle librairie.
   

IV-C. Créer son propre template de page

1. Sauvegarder la page en tant que Template Pour le faire, on doit se positionner dans la vue Web Project, on click droit sur la page en question et on séléctionne Save as Template
   
2. Définir le nom du template

1. Ouvrir les préférences Eclipse Windows/Preferences
2. Séléctionner JSF Page dans la rubrique JBoss tools
   
   
3. Séléctionner le fichier JSP Clicker sur Brows... pour séléctionner le fichier

IV-D. Support de Facelets

1. Capacités Facelets Nous pouvons ajouter Facelets à un projet JSF en ajoutant Facelets Capabilities, pour cela:
   Clicke droit sur le projet, JBoss Tools/add custom Capabilities...
   
   Ensuite on choisit Facelets
   
2. Assistant de création d'un projet web. L'assistant de création de projet dispose nativement d'un template pour un projet Facelets avec l'implémentation JSF
   
3. Assistant de création d'une page xhtml L'assistant de création d'une page xhtml dispose nativement d'un template de page Facelets
   
4. Outils de la Palette La palette JBoss Tools dispose de tous les composants Facelets
   
5. Assistant de code L'assistant de code propose aussi l'aide pour l'utilisation de l'attribut jsfc ainsi que les tags de Facelets, l'assitant devrait proposer tous les tags JSF à l'interieur de jsfc comme le proposait l'ancienne version avec Exadel Studio, ce bug est en cours de correction il sera corrigé dans les prochaines versions.
   
6. Editeur visuel L'editeur visuel prend en charge les Facelets et affiche la page en tenant compte des templates utilisés.