Jugando con tablas en JSF

De ChuWiki
Saltar a: navegación, buscar

Introducción

JSF nos ofrece muchas posibilidades para hacer tablas. En este tutorial vamos a hacer un pequeño ejemplo usando <h:panelGrid> y <h:dataTable>. En el ejemplo crearemos una tabla sencilla a la que se pueden añadir y borrar filas.

h:panelGrid y h:dataTable

Ambos nos permiten pintar una tabla en el navegador, pero lo hace recogiendo los datos de forma distinta. h:panelGrid símplemente es una tabla que tendremos que hacerlos poniendo manualmente todos los elementos. Sin embargo h.dataTable nos permite asociarla a una Collection, Array, ResultSet, RowSet... indicando cómo es una de las filas, iterando automáticamente el resto.

Un ejemplo tonto de h:panelGrid

   <h:panelGrid columns="2">
      <h:outputText value="fila 1, columna 1"></h:outputText>
      <h:outputText value="fila 1, columna 2"></h:outputText>
      <h:outputText value="fila 2, columna 1"></h:outputText>
      <h:outputText value="fila 2, columna 2"></h:outputText>
      <h:outputText value="fila 3, columna 1"></h:outputText>
      <h:outputText value="fila 3, columna 2"></h:outputText>
   </h:panelGrid>

Unicamente le hemos dicho que hay dos columnas y todos los componentes consecutivamente. El mostrarse en el navegador, se irán cogiendo en orden para rellenar las filas con dos elementos en cada una de ellas (dos columnas).

Un ejemplo tonto con h:dataTable. Supongamos que tenemos un @ManagedBean con una propiedad que sea una lista de beans Dato

package com.chuidiang.ejemplos.jsf;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class Dato {
   private int valor;
   private String nombre;

   public String getNombre() {
      return nombre;
   }

   public void setNombre(String nombre) {
      this.nombre = nombre;
   }

   public int getValor() {
      return valor;
   }

   public void setValor(int valor) {
      this.valor = valor;
   }
}
package com.chuidiang.ejemplos.jsf;

import java.util.LinkedList;

import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;

@ManagedBean
public class HolaMundo {
   private LinkedList<Dato> datos;

   public HolaMundo() {
      // rellenamos unos datos cualquiera en el constructor
      // por tener algo que se vea.
      datos = new LinkedList<Dato>();
      for (int i = 5; i < 10; i++) {
         Dato dato = new Dato();
         dato.setValor(i);
         dato.setNombre("nombre" + i);
         datos.add(dato);
      }
   }

   public LinkedList<Dato> getDatos() {
      return datos;
   }

   public void setDatos(LinkedList<Dato> datos) {
      this.datos = datos;
   }
}

La clase HolaMundo lleva un simple atributo que es una LinkedList<Dato> y los métodos set y get correspondiente. El código xhtml con el h:dataTable para ver estos datos es el siguiente

   <h:dataTable value="#{holaMundo.datos}" var="dato">
      <h:column>
         <f:facet name="header">
            <h:outputText value="valor"></h:outputText>
         </f:facet>
         <h:outputText value="#{dato.valor}"></h:outputText>
      </h:column>
      <h:column>
         <f:facet name="header">
            <h:outputText value="nombre"></h:outputText>
         </f:facet>
         <h:outputText value="#{dato.nombre}"></h:outputText>
      </h:column>
      <h:column>
         <h:form>
            <h:commandButton action="#{holaMundo.removeValor(dato)}"
               value="Borrar"></h:commandButton>
         </h:form>
      </h:column>
   </h:dataTable>