Page Home (contact) Retour TPs
Suite du premier TP sur JSF. Vous allez utiliser la bibliothèque de composants JSF Primefaces et modifier le code généré par NetBeans.
Remarque générale pour la suite : si ça ne marche pas comme vous l'espérez, n'oubliez de regarder les logs de GlassFish (en bas, sous "Output"). Avant chaque exécution, vous pouvez effacer les précédents affichages par clic droit sur la fenêtre des logs et Clear (ou par Ctrl L).
Autre remarque : les choses commencent à se compliquer et parfois GlassFish se perd un peu. Si vous voyez des erreurs étranges du genre
"Avertissement: java.lang.Exception: WEB0113: Virtual server [server] already has a web module [Employes] loaded at [/Employes]; therefore web module [Employes] cannot be loaded at this context path on this virtual server. "
vous pouvez arrêter GlassFish et le redémarrer. Ca suffit souvent à remettre les choses en ordre.
Vous allez utiliser PrimeFaces une bibliothèque de composants JSF. Il existe d'autres bibliothèques de composants JSF telles que RichFaces ou OpenFaces.
Une documentation de PrimeFaces (enregistrez le PDF sur votre ordinateur car il vous sera utile pendant ce TP).
Faites une copie de List.xhtml du répertoire employe, sous le nom List2.xhtml. Vous allez modifiez cette copie. Ensuite, vous allez faire utiliser List2.xhtml par l'application plutôt que List.xhtml.
Modifiez List2.xhtml pour utiliser une table PrimeFaces à la place de la table standard.
Pour cela il faut commencer par remplacer h:dataTable par p:dataTable et h:column par p:column. Ajoutez l'espace de noms de la bibliothèque au début du fichier (NetBeans va vous le proposer) : xmlns:p="http://primefaces.org/ui". Vous allez avoir des avertissements car des attributs de h:dataTable ne sont pas reconnus par p:dataTable ; enlevez ces attributs border, cellpadding, cellspacing, rowClasses et rules qui ne servent plus à rien. Lancez l'application et faites afficher List2.xhtml (en tapant directement l'URL). La présentation devrait être différente. Vous retomberez sur la présentation de h:datatable si vous voulez avoir les employés suivants car l'application navigue alors vers la page List.xhtml (malgré l'URL qui indique toujours List2.xhtml mais vous avez eu l'explication dans le premier exercice de ce TP).
Vous allez ne plus utiliser la pagination codée par NetBeans, qui complique la compréhension du code :
EmployeController une méthode findAll() qui renvoie tous les employés de la base. Attention, comme cette méthode peut être appelée plusieurs fois durant l'affichage de la table, il faut garder la liste des employés dans une variable d'instance employes et ne relancer la requête dans la base de données que si cette variable est null. Voici un exemple d'une telle méthode. Remplacez ensuite <p:dataTable value="#{employeController.items} par <p:dataTable value="#{employeController.findAll()}". Testez. Vous devriez voir tous les employés dès la première page affichée.List2.xhtml).Maintenant vous allez améliorer cette table grâce aux possibilités offertes par Primefaces :
paginator="true" rows="10" à la table.resizableColumns="true" comme attribut de la table.draggableColumns="true" comme attribut de p:dataTable pour permettre à l'utilisateur de les ordonner autrement.filterBy="#{item.departement.id}" comme attribut de la colonne des id de département. Faites de même pour le nom et le salaire. Le critère de sélection est "commence par", ce qui peut ne pas convenir (par exemple pour le salaire). Il est possible de changer de critère (fini par, contient, exact) avec l'attribut filterMatchMode et aussi de présenter une liste de valeur à l'utilisateur pour qu'il choisisse une des valeurs.Méthode findAll
Page List2.xhtml
Nous allons étudier comment coder une situation qui se rencontre fréquemment : l'utilisateur choisit une valeur dans une liste, par exemple une liste de département, et il s'affiche alors tous les employés du département. Une variante : le choix dans une liste remplit les valeurs d'une autre liste dans laquelle l'utilisateur peut alors faire un choix. Par exemple, une liste de pays dont le choix remplit une liste de villes.
Oublions que PrimeFaces peut résoudre (en partie) ce cas précis et voyons comment coder cette situation dans le cas général.
Dans Liste2.xhtml, ajoutez juste avant la table des employés, une liste contenant tous les départements de l'entreprise. Pour faire simple ne triez pas les départements ; que faudrait-il faire pour que la liste affiche les départements triés par leur nom ?
Sous la liste des départements, ajouter un bouton pour soumettre le formulaire. La soumission du formulaire fait réafficher la même page mais les employés affichés sont ceux du département choisi dans la liste.
Arrangez vous pour que le choix d'un département provoque immédiatement l'affichage des employés du département, sans que l'utilisateur ait besoin de soumettre le formulaire.
Ajoutez ensuite un choix dans la liste pour avoir les employés de tous les départements.
Pour le tri
Code avec bouton de soumission
Code sans bouton de soumission
Tous les départements
N'afficher que la table des employés quand un nouveau département a été choisi.
List2.xhtml
Vous allez modifier le code du backing bean et des pages JSF liés aux employés (ne touchez pas aux départements ou aux clients). Vous devez permettre de modifier, voir et supprimer une ligne de la table des employés, sans utiliser DataModel comme le fait le code généré par Netbeans.
Pour ne pas perdre ce que vous avez fait jusqu'à maintenant, copiez View.xhtml, Edit.xhtml et Create.xhtml, EmployeController.java en des fichiers suffixés par 2 ; par exemple View2.xhtml.
Ensuite modifiez le code de EmployeController2.java et View2.xhtml pour pouvoir passer de la liste des employés à la vue d'un employé en particulier. Avec JSF 2.0 il est possible de passer un paramètre aux méthodes "action" mais il semble que l'implémentation actuelle de la table PrimeFaces ne fonctionne pas avec cette possibilité. Utilisez plutôt un paramètre du commandLink qui lance View pour passer l'id de l'employé de la ligne.
Quand tout marche bien pour View, faites de même pour la modification et la création d'employés. Ne vous occupez pas des départements pour le moment.
Testez. Vérifiez que les modifications ont bien été prises en compte dans la base de données.
List2.xhtml
View2.xhtml
EmployeController2.java
Edit2.xhtml
Create2.xhtml
La portée d'un backing bean (ou plus généralement d'un objet géré par CDI) indique sa durée de vie. Quand un bean est injecté dans une page JSF ou du code Java, le container regarde si un bean existe déjà dans la portée. Si c'est le cas, c'est ce bean qui est injecté, sinon un nouveau bean est créé et injecté ensuite.
Il est toujours bon de limiter au maximum la portée d'un bean mais ça peut compliquer le codage.
Essayez par exemple de changer la portée de EmployeController2.java à la requête. Testez.
Modifiez l'application pour pouvoir modifier les départements et les supérieurs des employés (meilleure présentation de la liste dans la page Edit2.xhtml.
Tout le code
Vous pouvez ensuite étudiez ce TP sur PRG pour obtenir des pages que vous pouvez conserver dans vos marque-page (bookmark).
Appliquez-le pour pouvoir conserver les pages sur les vues des employés dans des marque-page.