JSF - Mostrar tabla de datos

h: la etiqueta dataTable se usa para mostrar datos en forma tabular.

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

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

S. No Atributo y descripción
1

id

Identificador de un componente

2

rendered

Un booleano; falso suprime la representación

3

dir

Dirección del texto. Los valores válidos sonltr (de izquierda a derecha) y rtl (De derecha a izquierda)

4

styleClass

Nombre de clase de hoja de estilo en cascada (CSS)

5

value

El valor de un componente, normalmente un valor vinculante

6

bgcolor

Color de fondo de la mesa

7

border

Ancho del borde de la mesa

8

cellpadding

Acolchado alrededor de las celdas de la mesa

9

cellspacing

Espaciado entre celdas de la tabla

10

columnClasses

Lista separada por comas de clases CSS para columnas

11

first

Índice de la primera fila que se muestra en la tabla

12

footerClass

Clase CSS para el pie de la tabla

13

frame

Se deben dibujar las especificaciones para los lados del marco que rodean la mesa; valores válidos: none, above, below, hsides, vsides, lhs, rhs, box, border

14

headerClass

Clase CSS para el encabezado de la tabla

15

rowClasses

Lista separada por comas de clases CSS para filas

dieciséis

rules

Especificación de líneas dibujadas entre celdas; valores válidos: grupos, filas, columnas, todos

17

summary

Resumen del propósito y la estructura de la tabla utilizada para comentarios no visuales, como el habla

18

var

El nombre de la variable creada por la tabla de datos que representa el elemento actual en el valor

19

title

Un título, usado para accesibilidad, que describe un elemento. Los navegadores visuales suelen crear información sobre herramientas para el valor del título

20

width

Ancho de un elemento

21

onblur

El elemento pierde el foco

22

onchange

Cambios en el valor del elemento

23

onclick

Se hace clic en el botón del mouse sobre el elemento

24

ondblclick

El botón del mouse se hace doble clic sobre el elemento

25

onfocus

El elemento recibe atención

26

onkeydown

Se presiona la tecla

27

onkeypress

Se presiona la tecla y luego se suelta

28

onkeyup

Se suelta la llave

29

onmousedown

Se presiona el botón del mouse sobre el elemento

30

onmousemove

El mouse se mueve sobre el elemento

31

onmouseout

El mouse sale del área del elemento

32

onmouseover

El mouse se mueve sobre un elemento

33

onmouseup

Se suelta el botón del mouse

Aplicación de ejemplo

Creemos una aplicación JSF de prueba para probar la etiqueta anterior.

Paso Descripción
1 Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el subcapítulo JSF - h: outputStylesheet del capítulo JSF - Etiquetas básicas .
2 Modifique styles.css como se explica a continuación.
3 Cree Employee.java en el paquete com.tutorialspoint.test como se explica a continuación.
4 Cree UserData.java como un bean administrado en el paquete com.tutorialspoint.test como se explica a continuación.
5 Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
6 Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.
7 Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver.
8 Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso.

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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en JSF - Capítulo Primera aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.