Red social para profesionales IT

Ingresar
Java

Java

Dudas, soluciones, alternativas, consejos y todo lo que se te pueda ocurrir respecto al lenguaje Java

Historial de páginas


DataTable en JSF: Revision creada por %s para %s


DataTable en JSF

Últimas actualizaciones de hace 2460 dias para Run IT

Categorias: tutorial, Programación

Muchas veces cuando creamos una página web, necesitamos mostrar datos homogéneos en un tabla.  Supongamos que tenemos una lista de socios y queremos verlos por pantalla; no sabemos para que,  pero es muy posible que en algún momento necesitemos verlos.

Si lo hacemos en Html puro, el código quedaría de esta forma, 

 

 

<table border="1" cellspacing="2">

<thead>

<tr>

<th scope="col">Nombre</th>

<th scope="col">Apellido</th>

<th scope="col">Direccion</th>

<th scope="col">Ciudad</th>

</tr>

</thead>

<tbody>

<tr>

<td>Adrian</td>

<td>Sanchez</td>

<td>Lavalle 698</td>

<td>Capital Federal</td>

</tr>

<tr>

<td>Juan</td>

<td>Terci</td>

<td>Alvear 5672</td>

<td>Moreno</td>

</tr>

<tr>

<td>Ernesto</td>

<td>Garcia</td>

<td>Mitre 300</td>

<td>Lanus</td>

</tr>

</tbody>

</table>

 

Obviamente nadie en su sano juicio lo va a codificar así, ya que si necesitásemos insertar uno o varios socios tendríamos que tocar el código y lo mas probable es los datos de los socios estén en una base de datos y cambien constantemente.

Bien, JSF, nos proporciona un componente para este propósito: DataTable.   Con este componente podremos mostrar datos dinámicos, sean de una lista, consulta o set de datos.  

DataTable arma una tabla html.  Las columnas se especifican con el tag  <h:column>, que sirve de template para cada columna.  Cada fila de la tabla se corresponde con un objeto de la lista de origen del componente; si por ejemplo el origen de datos tiene una lista de 20 objetos, la tabla tendrá 20 filas.

Vamos a diseñar una página Jsp, que muestre los datos de los socios existentes.   Los datos de cada socio se encapsula en una clase que llamamos Socio.

 

public class Socio {

private String nombre, apellido, direccion, ciudad;

public Socio(String nombre, String apellido, String direccion, String ciudad) {

this.nombre = nombre;

this.apellido = apellido;

this.direccion = direccion;

this.ciudad = ciudad;

}

public String getNombre() {

return nombre;

}

public void setNombre(String nombre) {

this.nombre = nombre;

}

public String getApellido() {

return apellido;

}

public void setApellido(String apellido) {

this.apellido = apellido;

}

public String getDireccion() {

return direccion;

}

public void setDireccion(String direccion) {

this.direccion = direccion;

}

public String getCiudad() {

return ciudad;

}

public void setCiudad(String ciudad) {

this.ciudad = ciudad;

}

}

Esta clase no tiene nada de especial, solamente 4 atributos que tienen los socios ( nombre, apellido, dirección y ciudad).  

La idea es que DataTable, renderize cada instancia de Socio mostrando sus 4 atributos y arme una tabla Html.  

Como DataTable es un componente de Jsf  que  necesita de datos para abastecerse,  debemos pasarle los objetos a renderizar, más específicamente una lista de Socios.   Sabemos ( o deberíamos )  que las páginas en Jsf usan un Backing Bean de respaldo donde toman los datos; para ello vamos a crear uno que devuelva la lista de Socios.

 

public class SociosBean {

List<Socio> socios;

public SociosBean() {

socios = SocioDao.getSocios();

}

public List<Socio> getSocios() {

return socios;

}

public void setSocios(List<Socio> socios) {

this.socios = socios;

}

}

 

 

Si observamos SocioDao.getSocios(), devuelve una lista de Socios.  Este Dao  es un ejemplo para abstraer  el origen de datos; podemos hacer que tome los datos de una base de datos o quien sabe de donde se nos ocurra.  Lo ideal sería que fuese una Inteface Dao, y si queremos volar más y ser puristas, inyectarle una implementación Dao por Spring ( cosa que sale del alcance del tutorial).

Ya tenemos la clase Socio y el Backing Bean que llamamos SociosBean  de respaldo de la página.  Nos queda ver como funciona el DataTable para que muestre los datos de los Socios en una table html.

 

Veamos que contiene el Tag DataTable.

<h:dataTable value="#{sociosBean.socios}" var="socio" border="1">

Que significa la línea superior? 

El Tag DataTable itera sobre un origen de datos ( lista de socios) , almacena cada objeto de la iteración en la variable socio; con dicha variable renderizará una fila de la tabla, accediendo a las propiedades del socio que especifiquemos.

h:dataTable  es el tag propiamente dicho que renderizará los datos de los socios

value="#{sociosBean.socios}"  esta propiedad del tag indica el origen de datos a renderizar, en otras palabras, el DataTable va a recorrer cada uno de los objetos de este origen.  Si nos fijamossociosBean es el bean de respaldo de la página; accediendo a la propiedad socios obtendremos la lista de socios a iterar.  Recordemos que una vez que declaramos los Backing Beans en el faces-config.xml podemos acceder a sus propiedades por su nombre, en este caso socios.

var="socio"  declara una  variable para almacenar cada objeto durante la iteración de la lista de origen.   Esta variable se corresponde con una fila de la tabla a renderizar.

 

Como ya tenemos la vaciable socio, podemos referenciar el nombre del socio:

<h:outputText value="#{socio.nombre}"></h:outputText>

también el apellido:

<h:outputText value="#{socio.apellido}"></h:outputText>

y podríamos hacer lo mismo con cada propiedad de la clase Socio.

 

El código completo quedaría asi:

 

<h:dataTable value="#{sociosBean.socios}" var="socio" border="1">

<h:column>

<f:facet name="header">

<h:outputText value="Nombre"></h:outputText>

</f:facet>

<h:outputText value="#{socio.nombre}"></h:outputText>

</h:column>

 

<h:column>

<f:facet name="header">

<h:outputText value="Apellido"></h:outputText>

</f:facet>

<h:outputText value="#{socio.apellido}"></h:outputText>

</h:column>

 

<h:column>

<f:facet name="header">

<h:outputText value="Direccion"></h:outputText>

</f:facet>

<h:outputText value="#{socio.direccion}"></h:outputText>

</h:column>

 

<h:column>

<f:facet name="header">

<h:outputText value="Ciudad"></h:outputText>

</f:facet>

<h:outputText value="#{socio.ciudad}"></h:outputText>

</h:column>

</h:dataTable>


 

Si prestan atención, hay 4 tags <h:column>; intuitivamente nos damos cuenta que es una columna de la tabla.  Por cada tag declarado se crea una columna.  Si nos fijamos, dentro de cada tag <h:column>, se referencia a una propiedad de la variable socio, como por ejemplo <h:outputText value="#{socio.ciudad}">

DataTable, itera por cada objeto de la lista, almacena el objeto en la variable socio y en cada columna podemos acceder a una propiedad del socio ( o varias).   Las ventajas son claras, si tenemos una lista de origen con 400 socios, se dibujará una tabla de 400 filas, con la descripción de cada socio.  

Así mismo si no queremos mostrar la ciudad donde vive el socio, podemos eliminar el Tag de la columna que corresponde a la ciudad; sin tocar código.

El tag <f:facet>, permite anidarse con otros componentes y especificar componentes como el header, footer  de una tabla.

Espero les halla resultado útil el tutorial!

Adunto el ejemplo  para que lo puedan ver.