19ABR/1018 ICEfaces: Tabla & Paginador de Datos

Muchas veces, nos vemos en la necesidad de mostrar en diferentes pginas 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 tendra que colocar todos los registros dentro de una misma pgina. En ICEfaces, este mecanismo de desplazamiento resulta muy sencillo de implementar. A continuacin, te mostramos cmo 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 nmero de filas a mostrar en una pgina o agregar otras funcionalidades como el ordenamiento de las filas, aadiendo un link en la(s) cabecera(s) del dataTable.

Creacin del dataTable

Para comenzar con la creacin 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 package aprendamos.java.bean; 02 /** * @author Jadisha Yarif 03 */ 04 public class Producto { 05 private int id; 06 private String producto; 07 private String descripcion; 08 private double precio; 09 10 public Producto(int id, String producto, String descripcion, double precio) { 11 this.id = id; this.producto = producto; 12 this.descripcion = descripcion; 13 this.precio = precio; 14 } 15 16 public int getId() { 17 return id; } 18 19 public void setId(int id) { 20 this.id = id; 21 } 22 23 public String getProducto() { return producto; 24 } 25 26 public void setProducto(String producto) { 27 this.producto = producto; 28 } 29 30 public String getDescripcion() { return descripcion; 31 } 32 33 public void setDescripcion(String descripcion) { 34 this.descripcion = descripcion; 35 } 36 public double getPrecio() { 37

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", "Portttil", 1800)); productos.add(new Producto(2, "Antena", "Grande", 3600)); productos.add(new Producto(3, "Mouse", "Inalmbrico", 20)); productos.add(new Producto(4, "Netbook", "Porttil y Compacta", 1000)); productos.add(new Producto(5, "IPhone", "Con capacidad de 40GB", 800)); productos.add(new Producto(6, "Auriculares", "Inalmbricos", 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, "Telfono Inalmbrico", "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 Lser", 700)); productos.add(new Producto(17, "Minicomponente", "Equipo completo de msica", 400)); productos.add(new Producto(18, "IPhone", "Con capacidad de 20GB", 400)); productos.add(new Producto(19, "Auriculares", "Inalmbricos", 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, "Telfono Inalmbrico", "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 pgina 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 var="item" > 02 <ice:column> 03 <f:facet name="header"> <ice:outputText value="ID Producto"/> 04 </f:facet> 05 <ice:outputText value="#{item.id}"/> 06 </ice:column>

<ice:dataTable id="TablaProducto" rows="5" value="#{tableProducto.productos}"

<ice:column> 07 <f:facet name="header"> 08 <ice:outputText value="Nombre Producto"/> 09 </f:facet> 10 <ice:outputText value="#{item.producto}"/> </ice:column> 11 <ice:column> 12 <f:facet name="header"> 13 <ice:outputText value="Descripcin"/> 14 </f:facet> 15 <ice:outputText value="#{item.descripcion}"/> </ice:column> 16 <ice:column> 17 <f:facet name="header"> 18 <ice:outputText value="Precio (S/.)"/> 19 </f:facet> <ice:outputText value="#{item.precio}" /> 20 </ice:column> 21 22 </ice:dataTable> 23 24 25 26 Nuestro Array productos es asignado al atributo value del dataTable. Asimismo, es importante asignar un valor al atributovar, pues esto permitir la iteracin del Array. Por otra parte, con la variable rows podemos limitar el nmero de filas a mostrar en la pgina. 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 travs de la variable var, la cual fue definida en la declaracin 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 manipulacin y vista del modelo de datos del dataTable. Para agregar el dataPaginator a tu JSPX, es importante tener en cuenta determinados atributos en la declaracin 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. Tambin, podemos agregar el atributo paginatorMaxPages, el cual nos permitir definir el nmero de pginas a mostrar en primera instancia. Por ltimo, se definen los facets que nos permitirn implementar los controles para acceder a la primera, ltima, siguiente, anterior pgina y/o retroceso, adelanto rpido; que son opcionales. El cdigo de la declaracin del dataPaginator es el siguiente:
?

01 02 <strong> <ice:dataPaginator id="data_scroll" for="TablaProducto" paginator="true" 03 fastStep="3" paginatorMaxPages="4"> <f:facet name="first"> 04 <ice:graphicImage 05 url="./xmlhttp/css/xp/css-images/arrow-first.gif" 06 style="border:none;" 07 title="Primera Pgina"/> </f:facet> 08 <f:facet name="last"> 09 <ice:graphicImage 10 url="./xmlhttp/css/xp/css-images/arrow-last.gif" 11 style="border:none;" 12 title="ltima Pgina"/> </f:facet> 13 <f:facet name="previous"> 14 <ice:graphicImage 15 url="./xmlhttp/css/xp/css-images/arrow-previous.gif" 16 style="border:none;" 17 title="Pgina Previa"/> </f:facet> 18 <f:facet name="next"> 19 <ice:graphicImage 20 url="./xmlhttp/css/xp/css-images/arrow-next.gif" 21 style="border:none;" title="Siguiente Pgina"/> 22 </f:facet> 23 <f:facet name="fastforward"> 24 <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-ff.gif" 25 style="border:none;" 26 title="Avance Rpido"/> </f:facet> 27 <f:facet name="fastrewind"> 28 <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-fr.gif" 29 style="border:none;" 30 title="Retroceso Rpido"/> </f:facet> 31 </ice:dataPaginator> 32 </strong> 33 34

35 36 37
Asimismo, se puede agregar otro tipo de dataPaginator que nos ser til para mostrar informacin 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 relacin con el modelo de datos, comorowsCountVar, displayedRowsCountVar, pageIndexVar, entre otras como se muestra a continuacin:
?

01 02 <ice:dataPaginator id="data_scroll2" for="TablaProducto" rowsCountVar="rowsCount" 03 displayedRowsCountVar="displayedRowsCount" 04 firstRowIndexVar="firstRowIndex" 05 lastRowIndexVar="lastRowIndex" 06 pageCountVar="pageCount" pageIndexVar="pageIndex"> 07 <ice:outputFormat 08 09 {2} a {3}. Pgina {4} / value="{0} Productos encontrados, mostrando {1} producto(s), de {5}." 10 styleClass="standard"> 11 <f:param value="#{rowsCount}"/> <f:param value="#{displayedRowsCount}"/> 12 <f:param value="#{firstRowIndex}"/> 13 <f:param value="#{lastRowIndex}"/> 14 <f:param value="#{pageIndex}"/> 15 <f:param value="#{pageCount}"/> </ice:outputFormat> 16 17 </ice:dataPaginator> 18
De esa manera, puedes agregar una tabla y un mecanismo de paginacin de datos de una manera sencilla y rpida. 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 .