Tutorial Paginador de datos

2010

Universidad de Valparaíso Pedro Hernández

[DESARROLLO WEB] En este documento aprenderemos a realizar un paginador de datos en el framework Iceface con el ide de programación Netbean 6.x.

Universidad de Valparaíso.

Desarrollo Web 1 de 31 Paginamiento de datos.

CONTENIDO

Introduccion ............................................................................................................................................................ 2

DataTable........................................................................................................................................................ 2

Objetivo ..................................................................................................................................................................... 3

Manos a la obra ...................................................................................................................................................... 4

Creacion de un nuevo proyecto.................................................................................................................. 4

Generar Paginamiento ................................................................................................................................... 7

Creacion de beans ....................................................................................................................................... 7

Manage Beans. .............................................................................................................................................. 9

Creacion de la tabla .................................................................................................................................. 12

Agregando el Paginador de Datos o dataPaginator..................................................................... 15

Implementar Selector de Fila. ................................................................................................................... 18

Beans. ............................................................................................................................................................. 18

Manage Beans. ............................................................................................................................................ 18

Agregando Selector de Fila a DataTable .......................................................................................... 21

Agregando opciones tipo selector. ..................................................................................................... 25

Agregar Tabla de objetos Seleccionados. ........................................................................................ 27

Descargar Ejemplo ............................................................................................................................................. 30

Bibliografia ............................................................................................................................................................ 31



INTRODUCCION

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.



OBJETIVO



MANOS A LA OBRA

CREACION DE UN NUEVO PROYECTO

1. Debemos tener abierto netbeans 6.x y seleccionar el icono de nuevo proyecto tal como lo indica en la siguiente imagen.

Imagen 1.1



2. A continuación debemos seguir los siguientes pasos tal como lo muestran las imágenes.

Imagen 1.2 – Selección Web aplicación.

Imagen 1.3 – Nombre y localización del proyecto.



Imagen 1.4 – selección de servidor.

Imagen 1.5 – selección de frameworks.



GENERAR PAGINAMIENTO

En este caso el tutorial está basado sobre un proyecto base1, pero es aplicable a cualquier tipo de proyecto.

CREACION DE BEANS

Para este ejemplo debemos generar el siguiente beans “Producto” dento del paquete “Logic.Entidades” tal como lo muestra la siguiente imagen:

Imagen 2.1.1- Creación nuevo clase java.

Esta clase debe tener la siguiente estructura:

1 http://rapidshare.com/files/430303206/ProyectoBase.rar

http://rapidshare.com/files/430303206/ProyectoBase.rar



Imagen 2.1.2 – Estructura clase Procucto.

Ademas de todos los respectivos setter, getter además se deben generar dos métodos muy importantes mas adelante sabremos para que son utiles:

Imagen 2.1.2 – métodos atributo selected.



MANAGE BEANS.

Para este caso hay dos formas de generar el Manage Beans:

A través de netbeans: Boton derecho sobre el paquete a generar el MB tal como lo muestra la imagen.

Imagen 2.2.1 - nuevo MB

Imagen 2.2.2 – definición de nombre del MB



La segunda opción es generar una clase normal y luego manualmente configurar el archivo faces-config.xml, ubicado en la carpeta Web Pages/WEB-INF de nuestro Proyecto. En este archivo, agregaremos nuestro MB “TablaDatos”.

<managed-bean>

<managed-bean-name>TablaDatos</managed-bean-name>

<managed-bean-class>Logic.Entidades.TablaDatos</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

Una vez Creado nuestro MB agregaremos los siguientes atributos, métodos y constructor.

private List<Producto> productos;//lista de productos que se mostraran en la tabla

public TablaDatos() {

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(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(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;

}



CREACION DE LA TABLA

Ahora es tiempo de mostrar nuestros registros en nuestra página Web. Para ello, puedes trabajar con el archivo creado por defecto plantilla.jspx o crear tu propio archivo JSPX. Así, dentro de este archivo dentro de los tags “<div id=”ingreso”>....</div>” agregaremos nuestro dataTable.

<ice:dataTable id=”TablaProducto”

rows=”5” value=”#{TablaDatos.productos}” var=”item” columnClasses=”tableCol”

>

<ice:column>

<f:facet name=”header”>

<ice:outputText value=”ID Producto”/>

</f:facet> <ice:outputText value=”#{item.id}”/>

</ice:column>

<ice:column>


<ice:outputText value=”Nombre Producto”/>

</f:facet>

<ice:outputText value=”#{item.producto}”/>

</ice:column>

<ice:column>


<ice:outputText value=”Descripción”/>

</f:facet>

<ice:outputText value=”#{item.descripcion}”/>

</ice:column>

<ice:column>


<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 atributo var, 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.



Una vez hecho todos estos pasos podemos compilar y veremos algo como esto.

Imagen 2.3.1 – tabla de datos.



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:

<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>

Una vez compilado y ejecutado el resultado debería ser algo como esto:

Imagen 2.4.1 - Tabla con Paginador.

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 Superior

de la siguiente imagen:



Imagen 2.3.2 – Info sobre Paginacion.

A continuación veremos el código 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, como rowsCountVar, displayedRowsCountVar, pageIndexVar, entre otras como se muestra a continuación .

<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>



IMPLEMENTAR SELECTOR DE FILA.

BEANS.

En este caso ocuparemos el mismo Beans que utilizamos para el ejemplo de paginamiento, es importante que el beans contenga un atributo booleano el cual se llame “selected“ ya que este atributo permite identificar y manejar los ítem que están seleccionados dentro del DataTable.

MANAGE BEANS.

Para este caso modificaremos el MB “TablaDatos” agregando:

Atributos:

// permite comprobar si se puede hacer selección multiple o no

private boolean multiple=false; // permite comprobar si se puede hacer selección multiple o no con ctr + clic private boolean enhancedMultiple=false; //Lista de productos seleccionados private ArrayList<Producto> productosSeleccionados=new ArrayList<Producto>(); //nos permite saber el estado del selector de multiple private String multiRowSelect = “Single”;

Metodos:

/**

Metodo encargado de gestionar el evento cundo uno selecciona una fila

*/

public void rowSelectionListener(RowSelectorEvent event) {

getProductosSeleccionados().clear(); Producto producto; for(int i = 0, max = productos.size(); i < max; i++){ producto = (Producto)productos.get(i); if (producto.isSelected()) {

getProductosSeleccionados().add(producto);

} } } /**

Metodo encargado de gestionar el evento cundo uno selecciona un radiobuton

*/



public void changeSelectionMode(ValueChangeEvent event) {

String newValue = event.getNewValue() != null ? event.getNewValue().toString() : null; multiple = false; enhancedMultiple = false; if (“Single”.equals(newValue)){ getProductosSeleccionados().clear();

// build the new selected list Producto producto; for(int i = 0, max = productos.size(); i < max; i++){

producto = (Producto)productos.get(i); producto.setSelected(false);

} } else if (“Multiple”.equals(newValue)){ multiple = true; } else if (“Enhanced Multiple”.equals(newValue)){ enhancedMultiple = true;

} }

public boolean isMultiple() {

return multiple;

}

public void setMultiple(boolean multiple) {

this.multiple = multiple;

}

public boolean isEnhancedMultiple() {

return enhancedMultiple;

}

public void setEnhancedMultiple(boolean enhancedMultiple) {

this.enhancedMultiple = enhancedMultiple;

}

public String getMultiRowSelect() {

return multiRowSelect;

}



public void setMultiRowSelect(String multiRowSelect) {

this.multiRowSelect = multiRowSelect;

}

public ArrayList<Producto> getProductosSeleccionados() {

return productosSeleccionados;

}

public void setProductosSeleccionados(ArrayList<Producto> productosSeleccionados) {

this.productosSeleccionados = productosSeleccionados;

}



AGREGANDO SELECTOR DE FILA A DATATABLE

En esta etapa debemos tener claro algunos atributos del rowSelector: id permite definir el identificador de nuestro objeto, value permite saber si esta seleccionado o no el objeto para esto se accede a los métodos de Beans Producto isSelected() y setSelected(boolean selected) para cambiar el valor a seleccionado, multiple permite saber si se permite mas de una selección o no y selectionListener método que controla cuando uno presiona o selecciona una fila.

Ahora veremos el codigo necesario para agregar el selector a nuestro Paginamiento.jspx para esto debemos modificar el codigo de la tabla que hicimos para el paginamiento tal como se muestra a continuación:

Agregar No Modificar



<ice:dataTable id=”TablaProducto”

rows=”5” value=”#{TablaDatos.productos}” var=”item” columnClasses=”tableCol”

>

<ice:column>

<ice:rowSelector id=”selected”

value=”#{item.selected}” multiple=”#{TablaDatos.multiple}” enhancedMultiple=”#{TablaDatos.enhancedMultiple}” selectionListener=”#{TablaDatos.rowSelectionListener}” preStyleOnSelection=”false”/>




</ice:column>

<ice:column>



</f:facet>


</ice:column> <ice:column>



</f:facet>






<ice:outputText value=”Precio (S/.)”/>

</f:facet>

<ice:outputText value=”#{item.precio}” />

</ice:column>

</ice:dataTable>



Con esta modificacion ya podremos seleccionar una fila dentro de nuestra tabla tal como lo muestra la siguiente imagen:

Imagen 3.2.1 – Selector fila simple.

Imagen 3.2.1 – Selector fila multiple.



AGREGANDO OPCIONES TIPO SELECTOR.

Con esta opción podremos cambiar en tiempo de ejecución el tipo de selección que queremos hacer para la el DataTable en este caso se debería ver algo asi:

Imagen 3.3.1 – opciones selector

Para agregar este campo debemos agregar este codigo a nuestra paguina:

<ice:panelGroup styleClass=”exampleBox rowSelectorContainer”>

<ice:panelGroup>

<ice:selectOneRadio id=”multipleSelection”

value=”#{TablaDatos.multiRowSelect}” partialSubmit=”true” valueChangeListener=”#{TablaDatos.changeSelectionMode}”>

<f:selectItem itemLabel=”Single” itemValue=”Single” />

<f:selectItem itemLabel=”Multiple” itemValue=”Multiple” />

<f:selectItem itemLabel=”Enhanced Multiple” itemValue=”Enhanced Multiple” />

</ice:selectOneRadio>

</ice:panelGroup> </ice:panelGroup>

Para gestionar el evento cuando uno presiona un radioboton es necesario definir el método que se encarga en este caso es changeSelectionMode que se encuentra en el MB TablaDatos.

Una vez agregado esto nuestro ejemplo se vera algo asi :



Imagen 3.3.2 – opciones selector y tabla.



AGREGAR TABLA DE OBJETOS SELECCIONADOS.

Para finalizar con este tutorial agregaremos una tabla dinámica la cual muestre los productos seleccionados en nuestra tabla paginada. Para esto debemos agregar el siguiente codigo:

<ice:dataTable id=”TablaSelec”

value=”#{TablaDatos.productosSeleccionados}” var=”item” columnClasses=”tableCol”>

<ice:column>




</ice:column>

<ice:column>



</f:facet>





</f:facet>


</ice:column> </ice:dataTable>

En este caso a diferencia de la tabla que generamos para la paginación eliminamos el atributo rows ya que no queremos que la tabla tenga un tamaño definido.



Una vez terminado nuestra tabla veremos algo como esto :

Imagen 3.4.1 – Ejemplo completo sin selección.

Imagen 3.4.2 – Ejemplo completo selección simple.



Imagen 3.4.3 – Ejemplo completo selección múltiple.



DESCARGAS

PROYECTO BASE


PROYECTO FINAL

http://www.megaupload.com/?d=VVOSDIR4

http://rapidshare.com/files/428988272/EjemploPaginacion.rar


http://www.megaupload.com/?d=VVOSDIR4

http://rapidshare.com/files/428988272/EjemploPaginacion.rar



BIBLIOGRAFIA

http://component-showcase.icefaces.org/component-showcase/showcase.iface



Tutorial Paginador de datos

Documents

Transcript of Tutorial Paginador de datos