JSF : un code plus clair avec les Facelets
Il existe déjà des milliers d'articles sur Facelets, la façon dont le framework est fait, etc..
Je ne vais donc en aborder qu'une fraction, celle qui est directement visible : la taglib ui.
J'avais déjà parlé d'un de ces tags dans un précédent article, je vais aller un peu plus loin ici.
En général, dans la partie Java d'une application web, les developpeurs découpent leur code en plusieurs classes (cohésion), mais, parallèlement vont faire tenir toute leur page dans un seul fichier html (ou xhtml, ou jsp etc..).
Voila ce qu'on tient à éviter :
Mettons que vous ayez sur la même page une datatable avec un certain nombre de colonnes, un formulaire pour ajouter une ligne dans cette table et un graphique pour afficher les valeurs de cette table. Ajoutez quelques contrôles pour modifier/supprimer les lignes, et que les valeurs de certaines listes du formulaire se réduisent en fonction d'autres valeurs.
Vous vous retrouvez avec une page bien fournie, d'au moins 500 lignes, et potentiellement très compliquée à lire d'une traite.
C'est la qu'intervient la magie Facelets : vous pouvez découper votre fichier en plein de petits bouts qui seront beaucoup plus facile à lire et maintenir, la page sera recomposée à la génération.
L'idée ici est de faire une page principale qui sera celle visible par l'utilisateur (mettons : mapage.xhtml) et d'y inclure des bouts venants d'autres pages (exemple : mapage_datatable.xhtml, mapage_graphique.xhtml etc..).
mapage_datatable.xhtml :
Dans mapage.xhtml, vous pourrez simplement inclure la datatable en faisant :
L'utilisation d'un template avec facelets est beaucoup plus appliquée dans les projets que le découpage, le (bon) développeur ayant l'instinct d'éviter de copier/coller du code.
En général, vous voudrez mettre dans votre template vos css, scripts, le header, le menu et le footer, et placer dans la div générale le code suivant :
Pour déclarer l'utilisation du template, il faut deux lignes :
<ui:define> va copier ce qui se trouve dans le tag à l'intérieur du tag <ui:insert> du template, dont le chemin est indiqué dans le tag <ui:composition>
En fait, le principe du template, est un petit peu l'inverse de l'inclusion :
Donc maintenant, vous savez : pour un code JSF propre, pensez Facelets !
tags : Java EE, JSF
Je ne vais donc en aborder qu'une fraction, celle qui est directement visible : la taglib ui.
J'avais déjà parlé d'un de ces tags dans un précédent article, je vais aller un peu plus loin ici.
En général, dans la partie Java d'une application web, les developpeurs découpent leur code en plusieurs classes (cohésion), mais, parallèlement vont faire tenir toute leur page dans un seul fichier html (ou xhtml, ou jsp etc..).
Voila ce qu'on tient à éviter :
Bad Code from unclebob on Vimeo.
Mettons que vous ayez sur la même page une datatable avec un certain nombre de colonnes, un formulaire pour ajouter une ligne dans cette table et un graphique pour afficher les valeurs de cette table. Ajoutez quelques contrôles pour modifier/supprimer les lignes, et que les valeurs de certaines listes du formulaire se réduisent en fonction d'autres valeurs.
Vous vous retrouvez avec une page bien fournie, d'au moins 500 lignes, et potentiellement très compliquée à lire d'une traite.
C'est la qu'intervient la magie Facelets : vous pouvez découper votre fichier en plein de petits bouts qui seront beaucoup plus facile à lire et maintenir, la page sera recomposée à la génération.
Découper son fichier avec <ui:component> et <ui:include>
L'idée ici est de faire une page principale qui sera celle visible par l'utilisateur (mettons : mapage.xhtml) et d'y inclure des bouts venants d'autres pages (exemple : mapage_datatable.xhtml, mapage_graphique.xhtml etc..).
mapage_datatable.xhtml :
<?xml version="1.0" encoding="ISO-8859-1"?> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:component name="mapage_datatable"> <!-- code de la datatable --> </ui:component> </ui:composition>
Dans mapage.xhtml, vous pourrez simplement inclure la datatable en faisant :
<ui:include src="chemin/vers/mapage_datatable.xhtml" />
Utiliser un template avec <ui:define> et <ui:insert>
L'utilisation d'un template avec facelets est beaucoup plus appliquée dans les projets que le découpage, le (bon) développeur ayant l'instinct d'éviter de copier/coller du code.
En général, vous voudrez mettre dans votre template vos css, scripts, le header, le menu et le footer, et placer dans la div générale le code suivant :
<ui:insert name="body"> <!-- code par défaut --> </ui:insert>Si l'utilisateur pointe sur la page template, il verra le code par défaut.
Pour déclarer l'utilisation du template, il faut deux lignes :
<?xml version="1.0" encoding="ISO-8859-1"?> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" template="chemin/vers/template.xhtml"> <ui:define name="body"> <!-- code de la page --> </ui:define> </ui:component>
<ui:define> va copier ce qui se trouve dans le tag à l'intérieur du tag <ui:insert> du template, dont le chemin est indiqué dans le tag <ui:composition>
En fait, le principe du template, est un petit peu l'inverse de l'inclusion :
- L'inclusion colle des éléments dans la page qu'on visualise
- Le templatage colle un template autour de la page qu'on visualise
Donc maintenant, vous savez : pour un code JSF propre, pensez Facelets !
tags : Java EE, JSF