En el anterior capítulo (Displaytag: para mostrar tablas (I)) vimos una pequeña introducción a la librería de tags DisplayTag y una guía sencilla de instalación. En este post veremos algunos usos sencillos.
Uso básico
La forma más simple de utilizar DisplayTag es introduciendo en la request una lista que contenga los objetos sobre los que iterar y, posteriormente usar la etiqueta para mostrar el contenido de la lista. Las columnas no se nombran explícitamente. Con que haya métodos getter sobre los atributos sería suficiente.
Por ejemlo, pensemos que tenemos una lista llamada listaUsuarios que contiene cinco beans Usuario. Cada usuario tiene los atributos nombre, telefono y email. Después de cargar toda la lista con los beans, simplemente tenemos que hacer lo siguiente en nuestro .jsp:
<% request.setAttribute( "lista", listaUsuarios)); %>
<display:table name="lista" />
El resultado será una tabla con una fila por cada usuario. La tabla estará bien formada, con sus elementos thead y tfoot, sus filas y sus columnas, como se muestra abajo (los estilos CSS sólo están para que se vea mejor la tabla, más adelante se verá cómo cambiarlos):
| Nombre |
Email |
Telefono |
| Usuario1 |
email1@test.es |
123456789 |
| Usuario2 |
email2@test.es |
123456789 |
| Usuario3 |
email3@test.es |
123456789 |
| Usuario4 |
email4@test.es |
123456789 |
| Usuario5 |
email5@test.es |
123456789 |
Si quisiéramos variar el órden de las columnas, ponerle otros nombres en la cabecera, cambiar los estilos o lo que sea, tendremos que utilizar más funcionalidades de la librería.
Columnas y títulos
Si en nuestro ejemplo queremos que salga primero el nombre, luego el teléfono y después el e-mail y, además, queremos que ponga "Nombre de usuario" en lugar de "Nombre", y "correo electrónico" en lugar de "Email", tendremos que añadir el orden de las columnas y los títulos al .jsp de la siguiente forma:
<display:table name="lista" />
<display:column property="nombre" title="Nombre de usuario" />
<display:column property="telefono" title="Teléfono" />
<display:column property="email" title="Correo electrónico" />
</display:table>
Ahora la tabla se mostraría así:
| Nombre de usuario |
Teléfono |
Correo electrónico |
| Usuario1 |
123456789 |
email1@test.es |
| Usuario2 |
123456789 |
email1@test.es |
| Usuario3 |
123456789 |
email1@test.es |
| Usuario4 |
123456789 |
email1@test.es |
| Usuario5 |
123456789 |
email1@test.es |
Estilos
Aplicaremos estilos CSS a la tabla para que quede como nosotros queremos. DisplayTag le pone clases CSS automáticamente a algunos elementos para que se muestren en HTML. Los estilos que nos da son:
- odd: Asignado a tr de las filas impares
- even: Asignado a tr de las filas pares
- sorted: Asignado a la th de la columna
- order1: Asignado al th de la columna si su orden es ascendente
- order2: Asignado al th de la columna si su orden es descendente
- sortable: Asignado al th tag de una columna si se puede ordenar por ella (pinchando en ella)
Por ejemplo, si queremos que nuestra tabla se parezca a las anteriores, que salgan distintos colores para filas pares e impares y que la cabecera tenga fondo azul y letra blanca, incluiremos el siguiente código en nuestro CSS:
thead tr {
background-color: #0A3C68;
color: #FFFFFF;
font-size: 11px;
}
.odd {
background-color:#CCCCCC;
}
.even {
background-color:#EEEEEE;
}
Podremos personalizar nuestras tablas para que se asemejen al layout de una página web en concreto o para que su lectura sea más clara. Sólo hace falta un poco de gusto para dejar una tabla bonita con DisplayTag.
En el próximo capítulo veremos la paginación y más usos: Ir a siguiente capítulo