JSF - Afficher la table de données

h: la balise dataTable est utilisée pour afficher les données sous forme de tableau.

Balise JSF

<h:dataTable value = "#{userData.employees}" var = "employee"
   styleClass = "employeeTable"
   headerClass = "employeeTableHeader"
   rowClasses = "employeeTableOddRow,employeeTableEvenRow">
   
   <h:column>    				
      <f:facet name = "header">Name</f:facet>    				
      #{employee.name}
   </h:column>
   
   <h:column>
      <f:facet name = "header">Department</f:facet>
      #{employee.department}
   </h:column>
   
   <h:column>
      <f:facet name = "header">Age</f:facet>
      #{employee.age}
   </h:column>
   
   <h:column>
      <f:facet name = "header">Salary</f:facet>
      #{employee.salary}
   </h:column>
</h:dataTable>

Sortie rendue

<table class = "employeeTable">
   <thead>
      <tr>
         <th class = "employeeTableHeader" scope = "col">Name</th>
         <th class = "employeeTableHeader" scope = "col">Department</th>
         <th class = "employeeTableHeader" scope = "col">Age</th>
         <th class = "employeeTableHeader" scope = "col">Salary</th>
      </tr>
   </thead>
   
   <tbody>
   <tr class = "employeeTableOddRow">
      <td>John</td>
      <td>Marketing</td>
      <td>30</td>
      <td>2000.0</td>
   </tr>
   
   <tr class = "employeeTableEvenRow">
      <td>Robert</td>
      <td>Marketing</td>
      <td>35</td>
      <td>3000.0</td>
   </tr>
</table>

Attributs de balise

S. Non	Attribut et description
1	id Identifiant d'un composant
2	rendered Un booléen; false supprime le rendu
3	dir Direction du texte. Les valeurs valides sontltr (de gauche à droite) et rtl (de droite à gauche)
4	styleClass Nom de classe de feuille de style en cascade (CSS)
5	value La valeur d'un composant, généralement une liaison de valeur
6	bgcolor Couleur d'arrière-plan du tableau
sept	border Largeur de la bordure du tableau
8	cellpadding Rembourrage autour des cellules du tableau
9	cellspacing Espacement entre les cellules du tableau
dix	columnClasses Liste des classes CSS séparées par des virgules pour les colonnes
11	first Index de la première ligne du tableau
12	footerClass Classe CSS pour le pied de tableau
13	frame Les spécifications des côtés du cadre entourant la table doivent être dessinées; valeurs valides: aucune, ci-dessus, ci-dessous, masques, vsides, lhs, rhs, box, border
14	headerClass Classe CSS pour l'en-tête du tableau
15	rowClasses Liste de classes CSS séparées par des virgules pour les lignes
16	rules Spécification des lignes tracées entre les cellules; valeurs valides: groupes, lignes, colonnes, tout
17	summary Résumé de l'objectif et de la structure du tableau utilisé pour les commentaires non visuels tels que la parole
18	var Le nom de la variable créée par la table de données qui représente l'élément actuel dans la valeur
19	title Un titre, utilisé pour l'accessibilité, qui décrit un élément. Les navigateurs visuels créent généralement des info-bulles pour la valeur du titre
20	width Largeur d'un élément
21	onblur L'élément perd le focus
22	onchange Changements de valeur de l'élément
23	onclick Le bouton de la souris est cliqué sur l'élément
24	ondblclick Le bouton de la souris est double-cliqué sur l'élément
25	onfocus L'élément reçoit le focus
26	onkeydown La touche est enfoncée
27	onkeypress La touche est enfoncée puis relâchée
28	onkeyup La clé est libérée
29	onmousedown Le bouton de la souris est enfoncé sur l'élément
30	onmousemove La souris se déplace sur l'élément
31	onmouseout La souris quitte la zone de l'élément
32	onmouseover La souris se déplace sur un élément
33	onmouseup Le bouton de la souris est relâché

Exemple d'application

Créons une application JSF de test pour tester la balise ci-dessus.

Étape	La description
1	Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le sous-chapitre JSF - h: outputStylesheet du chapitre JSF - Balises de base .
2	Modifiez styles.css comme expliqué ci-dessous.
3	Créez Employee.java sous le package com.tutorialspoint.test comme expliqué ci-dessous.
4	Créez UserData.java en tant que bean géré sous le package com.tutorialspoint.test comme expliqué ci-dessous.
5	Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangés.
6	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
sept	Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
8	Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

styles.css

.employeeTable {   
   border-collapse:collapse;
   border:1px solid #000000;
}

.employeeTableHeader {
   text-align:center;
   background:none repeat scroll 0 0 #B5B5B5;
   border-bottom:1px solid #000000;  
   padding:2px;
}

.employeeTableOddRow {
   text-align:center;
   background:none repeat scroll 0 0 #FFFFFFF;	
}

.employeeTableEvenRow {
   text-align:center;
   background:none repeat scroll 0 0 #D3D3D3;
}

Employee.java

package com.tutorialspoint.test;

public class Employee {
   private String name;
   private String department;
   private int age;
   private double salary;
   private boolean canEdit;

   public Employee (String name,String department,int age,double salary) {
      this.name = name;
      this.department = department;
      this.age = age;
      this.salary = salary;
      canEdit = false;
   }

   public String getName() {
      return name;
   }

   public void setName(String name) {
      this.name = name;
   }

   public String getDepartment() {
      return department;
   }

   public void setDepartment(String department) {
      this.department = department;
   }

   public int getAge() {
      return age;
   }

   public void setAge(int age) {
      this.age = age;
   }

   public double getSalary() {
      return salary;
   }

   public void setSalary(double salary) {
      this.salary = salary;
   }

   public boolean isCanEdit() {
      return canEdit;
   }

   public void setCanEdit(boolean canEdit) {
      this.canEdit = canEdit;
   }	
}

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Arrays;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   private String name;
   private String dept;
   private int age;
   private double salary;
   private static final ArrayList<Employee> employees
      = new ArrayList<Employee>(Arrays.asList(
      new Employee("John", "Marketing", 30,2000.00),
      new Employee("Robert", "Marketing", 35,3000.00),
      new Employee("Mark", "Sales", 25,2500.00),
      new Employee("Chris", "Marketing", 33,2500.00),
      new Employee("Peter", "Customer Care", 20,1500.00)
   ));	


   public ArrayList<Employee> getEmployees() {
      return employees;
   }

   public String addEmployee() {		 
      Employee employee = new Employee(name,dept,age,salary);
      employees.add(employee);
      return null;
   }

   public String deleteEmployee(Employee employee) {
      employees.remove(employee);		
      return null;
   }

   public String editEmployee(Employee employee) {
      employee.setCanEdit(true);
      return null;
   }

   public String saveEmployees() {
      
      //set "canEdit" of all employees to false 
      
      for (Employee employee : employees) {
         employee.setCanEdit(false);
      }		
      return null;
   }
   
   public String getName() {
      return name;
   }

   public void setName(String name) {
      this.name = name;
   }

   public String getDepartment() {
      return department;
   }

   public void setDepartment(String department) {
      this.department = department;
   }

   public int getAge() {
      return age;
   }

   public void setAge(int age) {
      this.age = age;
   }

   public double getSalary() {
      return salary;
   }

   public void setSalary(double salary) {
      this.salary = salary;
   }
}

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"   
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core">
   
   <h:head>
      <title>JSF tutorial</title>		
      <h:outputStylesheet library = "css" name = "styles.css"  /> 	
   </h:head>
   
   <h:body> 
      <h2>DataTable Example</h2>
      
      <h:form>
         <h:dataTable value = "#{userData.employees}" var = "employee"
            styleClass = "employeeTable"
            headerClass = "employeeTableHeader"
            rowClasses = "employeeTableOddRow,employeeTableEvenRow">
            
            <h:column>    				
               <f:facet name = "header">Name</f:facet>    				
               #{employee.name}
            </h:column>
            
            <h:column>
               <f:facet name = "header">Department</f:facet>
               #{employee.department}
            </h:column>
            
            <h:column>
               <f:facet name = "header">Age</f:facet>
               #{employee.age}
            </h:column>
            
            <h:column>
               <f:facet name = "header">Salary</f:facet>
               #{employee.salary}
            </h:column>
         </h:dataTable>
      </h:form>
   
   </h:body>
</html>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant.

↰ Previous page