Selección múltiple de filas en un datatable con JSF: haciéndolo nosotros mismos.

4
23809

Selección múltiple de filas en un datatable con JSF: haciéndolo nosotros mismos.

0. Índice de contenidos.


1. Introducción

Una vez analizadas la posibilidades que tenemos para
añadir selección
múltiple a nuestros listados en JSF
, puede que los componentes que usamos no se adecúen totalmente a las necesidades de nuestros usuarios o
puede que no estemos usando ninguna librería de terceros, que proporcione dicho soporte. Tanto en un caso como en el otro, la solución es añadir nosotros
mismos dicha funcionalidad a nuestros dataTables.

En este tutorial vamos a examinar dicha posibilidad añadiendo, a un dataTable del estándar, una columna de selección múltiple que permita la selección
de una, varias o todas las filas del listado, esto es, facturas para marcar como pagadas, a través de una casilla de verificación, esto es, un checkBox.

Como véis, la historia de usuario que intentamos resolver es la misma que en el tutorial anterior:
selección múltiple de filas en un datatable con JSF: haciendo uso de librerías de componentes.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.1
  • JSF2 (Mojarra 2.0.4)
  • Apache Tomcat 7.0.6


3. Nuestra selección múltiple.

Lo primero es el fuente de nuestro árbol de componentes JSF:

Lo interesante se encuentra en el primer h:column en el que incluimos dos checkBoxes, uno en la cabecera y otro en cada fila (en cada item del listado) de modo que
produzcan dos eventos de cambio de valor:

  • al pulsar sobre el de la cabecera se seleccionarán o deseleccionarán todas las facturas,
  • pulsando sobre el checkBox de cada una de las filas se hará lo propio con la factura seleccionada

Los eventos se producen a través de Ajax de modo que en la respuesta se rerenderiza todo el formulario (@form), a nosotros nos interesa que se rerenderize el listado de la
parte inferior en el que mostramos las facturas seleccionadas.

Hay un tercer evento en la vista, correspondinete al botón de «facturar» que marcará como facturadas todas las filas seleccionadas.

El soporte del lado del managedBean es el siguiente:

Los aspectos destacados a comentar son los siguientes:

  • hacemos uso de una referencia al dataTable a través del binding al objeto UIData invoicesDataTable, para obtener la fila seleccionada en el dataTable en los
    eventos de cambio de valor, ya hemos visto que tenemos varias formas de
    acceder a la fila seleccionada de un dataTable
    nosotros hemos optado aquí por esta,
  • invoicesSelected mantiene un mapa de facturas que indica las que están seleccionadas y las que no. Dicho mapa no se inicializa, de ahí la necesidad de sobreescribir
    el método get del mismo, para evitar problemas
    de gestión en el evento de cambio de valor
    , en caso contrario se producirían N eventos de cambio de valor de null, que es lo que devolvería el método get de la
    clase HashMap, a false. En dicho método se asigna el valor de seleccionado a las filas si se ha fijado la marca de «seleccionar todos» a través del evento correspondiente.
  • ¿por qué un mapa?, porque con el soporte de EL del que disponemos no podemos invocar a un método del controlador pasándole un parámetro, con lo que la única forma
    de obtener si se ha seleccionado o no una fila es obtener el valor de un mapa, value=»#{invoiceView.invoicesSelected[invoice]}». Hay una segunda opción, que es
    mantenter un atributo selected a nivel de entidad, pero lo desaconsejamos porque si trabajamos con entidades persistibles estamos mezclando lógica de presentación
    con lógica de persistencia y su existencia exige recorrer el listado de entidades más de lo debido con lo que incide en rendimiento.

El resultado a nivel de interfaz visual es el siguiente:

dataTable multiple selection

Aplicándole los estilos corporativos de nuestro cliente, tendríamos las necesidades del mismo cubiertas.


4. Referencias.


5. Conclusiones.

Lo ideal es que esta funcionalidad estuviera encapsulada en un componente de la vista que no supusiera implicaciones en el controlador, para ello tenemos dos
opciones:

  • crear o extender un componente nativo,
  • incluirlo en un componente más ligero, basado en componentes por composición de facelets, como lo que tenemos nosotros en
    wuija.

Recordad que si estáis interesados en el contenido de nuestros tutoriales y tenéis una necesidad formativa al respecto podéis poneros en contacto con nosotros. En Autentia
nos dedicamos, además de a la consultoría, desarrollo y soporte a desarrollo, a impartir cursos de formación de las tecnologías con las que trabajamos.

Un saludo.

Jose

jmsanchez@autentia.com

4 Comentarios

  1. Yo tengo una pregunta. Tengo un proyecto en donde tengo mi View y mi XHTML pero al momento de seleccionar el checkbox y «obtener los seleccionados» me marca que no he seleccionado ninguno, a que se debe, le puse el RowKey, selectioon (id) y el value(lista de datos).

Dejar respuesta

Please enter your comment!
Please enter your name here