Introduction
 |
| Le Portail des Oiseaux |
Dans cet atelier nous allons aborder deux thèmes importants du Framework JSF qui sont la technologie des Facelets et celle de l'Internationalisation connu par I18n (entre le caractère 'I' et le caractère 'n' on trouve 18 caractères). Il faut savoir que JSF au niveau de la version 1 utilisait JSP comme technologie de présentation, il se trouve que JSP et JSF ont deux cycles de vie différents, c'est pourquoi on a pensé à produire une nouvelle technologie de présentation qui soit totalement compatible avec JSF, il s'agit bien de la technologie des Facelets et ce depuis la version 2.0. L'internationalisation quant à elle s'avère être très importante aussi surtout lorsque l'objectif d'une application web est de prévoir plusieurs langues différentes pour la clientèle. L'idée est de ne pas produire une page par langue, mais plutôt traiter la chose de manière intelligente, c'est-à-dire le même contenu mais avec des affichages de langues différentes et ce moyennant un seul clic on pourrait passer d'une langue d'affichage vers une autre.
Pour l'objet de cet atelier, nous allons considérer un portail de découverte d'Oiseaux. Nous commençons par réaliser la Template du site et après nous allons aborder l'internationalisation. Le site, traité totalement par JSF, va avoir l'architecture suivante :
 |
| Architecture du projet |
Template du site
La Template d'un site représente en général une sorte de page gabarit que toutes les autres pages du site vont hériter ou personnaliser. Nous allons considérer pour ce projet une Template qui va être constituée de deux zones uniquement, une zone 'main' et une zone 'navigation'. La Template se présente ainsi :
Template.xhtml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"><head>
<title>Le Joyeux Repertoire des Oiseaux</title>
<style type="text/css">
.box {
float: right;
width: 50%;
border: red dotted 1px;
padding: 5px
}
</style>
</head>
<body>
<h:form>
<h1>Le Royaume heureux des Oiseaux</h1>
<div class="box">
<ui:insert name="navigation"/>
</div>
<ui:insert name="main">
Bienvenue au joyeux royaume des oiseaux
</ui:insert>
</h:form>
</body>
</html>
Nous allons maintenant créer la page jsf "menu.xhtml" qui va contenir une sorte de liens vers les pages respectives de chaque oiseau. Cette page se présente comme suit :
Menu.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
Ceci et toute chose avant va être ignorée
<ui:composition>
<h3>Contenu du portail</h3>
<hr/>
<h:panelGrid columns="1">
<h:commandLink value="Home" action="index" />
<h:commandLink value="Perroquet" action="perroquet" />
<h:commandLink value="Aigle" action="aigle" />
<h:commandLink value="Corbeau" action="corbeau" />
</h:panelGrid>
</ui:composition>
Ceci et toute chose après va être ignorée
</body>
</html>
Maintenant nous créons la page "index.xhtml" qui va être définie sur la base de la page "template.xhtml" puisque cette dernière constitue la template du site. La page "index.xhtml" va être définie comme suit :
Index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
Ceci et toute chose avant va être ignorée
<ui:composition template="template.xhtml">
<ui:define name="navigation">
<ui:include src="menu.xhtml"/>
</ui:define>
</ui:composition>
Ceci et toute chose après va être ignorée
</body>
Comme on le remarque ci dessus, la page 'index' moyennant la balise <ui:composition> va définir sa template qui est fournie au niveau de son attribut 'template'. Puisque la template "template.xhtml" possède deux zones, alors la page 'index' pourra redéfinir l'une ou les deux zones en même temps ou bien les utiliser telles qu'elles sont définies dans la page 'template'. Dans notre cas, la page 'index' a redéfini la zone 'navigation' en utilisant la balise <ui:define> et à l'intérieur de cette balise, elle a fait appel à la balise <ui:include> pour intégrer la page "menu.xhtml" définie en haut.
Dans ce qui suit, nous allons procéder à la création de trois pages 'jsf' reliées respectivement aux trois oiseaux 'perroquet, 'aigle' et 'corbeau' qui apparaissent sur la page "menu.xhtml".
Perroquet.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="template.xhtml">
<ui:define name="navigation">
<ui:include src="menu.xhtml"/>
</ui:define>
<ui:define name="main">
<h1>Le perroquet</h1>
<p>Les perroquets sont des oiseaux ; il en existe 350 espèces différentes, connues sous des noms variés, tels que ara, perruche, cacatoès... Ce sont des oiseaux souvent très colorés. Ils ont un gros bec crochu, qui leur sert à manger des graines, des fruits, et des noix. Certains perroquets sont également capables d'imiter la voix humaine, et de répéter des mots, ou des sons. Certains, comme le gris du Gabon, parlent même très bien. Les perroquets ont la langue noire. Ils ont deux pattes qui sont terminées par des griffes.
Les perroquets vivent dans les régions tropicales, principalement en Amérique, Afrique et Océanie.
</p>
<h:graphicImage height="100" width="100" library="default" name="images/perroquet.jpg"/>
</ui:define>
</ui:composition>
</body>
</html>
Nous remarquons que la page "perroquet.xhtml" est définie sur la base de la template "template.xhtml", et donc ici elle redéfinit la zone 'navigation' comme ça l'a était fait au niveau de la page 'index' et en plus elle redéfinit la zone 'main' à sa guise où elle va être constituée d'un paragraphe et d'une image moyennant la balise <h:graphicImage>, cette dernière consiste à charger l'image du perroquet depuis le sous dossier 'images' du dossier 'resources' (voir Architecture du projet ci haut). L'exécution de la page "index.xhtml" donnera la vue suivante :
 |
| La page index.xhtml |
La page "index.xhtml" étant chargée, on va pouvoir appuyer sur le lien
'perroquet' pour pouvoir charger la page "perroquet.xhtml" comme suit :
 |
| La page perroquet.xhtml |
Maintenant que la page 'perroquet' est crée, nous allons de la même façon créer les deux pages "aigle.xhtml" et "corbeau.xhtml" comme suit :
Aigle.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="template.xhtml">
<ui:define name="navigation">
<ui:include src="menu.xhtml"/>
</ui:define>
<ui:define name="main">
<h1>L'Aigle</h1>
<p>L'aigle est le nom de plusieurs espèces d'oiseaux rapaces. Les "vrais" aigles sont les oiseaux qui font partie du genre Aquila. Mais plusieurs de leurs cousins, appartenant à d'autres genres, sont également appelés "aigles" en français. Une des espèces les plus connues est l'aigle royal. Les aigles mangent des petits animaux comme des lapins, des marmottes. Parfois aussi des animaux morts, pouvant être laissés par d’autres prédateurs. Ils sont donc carnivores.
</p>
<h:graphicImage height="100" width="100" library="default" name="images/aigle.jpg"/>
</ui:define>
</ui:composition>
</body>
</html>
Lorsqu'on lance la page 'index' et après on sélectionne dans le menu le lien 'Aigle' la page suivante va s'afficher :
 |
| La page aigle.xhtml |
Corbeau.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="template.xhtml">
<ui:define name="navigation">
<ui:include src="menu.xhtml"/>
</ui:define>
<ui:define name="main">
<h1>Le Corbeau</h1>
<p>
Le corbeau est un oiseau réputé pour sa grande longévité (qui pourrait dépasser trente ans), son intelligence et son organisation sociale qui semblent très supérieures à la moyenne des oiseaux. Il n'a quasiment jamais été chassé, sauf dans les périodes de grande famine, sa chair étant considérée comme immangeable, sauf après une très longue cuisson.
</p>
<h:graphicImage height="100" width="100" library="default" name="images/corbeau.jpg"/>
</ui:define>
</ui:composition>
</body>
</html>
Lorsqu'on exécute la page "corbeau.xhtml" nous allons ainsi pouvoir afficher le rendu suivant :
 |
| La page corbeau.xhtml |
Internationalisation (I18n)
La partie Internationalisation appelée aussi I18n (il y a 18 caractères entre la première lettre I du nom et la dernière lettre n), consiste à produire le contenu du site en plusieurs langues. Toutes les parties et rubriques du site restent identiques, la seule chose qui change étant la langue. Bien sûr, on n'est pas censé reproduire un contenu par langues, le travail doit être fait de manière intelligente. Le framework JSF présente une démarche très pertinente pour adopter l'internationalisation dans son projet que nous allons expliciter ci dessous.
Démarche I18n sous JSF
Pour commencer, nous allons créer un fichier propriétés par langue avec la seule contrainte que les noms de ces fichiers disposent d'une même base. Par exemple, supposons que nous voulons produire pour deux langues "arabe" et "français", alors dans ce cas nous allons créer deux fichiers de propriétés ayant respectivement les noms "messages_ar.properties" et "messages_fr.properties". Comme on le voit, les deux noms de fichiers se partagent la même base qui est dans ce cas "massages".
Création des fichiers de propriété sous NetBeans
Sous NetBeans, nous allons appuyer avec le bouton droit sur le nom du projet et nous allons "New > Other" comme ci dessous : |
| Création Fichier de propriétés, step 1 |
Nous allons après choisir la catégorie "Other" et le type de fichier "Properties File" comme ci dessous :
 |
| Création Fichier de propriétés, step 2 |
Après nous allons donner un nom au fichier, par exemple "message_ar" pour notre cas pour la langue 'arabe', nous sélectionnons le dossier où on va ranger le fichier et nous validons en appuyant sur le bouton 'Finish' :
 |
| Création Fichier de propriétés, step 3 |
Une fois le fichier de propriétés 'message_ar.properties' crée, nous allons l'alimenter comme suit une fois ouvert :
 |
| Création Fichier de propriétés, step 4 |
Comme on le voit, il est tout d'abord important de connaître les parties sujettes à l'internationalisation, c'est-à-dire là où on va basculer d'une langue à l'autre. Par exemple pour notre cas, nous avons décidé de travailler sur quatre parties : bienvenue, title, animal et description. Ce sont ces quatre parties qui vont être communes à toutes les pages qui vont voir leurs rubriques changer de langue, elles vont être considérées comme des variables d'un programme qui vont changer de contenu au niveau de l'exécution de l'application.
Nous allons répéter le même processus pour tous les fichiers de propriétés à considérer, dans notre cas on a choisi de travailler uniquement sur deux langues 'arabe' et 'français', donc nous créons le fichier de propriétés 'message_fr.properties' qui va avoir le contenu suivant :
 |
| Création Fichier de propriétés, step 5 |
Création du fichier de configuration
Nous allons maintenant procéder à la création du fichier de configuration où on va créer la variable d'environnement qui va jouer le rôle d'adaptateur de la langue choisie. Pour ce faire, nous allons suivre les étapes suivantes :
- Tout d'abord, on clique bouton droit sur le nom du projet et on choisit 'New > Other'
- Ensuite, nous allons sélectionner la catégorie 'JavaServer Faces' puis on choisit au niveau de la rubrique 'File Types' le type 'JSF Faces Configuration' comme ci dessous :
 |
| Création Fichier de Configuration, step 1 |
On garde le même nom proposé et on valide. Après on ouvre le fichier de configuration qu'on vient de créer et on le modifie comme suit :
 |
| Création Fichier de Configuration, step 2 |
Sur le fichier de configuration, nous créons la 'resource-bundle' qui va définir deux propriétés à savoir la 'base-name' et le 'var'. La 'base-name' définit le nom de base que nous avons introduit ci-haut, c'est la partie commune de tous les noms des fichiers de propriétés associés aux différentes langues. Le 'var' définit la variable 'msgs' qui va pointer vers les quatre descripteurs des fichiers de propriétés définis ci-haut à savoir : bienvenue, title, animal et description.
Préparation des pages JSF
Maintenant nous allons modifier les pages de notre projet pour qu'elles puissent intégrer l'internationalisation. Pour notre cas, nous allons uniquement préparer les deux pages 'template' et 'perroquet' de cette manière :
La page 'perroquet.xhtml'
 |
| La page perroquet.xhtml modifiée |
La page 'template.xhtml'
 |
| La page template.xhtml modifiée |
Comme on le remarque ci dessus, au lieu d'écrire directement le texte au niveau de la page, on a fait référence au lieu de ça à la variable 'msgs' définie auparavant dans le fichier de configuration qui va appeler la rubrique désignée en l'occurrence soit 'bienvenue', 'title', 'animal' ou 'description' sachant que ces quatre descripteurs ont été définis au niveau de tous les fichiers de propriétés de langues. Maintenant pour savoir quelle langue afficher, nous allons le faire moyennant la balise <f:view locale="ar"> qui dans ce cas va appeler le fichier de propriétés 'message_ar.properties' pour avoir ainsi l'affichage suivant :
 |
| I18n en action |
Maintenant que nous avons réussi le processus d'internationalisation I18n en passant par l'injection de la balise <f:view locale="">. Toutefois, cette procédure reste manuelle et chaque que l'on veuille changer de langue, on doit le faire à la main chose qui n'est pas pratique. Pour remédier à ce problème, j'attire votre attention sur le fait que JSF adopte le langage d'expression EL alors dans ce cas, l'astuce consiste à placer dans la balise <f:view> au niveau de son paramètre 'locale' non pas le suffixe de langue exemple 'ar' ou 'fr' mais plutôt une expression EL telle que par exemple <f:view locale="#{bean.methode()}"> où 'bean' va être une JavaBean à créer qui contiendra une méthode 'methode' qui va retourner les suffixes de langues 'ar' ou 'fr' ou 'en' et ce bien sûr lorsque l'utilisateur va cliquer sur le bouton de langue désirée.
A bientôt pour un nouveau billet....
Commentaires
Enregistrer un commentaire