JSF - Exibir DataTable

h: a tag dataTable é usada para exibir os dados de forma tabular.

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>

Saída renderizada

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

Atributos de tag

S.No	Atributo e descrição
1	id Identificador para um componente
2	rendered Um booleano; falso suprime a renderização
3	dir Direção do texto. Os valores válidos sãoltr (da esquerda para a direita) e rtl (direita para esquerda)
4	styleClass Nome da classe da folha de estilo em cascata (CSS)
5	value O valor de um componente, normalmente uma associação de valor
6	bgcolor Cor de fundo para a mesa
7	border Largura da borda da mesa
8	cellpadding Preenchimento em torno das células da mesa
9	cellspacing Espaçamento entre células da tabela
10	columnClasses Lista separada por vírgulas de classes CSS para colunas
11	first Índice da primeira linha mostrada na tabela
12	footerClass Classe CSS para o rodapé da tabela
13	frame A especificação para os lados da moldura que envolve a mesa deve ser desenhada; valores válidos: nenhum, acima, abaixo, hsides, vsides, lhs, rhs, box, border
14	headerClass Classe CSS para o cabeçalho da tabela
15	rowClasses Lista separada por vírgulas de classes CSS para linhas
16	rules Especificação para linhas desenhadas entre células; valores válidos: grupos, linhas, colunas, todos
17	summary Resumo da finalidade e estrutura da tabela usada para feedback não visual, como fala
18	var O nome da variável criada pela tabela de dados que representa o item atual no valor
19	title Um título, usado para acessibilidade, que descreve um elemento. Navegadores visuais normalmente criam dicas de ferramentas para o valor do título
20	width Largura de um elemento
21	onblur Elemento perde o foco
22	onchange O valor do elemento muda
23	onclick O botão do mouse é clicado sobre o elemento
24	ondblclick O botão do mouse é clicado duas vezes sobre o elemento
25	onfocus Elemento recebe foco
26	onkeydown A tecla está pressionada
27	onkeypress A tecla é pressionada e posteriormente liberada
28	onkeyup Chave liberada
29	onmousedown O botão do mouse é pressionado sobre o elemento
30	onmousemove O mouse se move sobre o elemento
31	onmouseout O mouse sai da área do elemento
32	onmouseover O mouse se move para um elemento
33	onmouseup O botão do mouse é liberado

Aplicação de exemplo

Vamos criar um aplicativo JSF de teste para testar a tag acima.

Degrau	Descrição
1	Crie um projeto com o nome helloworld sob um pacote com.tutorialspoint.test conforme explicado no subcapítulo JSF - h: outputStylesheet do capítulo JSF - Tags básicas .
2	Modifique styles.css conforme explicado abaixo.
3	Crie Employee.java no pacote com.tutorialspoint.test conforme explicado a seguir.
4	Crie UserData.java como um bean gerenciado no pacote com.tutorialspoint.test conforme explicado abaixo.
5	Modifique home.xhtml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
6	Compile e execute o aplicativo para garantir que a lógica de negócios esteja funcionando de acordo com os requisitos.
7	Por fim, construa o aplicativo na forma de um arquivo war e implante-o no Apache Tomcat Webserver.
8	Inicie seu aplicativo da web usando o URL apropriado, conforme explicado abaixo na última etapa.

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>

Assim que você estiver pronto com todas as mudanças feitas, vamos compilar e rodar a aplicação como fizemos no capítulo JSF - Primeira Aplicação. Se tudo estiver certo com sua aplicação, isso produzirá o seguinte resultado.

↰ Previous page