UTILISATION DE LA TABLE DE DONNÉES DANS JSF.

Exemple de tableau prédéfini.
Dans ce laboratoire, nous verrons un exemple simple montrant comment utiliser le composant DataTable, cet élément nous permet de lier une table de données à notre page comme ceci :

Pour ce premier exemple, seul le composant pré-rempli sera lié à partir de notre classe de bean, plus tard il montrera comment manipuler dynamiquement ses informations.

Initialement, créons un projet JSF avec la structure suivante :

Comme nous pouvons le voir, 2 classes java sont créées, l'une correspond à la classe person qui nous permet de traiter les personnes que nous allons afficher dans notre table et l'autre au bean qui va nous permettre de gérer notre table avec le respectif colonnes et enregistrements.
La classe Person.java nous fournit les données de base de la personne que nous allons afficher dans le tableau, ici nous ajoutons les méthodes set et get correspondantes, ainsi qu'un constructeur avec des paramètres pour remplir directement les personnes.

La classe TablaBean.java fait référence à la table et à la gestion des personnes qu'elle contient, les enregistrements qui y sont affichés sont stockés dans le type de personne ArrayList qui, pour les besoins de ce guide, est renseigné dans le constructeur.

Dans index.xhtml, nous créons le composant DataTable auquel nous associons la liste des personnes directement dans la valeur et dans les colonnes respectives les attributs du bean référencé dans var="data", étant data l'élément qui représente les données de l'objet Personne dans chaque ligne du tableau.

Lors de son exécution, nous aurons quelque chose comme ça

Comme on peut le voir, les informations sont présentées en mode tableau, comme nous n'avons pas encore lié les styles CSS, nous n'apprécions que la structure en lignes et colonnes sans aucun type de design, cependant nous pouvons ajouter une propriété "border" au tableau et une marge ayant quelque chose comme ça :

Enfin, nous savons que nous pouvons utiliser pour présenter les informations de manière plus structurée.

Exemple de gestion de données dans DataTable.
Dans cette section, nous continuerons avec l'exemple précédent où nous verrons comment manipuler les données du tableau pour effectuer des processus courants tels que l'enregistrement, la modification ou la suppression d'informations.

Ajouter des personnes.
Pour inscrire des personnes, nous modifierons notre page index.xhtml à laquelle nous lierons le formulaire d'inscription des personnes. Pour ce faire, nous lions les composants de saisie et de sélection dans un panneau de grille dûment associé à l'objet « myPerson » auquel les différentes données sont envoyées. une nouvelle personne est enregistrée dans notre système.

Comme nous le voyons, ces nouveaux éléments sont ajoutés avant que le DataTable n'obtienne un résultat comme celui-ci :

Après avoir modifié l'index, apportons les modifications nécessaires dans la classe TableBean.java, car dans cet exemple nous continuerons à utiliser le niveau de portée par défaut, rendons donc la liste des personnes statique afin qu'elle puisse être manipulée sans problème, nous allons en plus éliminer le rembourrage de la liste puisque l'idée est de pouvoir inscrire des personnes via un formulaire d'inscription.

Comme nous pouvons le voir lors de la définition de la liste comme statique, nous créons son instance au niveau de la classe, nous ne le faisons pas dans le constructeur car cela sera appelé à différentes occasions par notre jsf, ce qui entraînerait une nouvelle instance de la liste, ce qui entraînerait nous faire perdre les informations qu'il pourrait contenir.

De plus, nous avons ajouté un objet de type Person pour pouvoir gérer les données d'enregistrement et ajouté la méthode "aggregarPersona()" qui permet d'ajouter un nouvel élément à la liste et est appelée à partir du bouton jsf, plus tard nous générons une nouvelle instance de l'objet "minhaPersona" qui permettra le nettoyage du formulaire d'inscription.


Lors de l'exécution du système, nous verrons le comportement suivant :

Initialement le formulaire est vide et l'en-tête de notre tableau est également affiché mais sans aucun contenu (rappelez-vous que nous avons éliminé le remplissage dans la liste), de sorte que l'en-tête ne s'affiche pas lorsqu'il n'y a pas encore de personnes inscrites, nous utilisons donc le " rendu » où nous validons que la longueur de la liste est supérieure à zéro, sinon elle ne devrait pas afficher les en-têtes. (Le fonctionnement de cette propriété sera discuté en détail plus tard)

Au fur et à mesure que nous ajoutons des personnes, elles sont stockées dans la liste et présentées dans le DataTable

Exclure les personnes.
Après avoir enregistré avec succès des personnes dans notre liste, nous pouvons les en supprimer, pour cela nous ajouterons une nouvelle colonne d'actions dans notre dataTable qui contiendra un lien vers la méthode "eliminarPerson()" que nous allons créer dans notre bean

Pour cela nous modifions le index.xhtml où après la colonne « Sexe » nous ajouterons la colonne « Actions »

Comme nous pouvons le voir, nous utilisons un composant et dans l'action, nous appelons la méthode "eliminarPersona()" à laquelle nous enverrons la valeur "data" en tant que paramètre, en nous rappelant que data équivaut à l'objet de la liste qui est affiché dans une ligne spécifique.

Plus tard, dans la classe TablaBean.java, nous ajoutons la méthode "eliminarPersona()" qui reçoit en paramètre l'objet personne que nous voulons supprimer, cela correspond aux "données" que nous envoyons depuis le jsf, et équivaut à la personne dans la ligne que nous voulons supprimer, alors supprimez-la de la liste.

Lors de l'exécution du système, nous aurons ce qui suit :

Et chaque fois que nous supprimons un enregistrement via le lien correspondant, le tableau sera mis à jour

Modifier les personnes.
Après avoir enregistré et supprimé avec succès des personnes de notre liste, nous pouvons les modifier, pour cela nous modifierons notre tableau en le rendant modifiable lorsque nous voudrons mettre à jour certaines données, pour cela nous utiliserons à nouveau la propriété "rendered" qui affichera ou masquer les options modifiables en fonction de ce que l'utilisateur décide.

Comme nous pouvons le voir dans chacune des colonnes, un composant est ajouté qui sera caché par défaut grâce à la propriété "rendered" qui permet de stocker des données vraies ou fausses pour afficher ou masquer le composant qui l'accompagne.

Dans notre cas, "data.edit" appelle une variable booléenne (edit) que nous avons ajoutée dans la classe Person, si la propriété est vraie, elle affichera le pour permettre l'édition, mais si la propriété est true false (pas vrai) alors elle affichera le

Il en va de même pour les colonnes profession, salaire et sexe respectivement, où au lieu d'ajouter un à ce dernier s'ajoutera un puisque dans le formulaire, nous utilisons un combo de sélection du chemin suivant :

De même, la propriété rendue est tenue d'afficher le combo ou d'afficher l'étiquette selon le cas.

Par la suite, la colonne "Actions" est modifiée là où auparavant nous n'avions qu'un lien vers "Supprimer" maintenant nous allons ajouter 2 liens supplémentaires, un pour "modifier" et l'autre pour "enregistrer" les informations après les avoir modifiées.

Comme nous pouvons le voir, il y a maintenant 3 liens pour les méthodes edit, save et delete respectivement, cependant edit et save ont la propriété render qui ne rend visibles que 2 des 3 liens à la fois (rappelez-vous que celui rendu contient true ou false en fonction de condition ) donc, par défaut, le lien de suppression apparaîtra toujours car il n'a pas la propriété de rendu, tandis que l'édition et l'enregistrement ne seront jamais vus ensemble. (permet d'ajouter un espace entre les liens)

En interne au niveau graphique, le dataTable ressemblerait à ceci :

Bien que graphiquement vous puissiez voir tous les composants ensemble, il est important de préciser que la propriété rendue n'affichera que les composants en fonction de la valeur true ou false à ce moment-là.

Après avoir modifié le fichier index.xhtml, il est maintenant temps de modifier la classe Person.java, dans laquelle la propriété "edit" utilisée par le rendu mentionné ci-dessus est ajoutée.

Comme nous pouvons le voir, un nouvel attribut booléen est lié à son ensemble et à son get respectifs. De plus, pour s'adapter à la structure de l'exercice, nous avons ajouté la propriété au constructeur paramétré, bien qu'elle ne soit plus utilisée à ce stade de l'exercice.

De cette façon, chaque fois que render=”#{data.edit}” est fait dans index.xhtml, il appellerait cette variable, ce qui permettrait d'afficher ou de masquer des composants selon le cas.

Enfin, et déjà avec les modifications précédentes, nous procédons à la modification de la classe Bean où nous devons ajouter les méthodes correspondantes de suppression et de sauvegarde appelées depuis le champ "Actions".

Comme on peut le voir, la méthode editPersona() reçoit un objet person (depuis l'appel jsf, comme cela se fait dans la méthode delete) et sa propriété "edit" est modifiée en lui envoyant la valeur true, ce qui permettra cet enregistrement cacher le et montrer le et le pour effectuer le changement souhaité.

D'autre part, la méthode savePersona() se chargera de changer chaque propriété "edit" de tous les objets de la liste en false afin que le dataTable soit restauré avec les valeurs des personnes et non avec les éléments modifiables.

Lors de l'exécution du système, nous aurons ce qui suit :

Et lorsque vous appuyez sur modifier, le système passe à :

Comme on peut le voir, lorsque le lien d'édition est cliqué, les composants modifiables sont automatiquement affichés tandis que ceux non modifiables sont masqués, de même le lien d'édition disparaît pour faire place au lien de sauvegarde comme expliqué ci-dessus.

Et prêt!!!

Sur mon blog et sur ma chaîne, j'ai partagé du matériel sur ce grand langage de programmation, vous pouvez trouver de nombreux articles et vidéos à partir de zéroJe vous montre comment télécharger les outils nécessaires pour commencer à programmer, on remonte de plus en plus les concepts de base, en passant par les notions de programmation orientée objetnormes, les sujetsstructures de données, accès aux bases de données entre autres, à la construction applications avec interfaces utilisateur.

Vous pouvez également trouver un cours à partir de zéro où j'enseigne comment créer des applications mobiles sur Android grâce à une séquence vidéo étape par étape constamment mise à jour.

Et maintenant, je vais également commencer la séquence à partir de zéro où nous allons entrer dans le monde de l'édition java Enterprise, vous montrer comment configurer l'environnement de développement et comment créer vos premières applications Web avec java.

C'est pourquoi je vous invite à visiter codejavu.blogspot.com, à visiter ma chaîne Cristian Henao et qu'ils sont très au courant des nouvelles suites

Cela peut aussi vous intéresser.

Souhaitez-vous ajouter ou commenter cette entrée ? n'hésitez pas à faire….et si vous l'avez aimé, je vous invite à le partager y Abonnez-vous en cliquant sur le bouton "Rejoindre ce site" pour entendre plus de messages comme celui-ci 😉