JSF - Visualizza tabella dati

Il tag h: dataTable viene utilizzato per visualizzare i dati in modo tabulare.

Tag 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>

Output renderizzato

<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>

Attributi dei tag

S.No	Attributo e descrizione
1	id Identificatore di un componente
2	rendered Un booleano; false sopprime il rendering
3	dir Direzione per il testo. I valori validi sonoltr (da sinistra a destra) e rtl (da destra a sinistra)
4	styleClass Nome della classe CSS (Cascading stylesheet)
5	value Il valore di un componente, in genere un'associazione di valori
6	bgcolor Colore di sfondo per il tavolo
7	border Larghezza del bordo della tabella
8	cellpadding Riempimento attorno alle celle della tabella
9	cellspacing Spaziatura tra le celle della tabella
10	columnClasses Elenco separato da virgole di classi CSS per le colonne
11	first Indice della prima riga mostrato nella tabella
12	footerClass Classe CSS per il piè di pagina della tabella
13	frame Deve essere tracciata la specifica per i lati del telaio che circonda il tavolo; valori validi: nessuno, sopra, sotto, hsides, vsides, lhs, rhs, box, border
14	headerClass Classe CSS per l'intestazione della tabella
15	rowClasses Elenco separato da virgole di classi CSS per le righe
16	rules Specifica per linee tracciate tra le celle; valori validi: gruppi, righe, colonne, tutto
17	summary Riepilogo dello scopo e della struttura della tabella utilizzata per il feedback non visivo come il parlato
18	var Il nome della variabile creata dalla tabella dati che rappresenta l'elemento corrente nel valore
19	title Un titolo, utilizzato per l'accessibilità, che descrive un elemento. I browser visivi in ​​genere creano suggerimenti per il valore del titolo
20	width Larghezza di un elemento
21	onblur L'elemento perde la concentrazione
22	onchange Il valore dell'elemento cambia
23	onclick Si fa clic sul pulsante del mouse sull'elemento
24	ondblclick Si fa doppio clic sul pulsante del mouse sull'elemento
25	onfocus L'elemento riceve il fuoco
26	onkeydown Viene premuto il tasto
27	onkeypress Il tasto viene premuto e successivamente rilasciato
28	onkeyup La chiave viene rilasciata
29	onmousedown Il pulsante del mouse viene premuto sull'elemento
30	onmousemove Il mouse si sposta sull'elemento
31	onmouseout Il mouse lascia l'area dell'elemento
32	onmouseover Il mouse si sposta su un elemento
33	onmouseup Il pulsante del mouse viene rilasciato

Applicazione di esempio

Creiamo un'applicazione JSF di prova per testare il tag precedente.

Passo	Descrizione
1	Crea un progetto con un nome helloworld sotto un pacchetto com.tutorialspoint.test come spiegato nel sottocapitolo JSF - h: outputStylesheet del capitolo JSF - Tag di base .
2	Modificare styles.css come spiegato di seguito.
3	Crea Employee.java nel pacchetto com.tutorialspoint.test come spiegato di seguito.
4	Creare UserData.java come bean gestito nel pacchetto com.tutorialspoint.test come spiegato di seguito.
5	Modifica home.xhtml come spiegato di seguito. Mantieni invariato il resto dei file.
6	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.
7	Infine, crea l'applicazione sotto forma di file war e distribuiscila in Apache Tomcat Webserver.
8	Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio.

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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione come abbiamo fatto nel capitolo JSF - Prima applicazione. Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato.