USO DE LA TABLA DE DATOS EN JSF.

Ejemplo de tabla predefinida.
En esta práctica de laboratorio veremos un ejemplo simple que muestra cómo usar el componente DataTable, este elemento nos permite vincular una tabla de datos a nuestra página de esta manera:

Para este primer ejemplo, solo el componente precargado se vinculará desde nuestra clase de bean, luego mostrará cómo manipular su información dinámicamente.

Inicialmente, vamos a crear un proyecto JSF con la siguiente estructura:

Como vemos se crean 2 clases java, una corresponde a la clase person que nos permite procesar a las personas que vamos a mostrar en nuestra tabla y la otra al bean que nos va a permitir manejar nuestra tabla con las respectivas columnas y registros.
La clase Person.java nos proporciona los datos básicos de la persona que vamos a mostrar en la tabla, aquí agregamos los métodos set y get correspondientes, así como un constructor con parámetros para poblar personas directamente.

La clase TablaBean.java hace referencia a la tabla y la gestión de personas en ella, los registros que se muestran se almacenan en el tipo de persona ArrayList que, a efectos de esta guía, se rellena en el constructor.

En index.xhtml creamos el componente DataTable al cual asociamos la lista de personas directamente en el valor y en las respectivas columnas los atributos del bean que se referencia en var="data", siendo data el elemento que representa los datos de el objeto Persona en cada línea de la tabla.

Al ejecutarlo tendremos algo como esto

Como podemos ver, as informações são apresentadas no modo de tabela, pois ainda não vinculamos os estilos CSS, apreciamos apenas a estrutura em linhas e colunas sem nenhum tipo de design, porém podemos adicionar uma propriedade “border” à tabela e uma margem tendo algo así:

Finalmente sabemos que podemos hacer uso de para presentar la información de una manera más estructurada.

Ejemplo de 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 dar de alta, modificar o eliminar información.

Añadir personas.
Para dar de alta personas modificaremos nuestra página index.xhtml a la que enlazaremos el formulario de alta de personas. Esto lo hacemos vinculando los componentes de entrada y selección en un panel grid debidamente asociado al objeto “myPerson” al que se envían los diferentes datos, se da de alta una nueva persona en nuestro sistema.

Como vemos estos nuevos elementos se agregan antes del DataTable obteniendo un resultado como este:

Después de modificar el índice, hagamos los cambios necesarios en la clase TableBean.java, porque en este ejemplo seguiremos usando el nivel de alcance predeterminado, así que hagamos estática la lista de personas para que pueda manipularse sin problemas, adicionalmente eliminar el relleno de lista ya que la idea es poder registrar personas a través de un formulario de registro.

Como podemos ver, al definir la lista como estática, creamos su instancia a nivel de clase, no hacemos esto en el constructor, ya que nuestro jsf lo llamará en diferentes ocasiones, lo que provocaría una nueva instancia de la lista, lo que provocaría perder la información que pudiera contener.

Adicionalmente agregamos un objeto de tipo Person para poder administrar los datos de registro y agregamos el método “aggregarPersona()” que permite agregar un nuevo elemento a la lista y se llama desde el botón jsf, posteriormente generamos una nueva instancia de el objeto “minhaPersona” que permitirá la limpieza del formulario de registro.


Al ejecutar el sistema veremos el siguiente comportamiento:

Inicialmente el formulario está vacío y también se muestra el encabezado de nuestra tabla pero sin ningún contenido (recuerde que eliminamos el llenado en la lista), para que el encabezado no se muestre cuando aún no hay personas registradas, entonces usamos el “ renderizado” donde validamos que la longitud de la lista sea mayor que cero, de lo contrario no debería mostrar las cabeceras. (El funcionamiento de esta propiedad se discutirá en detalle más adelante)

A medida que agregamos personas, se almacenan en la lista y se presentan en el DataTable

Excluir personas.
Después de que hayamos registrado exitosamente a las personas en nuestra lista, podemos eliminarlas de ella, para esto agregaremos una nueva columna de acciones en nuestra tabla de datos que contendrá un enlace al método “eliminarPerson()” que crearemos en nuestro bean

Para ello modificamos el index.xhtml donde después de la columna “Sexo” agregaremos la columna “Acciones”

Como podemos ver, usamos un componente y en la acción llamamos al método “eliminarPersona()” al cual le enviaremos como parámetro el valor “dato”, recordando que dato es equivalente al objeto de la lista que se está desplegando en una línea específica.

Posteriormente, en la clase TablaBean.java, agregamos el método “eliminarPersona()” que recibe como parámetro el objeto persona que queremos eliminar, esto corresponde a los “datos” que enviamos desde el jsf, y es equivalente a la persona en la línea que queremos eliminar, para luego eliminarla de la lista.

Al ejecutar el sistema tendremos lo siguiente:

Y cada vez que eliminemos un registro a través del enlace correspondiente, la tabla se actualizará

Editar personas.
Luego de haber registrado y eliminado exitosamente personas de nuestra lista, podemos modificarlas, para eso modificaremos nuestra tabla haciéndola editable cuando queramos actualizar algunos de los datos, para eso usaremos nuevamente la propiedad “renderizado” que mostrará u ocultar las opciones editables en función de lo que decida el usuario.

Como podemos ver en cada una de las columnas, se añade un componente el cual estará oculto por defecto gracias a la propiedad “renderizado” que permite almacenar datos verdaderos o falsos para mostrar u ocultar el componente que lo acompaña.

En nuestro caso, “data.edit” hace una llamada a una variable booleana (edit) que agregamos en la clase Person, si la propiedad es verdadera, mostrará la para permitir la edición, pero si la propiedad es verdadera falsa (no verdadera), entonces mostrará el

Lo mismo se debe hacer para las columnas de profesión, salario y sexo respectivamente, donde en lugar de agregar un a este último se le añadirá un ya que en el formulario usamos un combo de selección de la siguiente ruta:

Asimismo, la propiedad renderizada está obligada a mostrar el combo o mostrar la etiqueta según sea el caso.

Posteriormente se modifica la columna “Acciones” donde antes solo teníamos un enlace para “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 hay 3 enlaces para los métodos editar, guardar y eliminar respectivamente, sin embargo, editar y guardar tienen la propiedad renderizada que hace que solo 2 de los 3 enlaces sean visibles a la vez (recuerde que el renderizado contiene verdadero o falso dependiendo de la condición), por lo que, de forma predeterminada, el enlace de eliminación siempre aparecerá ya que no tiene la propiedad procesada, mientras que editar y guardar nunca se verán juntos. (le permite agregar un espacio entre los enlaces)

Internamente a nivel gráfico, la tabla de datos se vería así:

Aunque gráficamente puedes ver todos los componentes juntos, es importante dejar muy claro que la propiedad renderizada solo mostrará los componentes dependiendo del valor verdadero o falso en ese momento.

Después de modificar el index.xhtml, ahora es el momento de modificar la clase Person.java, en la que se agrega la propiedad "editar" utilizada por el renderizado mencionado anteriormente.

Como podemos ver, un nuevo atributo booleano está vinculado a su respectivo set y get. Además, para ajustarnos a la estructura del ejercicio, agregamos la propiedad al constructor parametrizado, aunque ya no se usa en este punto del ejercicio.

De esta forma, cada vez que se haga render=”#{data.edit}” en index.xhtml, estaría llamando a esta variable, lo que permitiría mostrar u ocultar componentes según el caso.

Finalmente, y ya con las alteraciones anteriores, procedemos a modificar la clase Bean donde debemos agregar los métodos correspondientes para borrar y guardar que se llaman desde el campo “Acciones”.

Como vemos, el método editPersona() recibe un objeto persona (de la llamada jsf, tal y como se hace en el método delete) y se modifica su propiedad “edit” enviándole el valor true, que permitirá este registro para ocultar el y mostrar el y el para realizar el cambio deseado.

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

Al ejecutar el sistema tendremos lo siguiente:

Y al pulsar editar el sistema cambia a:

Como se puede observar, cuando se hace clic en el enlace de edición, los componentes editables se muestran automáticamente mientras que los no editables se ocultan, así mismo el enlace de edición desaparece para dar paso al enlace de guardar como se explicó anteriormente.

¡¡¡Y pronto!!!

En mi blog y en mi canal he estado compartiendo material sobre este gran lenguaje de programación, puedes encontrar muchos artículos y vídeos desde ceroTe 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 objetosestándares, temasestructuras de datos, acceso a bases de datos entre otros, a la construcción aplicaciones con interfaces de usuario.

También puedes encontrar un curso desde cero donde enseño a crear aplicaciones móviles en android a través de una secuencia de video paso a paso que se actualiza constantemente.

Y ahora también comenzaré la secuencia desde cero donde ingresaremos al mundo de Java Enterprise Edition, le mostraremos cómo configurar el entorno de desarrollo y cómo crear sus primeras aplicaciones web con Java.

Por eso te invito a visitar codejavu.blogspot.com, a visitar mi canal cristian henao y que estan muy pendientes de las nuevas secuelas

También te puede interesar.

¿Hay algo que quieras añadir o comentar sobre esta entrada? siéntete libre de hacer….y si te gusto te invito a compartirlo y Suscríbase haciendo clic en el botón "Unirse a este sitio" para escuchar más publicaciones como esta 😉