Samedi 27 mars 2010
6
27
/03
/Mars
/2010
15:25
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 :
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
