¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

Uso del data table en jsf.

Publicado el 11 agosto 2019 por Cristian David Henao Hoyos @chenaooo
Ejemplo Tabla predefinida.
En este laboratorio veremos un ejemplo simple donde se muestra como usar el componente DataTable, este elemento nos permite vincular una tabla de datos a nuestra página así:
Para este primer ejemplo tan solo se vinculará el componente previamente llenado desde nuestra clase bean, más adelante se mostrará como manipular su información de forma dinámica.

Inicialmente crearemos un proyecto JSF con la siguiente estructura:
Como vemos se crean 2 clases java, una corresponde a la clase persona que nos permite procesar a las personas que vamos a mostrar en nuestra tabla y la otra al bean que permitirá gestionar nuestra tabla con sus respectivas columnas y registros.
La clase Persona.java nos provee los datos básicos de la persona que vamos a mostrar en la tabla, aquí agregamos los correspondientes métodos set y get así como un constructor con parámetros para realizar el llenado de personas de forma directa.

La clase TablaBean.java hace referencia a la tabla y la gestión de personas en la misma, los registros que se muestran son almacenados en el ArrayList de tipo persona que para efectos de esta guía es llenado en el constructor.

En el index.xhtml creamos el componente DataTable al cual le asociamos la lista de personas directamente en el value y en las respectivas columnas los atributos del bean que es referenciado en var=”datos”, siendo datos el elemento que representa los datos del objeto Persona en cada fila de la tabla.

Al ejecutarlo tendremos algo así

Como vemos se presenta la información en modo tabla, como aún no vinculamos estilos CSS tan solo apreciamos la estructura en filas y columnas sin ningún tipo de diseño, sin embargo podremos agregar una propiedad “border” a la tabla y un margen teniendo algo así:



Por ultimo sabemos que podemos hacer uso de <h:outputLabel> para presentar la información de una manera más estructurada.

Ejemplo Gestión de Datos en DataTable.
En esta sección continuaremos con el ejemplo anterior donde veremos cómo manipular los datos de la tabla para realizar procesos comunes como registro, modificación o eliminación de información.

Agregar Personas.
Para el registro de personas modificaremos nuestra página index.xhtml a la que le vincularemos el formulario de registro de personas, esto lo hacemos vinculando en un panel grid componentes de ingreso y selección debidamente asociados al objeto “miPersona” al cual se le envían los diferentes atributos de registro, posteriormente se asocia un botón que realiza el llamado a un método “agregarPersona()” que permitirá registrar una nueva persona en nuestro sistema.
Como vemos estos nuevos elementos son agregados antes del DataTable obteniendo un resultado como este:
Después de haber modificado el index, vamos a realizar los cambios necesarios en la clase TablaBean.java, como en este ejemplo continuaremos usando el nivel de alcance por defecto entonces vamos a hacer static la lista de personas con el fin de que esta pueda ser manipulada sin problema, adicionalmente eliminaremos el llenado de la lista ya que la idea es poder registrar personas mediante un formulario de ingreso.

Como vemos al definir la lista como statica creamos su instancia a nivel de clase, no lo hacemos en el constructor ya que este será llamado en diferentes ocasiones por nuestro jsf lo que ocasionaría una nueva instancia de la lista lo que nos haría perder la información que pudiera contener.


Adicionalmente agregamos un objeto de tipo Persona para poder gestionar los datos de registro y agregamos el método “agregarPersona()” que permite adicionar un nuevo elemento a la lista y es llamado desde el botón del jsf, posteriormente generamos una nueva instancia al objeto “miPersona” lo que permitirá limpiar el formulario de registro.

Al ejecutar el sistema veremos el siguiente comportamiento:


Inicialmente el formulario se encuentra vacío y se presenta también el encabezado de nuestra tabla pero sin ningún contenido (recordemos que eliminamos el llenado de la lista), para que no muestre el encabezado cuando aún no hay personas registradas, entonces usamos la propiedad “rendered” donde validamos que el tamaño de la lista sea mayor que cero, en caso contrario no deberá mostrar los encabezados. (Más adelante se tratará en detalle el funcionamiento de esta propiedad)


A medida que vamos agregando personas estas se van almacenando en la lista y presentándolas en el DataTable
Eliminar Personas.
Después de haber registrado con éxito las personas en nuestra lista, podremos eliminarlas de la misma, para esto agregaremos una nueva columna de acciones en nuestro dataTable que contendrá un enlace a el método “eliminarPersona()” que crearemos en nuestro bean

Para esto modificamos el index.xhtml donde después de la columna “Sexo” agregaremos la columna “Acciones”
Como vemos usamos un componente <h:commanLink> y en el action hacemos el llamado al método “eliminarPersona()” al que le enviaremos como parámetro el valor “datos”, recordemos que datos equivale al objeto de la lista que se está mostrando en una fila en específico.

Posteriormente en la clase TablaBean.java agregamos el método “eliminarPersona()” que recibe como parámetro el objeto persona que queremos eliminar, este corresponde a “datos” que enviamos desde el jsf, y equivale a la persona de la fila a la que deseamos eliminar, para posteriormente removerla de la lista.
Al ejecutar el sistema tendremos lo siguiente:
Y cada vez que eliminemos algún registro mediante el enlace correspondiente, la tabla será actualizada
Editar Personas.
Después de haber registrado y eliminado con éxito las personas en nuestra lista, podremos modificarlas, para esto modificaremos nuestra tabla haciéndola editable al momento de querer actualizar alguno de los datos, para eso usaremos nuevamente la propiedad “rendered” que mostrará u ocultará las opciones editables dependiendo de lo que el usuario decida.
Como vemos en cada una de las columnas se agrega un componente <h:inputText> que estará oculto por defecto gracias a la propiedad “rendered” que permite almacenar un dato true o false para mostrar u ocultar el componente al que acompaña.

En nuestro caso “datos.editar” hace el llamado a una variable booleana (editar) que agregamos en la clase Persona, si la propiedad es true entonces mostrará el <h:inputText> para permitir la edición, pero si la propiedad es false (no es true) entonces mostrará el <h:outputLabel>

Eso mismo se deberá hacer para las columnas profesión, salario y sexo respectivamente, donde a esta última en vez de agregarle un <h:inputText> se le agregará un <h:selectOneMenu> ya que en el formulario usamos un combo de selección de la siguiente manera:
De la misma manera se asocia la propiedad rendered para mostrar el combo o mostrar el label dependiendo del caso.
Posteriormente se modifica la columna “Acciones” donde antes solo teníamos un enlace a “Eliminar” ahora agregaremos 2 enlaces más, uno para “editar” y otro para “guardar” la información después de editarla.
Como podemos ver, ahora se cuentan con 3 links a los métodos editar, guardar y eliminar respectivamente, sin embargo editar y guardar cuentan con la propiedad rendered lo que hace que solo 2 de los 3 links sean visibles cada vez (recordemos que el rendered contiene true o false dependiendo de la condición) por lo tanto por defecto siempre aparecerá el enlace a eliminar, pues este no tiene la propiedad rendered, mientras que editar y guardar nunca se verán juntos. (&nbsp; permite agregar un espacio entre los enlaces)

Internamente a nivel gráfico el dataTable se vería así:
Aunque gráficamente se pueden ver todos los componentes juntos, es importante tener muy claro que la propiedad rendered solo mostrará los componentes dependiendo del valor true o false del momento.

Después de modificar el index.xhtml ahora es el turno de modificar la clase Persona.java en la que se agrega la propiedad “editar” que usan los rendered mencionados anteriormente
Como vemos se vincula un nuevo atributo boolean con sus respectivos set y get, adicionalmente para ajustarnos a la estructura del ejercicio, agregamos la propiedad al constructor con parámetros aunque a este punto del ejercicio ya no se utiliza.

De esta manera cada vez que en el index.xhtml se haga rendered="#{datos.editar}" estaría llamando a esta variable lo que permitiría mostrar u ocultar componentes dependiendo del caso.

Por último y ya teniendo los cambios anteriores, procedemos a modificar la clase Bean donde debemos agregar los métodos correspondientes al eliminar y guardar que se invocan desde el campo “Acciones”
Como vemos el método editarPersona() recibe un objeto persona (desde el llamado en el jsf igual que como se hace en el método eliminar) y a este se le modifica la propiedad “editar” enviándole el valor de true, lo que permitirá para ese registro ocultar los <h:outputLabel> y mostrar los <h:inputText> y el <h:selectOneMenu> para realizar la modificación deseada.

Por otro lado el método guardarPersona() se encargará de cambiar cada propiedad “editar” de todos los objetos de la lista a false para que de esta forma se reestablezca el dataTable con los valores de las personas y no con los elementos editables.

Al ejecutar el sistema tendremos lo siguiente:
Y al presionar editar el sistema cambia a:
Como se puede observar, al momento de presionar el enlace a editar, automáticamente se muestran los componentes editables mientras que los no editables se ocultan, de igual forma desaparece el enlace editar para dar paso al enlace de guardar tal como se explicó anteriormente.
 Y Listo!!!
En mi blog y en mi canal les he venido compartiendo material en torno a este gran lenguaje de programación, pueden encontrar muchos artículos y vídeos desde cero, les muestro como descargar las herramientas necesarias para empezar a programar, vamos subiendo cada vez más por los conceptos básicos, pasando por los conceptos de programación orientada a objetos, patrones, hilos, estructuras de datos, acceso a bases de datos entre otros,  hasta construir aplicaciones con interfaces grafías de usuario.

Además podrán encontrar un curso desde cero donde les enseño a crear aplicaciones móviles en android mediante una secuencia de vídeos paso a paso que constantemente se está actualizando.

Y ahora iniciaré la secuencia también desde cero donde nos adentraremos al mundo del java Enterprise edition, les mostraré como configurar el ambiente de desarrollo y como crear sus primeras aplicaciones web con java.

Por eso los invito a que visiten a codejavu.blogspot.com, que visiten mi canal Cristian Henao y que estén muy pendientes de las nuevas secuencias
También te podría Interesar. 
¿Hay algo que quieras anexar o comentar sobre esta entrada?  no dudes en hacerlo.....y si te gustó, te invito a compartir y Suscribirte ingresando al botón "Participar en este sitio" para darte cuenta de mas entradas como esta ;)