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.