Diferencia entre revisiones de «Jugando con tablas en JSF»

De ChuWiki
Saltar a: navegación, buscar
m
m
Línea 111: Línea 111:
 
       </h:column>
 
       </h:column>
 
   </h:dataTable>
 
   </h:dataTable>
 +
</pre>
  
 +
Al h:dataTable le hemos puesto un value="#{holaMundo.datos}", que es la forma de indicar que cogemos el atributo datos de la clase HolaMundo para los datos de nuestra tabla. Como hemos comentado, puede ser un Array, Collection, List, ResultSet, etc. El h:dataTable iterará sobre esta colección de forma automática. Hemos puesto var="dato" para indicar que el elemento concreto de la colección al que le toca el turno se llamará "dato", de forma que dentro del h:dataTable, lo referenciaremos con este nombre.
 +
 +
Dentro del h:dataTable ponemos tantos <h:column> como columnas que queramos que tenga la tabla. Dentro de cada <h:column> podemos poner un <f:facet> para que haga de cabecera de la columna y el dato que queramos para esa celda concreta. Fijémonos en la primera columna
 +
 +
<pre>
 +
      <h:column>
 +
        <f:facet name="header">
 +
            <h:outputText value="valor"></h:outputText>
 +
        </f:facet>
 +
        <h:outputText value="#{dato.valor}"></h:outputText>
 +
      </h:column>
 
</pre>
 
</pre>
 +
 +
* <f:facet name="header"> es para indicar que esto es columna de la tabla. Se podría poner name="footer" para el pié de la tabla. Dentro del f:facet ponemos el h:outputText con el texto de esta cabecera, "valor" en este caso. Por supuesto, podríamos poner cualquier elemento que queramos que haga de cabecera.
 +
* <h:outputText value="#{dato.valor}"> indica el contenido de la celda, que será el atributo valor de la variable dato, que es la que habíamos definido en el var="dato" del h:dataTable.
 +
 +
== La mini aplicación ==
 +
 +
Vamos a hacer una mini aplicación que nos permita desde el navegador añadir y borrar Dato a la lista de datos que hay en HolaMundo.
 +
 +
En HolaMundo.java hacemos unos cambios. Le ponemos métodos addValor() y removeValor que permitan añadir y borrar datos de la lista. También, a HolaMundo le ponemos @ApplicationScoped para que los datos sean igual para todos los usuarios que usen esta aplicación (mientras no se rearranque la aplicación, no vamos a hacer persistencia en base de datos).
 +
 +
<pre>
 +
...
 +
 +
@ManagedBean
 +
@ApplicationScoped
 +
public class HolaMundo {
 +
 
 +
  ...
 +
 +
  public void addValor(Dato valor) {
 +
      datos.add(valor);
 +
  }
 +
 +
  public void removeValor(Dato valor) {
 +
      datos.remove(valor);
 +
 +
  }
 +
}
 +
</pre>
 +
 +
A la clase Dato.java, podemos ponerle algo sofisticado como un identificador único de forma que podamos saber qué dato vamos a borrar, pero
 +
 +
  
  
  
 
[[Categoría:J2EE]][[Categoría:JSF]]
 
[[Categoría:J2EE]][[Categoría:JSF]]

Revisión del 17:08 7 may 2011

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>

Al h:dataTable le hemos puesto un value="#{holaMundo.datos}", que es la forma de indicar que cogemos el atributo datos de la clase HolaMundo para los datos de nuestra tabla. Como hemos comentado, puede ser un Array, Collection, List, ResultSet, etc. El h:dataTable iterará sobre esta colección de forma automática. Hemos puesto var="dato" para indicar que el elemento concreto de la colección al que le toca el turno se llamará "dato", de forma que dentro del h:dataTable, lo referenciaremos con este nombre.

Dentro del h:dataTable ponemos tantos <h:column> como columnas que queramos que tenga la tabla. Dentro de cada <h:column> podemos poner un <f:facet> para que haga de cabecera de la columna y el dato que queramos para esa celda concreta. Fijémonos en la primera columna

      <h:column>
         <f:facet name="header">
            <h:outputText value="valor"></h:outputText>
         </f:facet>
         <h:outputText value="#{dato.valor}"></h:outputText>
      </h:column>
  • <f:facet name="header"> es para indicar que esto es columna de la tabla. Se podría poner name="footer" para el pié de la tabla. Dentro del f:facet ponemos el h:outputText con el texto de esta cabecera, "valor" en este caso. Por supuesto, podríamos poner cualquier elemento que queramos que haga de cabecera.
  • <h:outputText value="#{dato.valor}"> indica el contenido de la celda, que será el atributo valor de la variable dato, que es la que habíamos definido en el var="dato" del h:dataTable.

La mini aplicación

Vamos a hacer una mini aplicación que nos permita desde el navegador añadir y borrar Dato a la lista de datos que hay en HolaMundo.

En HolaMundo.java hacemos unos cambios. Le ponemos métodos addValor() y removeValor que permitan añadir y borrar datos de la lista. También, a HolaMundo le ponemos @ApplicationScoped para que los datos sean igual para todos los usuarios que usen esta aplicación (mientras no se rearranque la aplicación, no vamos a hacer persistencia en base de datos).

...

@ManagedBean
@ApplicationScoped
public class HolaMundo {
   
   ...

   public void addValor(Dato valor) {
      datos.add(valor);
   }

   public void removeValor(Dato valor) {
      datos.remove(valor);

   }
}

A la clase Dato.java, podemos ponerle algo sofisticado como un identificador único de forma que podamos saber qué dato vamos a borrar, pero