19ABR/1018

ICEfaces: Tabla & Paginador de Datos

Muchas veces, nos vemos en la necesidad de mostrar en diferentes páginas los resultados de una consulta realizada a la Base de Datos. Para ello, se necesita paginar estos resultados en grupos menos numerosos. De esa manera, ya no se tendría que colocar todos los registros dentro de una misma página.

En ICEfaces, este mecanismo de desplazamiento resulta muy sencillo de implementar. A continuación, te mostramos cómo configurar una Tabla de Datos o dataTable para paginar datos. Ante ello, es necesario tener en cuenta algunos conceptos sobre el componente dataTable.

dataTable Este componente muestra los Objetos en un Collection o un Array, donde cada Objeto es una fila (row) de la tabla y cada columna (column) coincide con cada atributo del Objeto. En un dataTable, se puede configurar opciones como setear el valor del número de filas a mostrar en una página o agregar otras funcionalidades como el ordenamiento de las filas, añadiendo un link en la(s) cabecera(s) del dataTable.

Creación del dataTable

Para comenzar con la creación del dataTable necesitamos un bean que contenga un Collection o Array para nuestros objetos; el cual será, en nuestro caso, un Array de Productos. Para ello, crearemos un paquete o package llamadoaprendamos.java.bean en nuestro Proyecto ICEfaces. Luego, agregaremos la clase Producto, cuya estructura será la siguiente: ?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

package aprendamos.java.bean; /** * @author Jadisha Yarif */ public class Producto { private int id; private String producto; private String descripcion; private double precio; public Producto(int id, String producto, String descripcion, double precio) { this.id = id; this.producto = producto; this.descripcion = descripcion; this.precio = precio; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getProducto() { return producto; } public void setProducto(String producto) { this.producto = producto; } public String getDescripcion() { return descripcion; } public void setDescripcion(String descripcion) { this.descripcion = descripcion; } public double getPrecio() {

38 39 40 41 42 43 44 45 46 47 48 49 50

return precio; } public void setPrecio(double precio) { this.precio = precio; } }

Ahora, crearemos nuestro Array de Productos. Para ello, agregamos la clase TableProducto en nuestro paqueteaprendamos.java.bean. En el constructor de esta clase, instanciaremos nuestro Array, como se muestra: ?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

package aprendamos.java.bean; import java.util.ArrayList; import java.util.List; /** * @author Jadisha Yarif */ public class TableProducto { private List<Producto> productos; public TableProducto() { productos = new ArrayList<Producto>(); productos.add(new Producto(1, "Laptop", "Portáttil", 1800)); productos.add(new Producto(2, "Antena", "Grande", 3600)); productos.add(new Producto(3, "Mouse", "Inalámbrico", 20)); productos.add(new Producto(4, "Netbook", "Portátil y Compacta", 1000)); productos.add(new Producto(5, "IPhone", "Con capacidad de 40GB", 800)); productos.add(new Producto(6, "Auriculares", "Inalámbricos", 200)); productos.add(new Producto(7, "USB", "Memoria de 8GB", 40)); productos.add(new Producto(8, "Hard Disk", "Disco Duro de 250 GB", 350)); productos.add(new Producto(9, "Teléfono Inalámbrico", "Equipo Completo", 180)); productos.add(new Producto(10, "Hard Disk", "Disco Duro de 250 GB", 350)); productos.add(new Producto(11, "TV LCD", "Pantalla LCD 50 pulgadas", 2000)); productos.add(new Producto(12, "Mini Parlantes", "Parlantes Compactos", 90)); productos.add(new Producto(13, "Reproductor de DVD", "Reproduce todos los formatos", 380)); productos.add(new Producto(14, "Nintendo Wii", "Gran cantidad de Juegos", 1000)); productos.add(new Producto(15, "Impresora Epson", "Impreso a Color", 550)); productos.add(new Producto(16, "Improsora Cannon", "Impresora Láser", 700)); productos.add(new Producto(17, "Minicomponente", "Equipo completo de música", 400)); productos.add(new Producto(18, "IPhone", "Con capacidad de 20GB", 400)); productos.add(new Producto(19, "Auriculares", "Inalámbricos", 200)); productos.add(new Producto(20, "USB", "Memoria de 12GB", 80)); productos.add(new Producto(21, "Hard Disk", "Disco Duro de 1 TB", 990)); productos.add(new Producto(22, "Teléfono Inalámbrico", "Equipo Completo", 180)); productos.add(new Producto(23, "Hard Disk", "Disco Duro de 250 GB", 350)); productos.add(new Producto(24, "TV LCD", "Pantalla LCD 40 pulgadas", 1900)); productos.add(new Producto(25, "Mini Parlantes", "Parlantes Compactos", 350)); } public List<Producto> getProductos() { return productos; } public void setProductos(List<Producto> productos) { this.productos = productos; } }

Ya ejecutado los pasos anteriores, debemos de configurar el archivo faces-config.xml, ubicado en la carpeta Web Pages/WEB-INF de nuestro Proyecto. En este archivo, agregaremos nuestro bean TableProducto: ?

1 2 3 4 5

<managed-bean> <managed-bean-class>aprendamos.java.bean.TableProducto</managed-bean-class> <managed-bean-name>tableProducto</managed-bean-name> <managed-bean-scope>session</managed-bean-scope> </managed-bean>

Ahora es tiempo de mostrar nuestros registros en nuestra página Web. Para ello, puedes trabajar con el archivo creado por defecto welcomeICEfaces.jspx o crear tu propio archivo JSPX. Así, dentro de este archivo agregaremos nuestrodataTable. ?

01 02 03 04 05 06

<ice:dataTable id="TablaProducto" rows="5" value="#{tableProducto.productos}" var="item" > <ice:column> <f:facet name="header"> <ice:outputText value="ID Producto"/> </f:facet> <ice:outputText value="#{item.id}"/> </ice:column>

07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<ice:column> <f:facet name="header"> <ice:outputText value="Nombre Producto"/> </f:facet> <ice:outputText value="#{item.producto}"/> </ice:column> <ice:column> <f:facet name="header"> <ice:outputText value="Descripción"/> </f:facet> <ice:outputText value="#{item.descripcion}"/> </ice:column> <ice:column> <f:facet name="header"> <ice:outputText value="Precio (S/.)"/> </f:facet> <ice:outputText value="#{item.precio}" /> </ice:column> </ice:dataTable>

Nuestro Array productos es asignado al atributo value del dataTable. Asimismo, es importante asignar un valor al atributovar, pues esto permitirá la iteración del Array. Por otra parte, con la variable rows podemos limitar el número de filas a mostrar en la página. De la misma manera, le asignamos un valor al id, como "TablaProducto". Las columnas o columns del dataTable se pueden enlazar con cada atributo del Producto, contenido en nuestro Array, a través de la variable var, la cual fue definida en la declaración del dataTable.

Agregando el Paginador de Datos o dataPaginator

Este componente nos es muy útil para mostrar gran cantidad de datos y en especial cuando las interfaces de usuario requieren limitar la data a mostrar. Asimismo, este componente nos permite la manipulación y vista del modelo de datos del dataTable.

Para agregar el dataPaginator a tu JSPX, es importante tener en cuenta determinados atributos en la declaración de éste. Primero, debemos asignar un valor al atributo for, el cual tendrá el mismo valor que el id del dataTable, en nuestro caso será "TablaProducto". Luego, se seteará el valor del atributo paginator a true, el cual nos asegurará de mostrar los controles para el paginado de datos. También, podemos agregar el atributo paginatorMaxPages, el cual nos permitirá definir el número de páginas a mostrar en primera instancia. Por último, se definen los facets que nos permitirán implementar los controles para acceder a la primera, última, siguiente, anterior página y/o retroceso, adelanto rápido; que son opcionales. El código de la declaración del dataPaginator es el siguiente: ?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<strong> <ice:dataPaginator id="data_scroll" for="TablaProducto" paginator="true" fastStep="3" paginatorMaxPages="4"> <f:facet name="first"> <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-first.gif" style="border:none;" title="Primera Página"/> </f:facet> <f:facet name="last"> <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-last.gif" style="border:none;" title="Última Página"/> </f:facet> <f:facet name="previous"> <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-previous.gif" style="border:none;" title="Página Previa"/> </f:facet> <f:facet name="next"> <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-next.gif" style="border:none;" title="Siguiente Página"/> </f:facet> <f:facet name="fastforward"> <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-ff.gif" style="border:none;" title="Avance Rápido"/> </f:facet> <f:facet name="fastrewind"> <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-fr.gif" style="border:none;" title="Retroceso Rápido"/> </f:facet> </ice:dataPaginator> </strong>

35 36 37 Asimismo, se puede agregar otro tipo de dataPaginator que nos será útil para mostrar información del modelo de datos del dataTable, como el que se muestra en la parte inferior de la siguiente imagen:

Para agregar este tipo de dataPaginator, el valor del atributo paginator debe ser false, el cual es el valor por defecto. Asimismo, existe una serie de atributos que permitirá establecer una relación con el modelo de datos, comorowsCountVar, displayedRowsCountVar, pageIndexVar, entre otras como se muestra a continuación: ?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

<ice:dataPaginator id="data_scroll2" for="TablaProducto" rowsCountVar="rowsCount" displayedRowsCountVar="displayedRowsCount" firstRowIndexVar="firstRowIndex" lastRowIndexVar="lastRowIndex" pageCountVar="pageCount" pageIndexVar="pageIndex"> <ice:outputFormat value="{0} Productos encontrados, mostrando {1} producto(s), de {2} a {3}. Página {4} / {5}." styleClass="standard"> <f:param value="#{rowsCount}"/> <f:param value="#{displayedRowsCount}"/> <f:param value="#{firstRowIndex}"/> <f:param value="#{lastRowIndex}"/> <f:param value="#{pageIndex}"/> <f:param value="#{pageCount}"/> </ice:outputFormat> </ice:dataPaginator>

De esa manera, puedes agregar una tabla y un mecanismo de paginación de datos de una manera sencilla y rápida. Ahora, puedes realizar tus consultas y traer toda la data

necesaria sin arruinar la interfaz de usuario e implementando este tipo de componente en Java con ICEfaces .