DisplayTag: Mostrando tablas de forma facil

Muchas veces cuando trabajamos dentro de lo que son aplicaciones web en Java nos toca la tarea de mostrar el contenido de un array o list en forma de tabla, ahora eso no seria un gran problema si contáramos con la posibilidad de usar JSF con alguna de sus implementaciones o quizás usar AngularJs por medio de exponer un servicio que retorne un JSON y este framework se encargue de iterarlo.

Ahora bien, lo antes mencionado seria algo ideal pero que pasa si no contamos con la ventaja de poder modificar nuestro proyecto que se encuentra en la fase de mantenimiento y usa tecnologías como Struts, esto nos representa un problema ya que sin duda no muchos frameworks tienen tags para mostrar tablas por este motivo es que DisplayTag es una buena alternativa ya que no es algo invasivo y tan solo afecta a la vista.

¿Que es?

DisplayTag es una librería open-source la cual nos provee tags para ser usados en nuestros JSP para mostrar de una manera simple nuestras listas o array en forma de tablas, ofreciéndonos funcionalidades como: ordenación, paginacion, exportación a diferentes formatos (pdf, csv, etc).

Ademas esta librería tiene la gran ventaja de obtener los datos desde diferentes scopes (page, request (por defecto), session y application) de manera simple.

¿Como la agrego a mi proyecto?

Para poder usarla dentro de nuestro proyecto primero deberemos tenerla referenciada dentro de nuestro classpath para ello hay varias alternativas:

  1. Descargar la librería manualmente desde aqui
  2. Referenciarla desde Maven o Gradle

A los fines de este post mostraremos como usarla por medio de Maven por lo cual deberemos agregar dentro de nuestro archivo POM lo siguiente:

Debe tenerse en cuenta que la versión de la librería que actualmente esta vigente puede ser superior a la mencionada en este post por lo cual se debería chequear aqui 

¿Como lo uso?

Para ver todas las ventajas que nos provee DisplayTag es mejor hacerlo por medio de un ejemplo, por eso primero veremos un ejemplo de como mostraríamos una tabla usando tan solo los tags de Struts.

Asi se veria una tabla con Struts, como se ve hay que colocar los nombres de las columnas y los valores por separado, ahora vemos como simplificarlo usando DisplayTag:

Como vemos el código es simple, pero veamos mas en detalle cada una de las etiquetas para entender como funciona:

  • display:table Es el tag que indica la apertura de la tabla en ella se pondrán todas las propiedades que tendrá. El atributo name es el nombre que tiene la lista en el request/session y el id es como se llamara internamente cada una de los registros para poder ser usado.
  • display:column Nos indica que vamos a declarar una columna, donde title  es el titulo de la misma y property es el atributo que se quiere mostrar el cual se encuentra dentro de nuestra clase (debe respetarse al igual que en Struts las mayúsculas y minúsculas de los atributos).

Algo que no se encuentra en el codigo para no hacerlo tan largo es que en la parte superior del JSP se debe añadir la declaración para poder usar los tags de la librería el cual es:

¿Como pagino los resultados?

Muchas veces cuando tenemos que mostrar tablas dada la cantidad de registros se nos pide que las paginemos para evitar que ocupen mucho tamaño en el la pagina. Esto con DisplayTag se resuelve de manera muy simple con tan solo añadir el tamaño de la pagina (pageSize) y cual es la url del action (requestURI) que se encarga de obtener los datos nos paginara los resultados.

Vayamos a nuestro ejemplo y agreguemosle lo necesario para que pagine automáticamente:

Veamos como queda nuestra una vez que se encuentra paginada a nivel visual:

DisplayTag Paginacion

DisplayTag Paginacion

Algunas cosas que vale la pena mencionar son:

  • La tabla se ve visualmente poco estética debido a que no hemos definido los estilos de la misma aun
  • Los labels que se encuentran en la parte superior pueden ser modificados a nivel de los textos o formatos que se usan.
  • Esta forma de paginacion es la mas simple pero hay que tener en cuenta que lo que hace es traer todos los registros cada vez que hacemos un click y elegir cuales debemos mostrar, existen formas de hacer con DisplayTag que solo nos traiga y muestre los registros necesarios.

¿Como ordeno los resultados?

Al igual que la paginacion cuando nos toca trabajar con tablas otro punto que es importante es la posibilidad de realizar el ordenamiento con tan solo hacer un click en alguna de las columnas y que en función de eso nos ordene ya sea de forma ascendente o descendente.

DisplayTag soluciona ese problema de manera bien siempre, tan solo debemos indicar en cada una de las columnas que queramos ordenar y cual es el nombre del atributo por el que se quiere ordenar. Pero mejor vayamos al código para poder ver esto de manera mas simple:

Como se puede ver con tan solo agregarle el sortable=”true” y el sortName=”nombreAtributo” nos basta para realizar el ordenamiento.

Al igual que en el punto anterior veamos como nos quedan representados estos cambios en la pantalla:

DisplayTag Ordenacion

DisplayTag Ordenacion

Todos los atributos que posean la propiedad de sortable en true los mostrara como un link y una vez que se haga click en el se ordenara automáticamente.

Algo que se debe mencionar es que al igual que en el punto anterior lo que hace de esta manera DisplayTag es traernos todos los registros y realizar el ordenamiento después, para evitar esto en futuros post veremos como hacerlo mas optimo.

¿Como le cambio los valores a las etiquetas (next, previous)?

Algo que seguramente han podido notar a lo largo de este post es que las barras para navegar la tabla se encuentran en ingles, seguramente nosotros querremos cambiarle el idioma o el texto que muestran para lo cual deberemos crear un archivo llamado display.properties (en el caso de que estén trabajando como Maven lo tendrán que crear dentro de src/main/resources) y en el modificar todos los valores que quieran que se cambien (igualmente se recomienda copiar todas las propiedades de la tabla y solo modificar las necesarias).

Veamos como modificar solo las barras que vemos hasta ahora que están en ingles:

Una vez hecho esto cuando levantemos nuestro servidor nuevamente veremos la pagina de la siguiente manera:

DisplayTag-I8n

DisplayTag-I8n

Para todos aquellos que quieran modificar el código y probarlo o ver como es el archivo display.properties pueden descargarse el código fuente que se uso en este post desde aqui.

Conclusión

A lo largo de este post hemos mostrado alguna de las virtudes que posee DisplayTag como la forma de mostrar las columnas, el ordenamiento y la paginacion de los resultados lo cual lo convierte en una buena opción si los frameworks que estamos usando no nos proveen una buena forma de mostrar nuestras tablas.

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *