Antes de comenzar a dar formato a la tabla de datos, debe haber completado todo el Módulo 1: Creación de páginas web con conexiones de datos o el Ejercicio 2.1: Importación de los recursos necesarios.
La tabla de datos de la página all_records.jsp tiene un aspecto utilitario. Visualiza todos los registros de la base de datos así como los enlaces a otras páginas, que es lo que se quería, pero no es muy atractiva. En este ejercicio se mejorará esta tabla de datos añadiendo elementos como un paginador, reglas de estilo e imágenes de los elementos a la venta.
MostrarEn muchos casos no se quiere que las cabeceras de columna de la tabla de datos sean los mismos nombres que en la base de datos. Los pasos siguientes muestran cómo cambiar el nombre de la cabeceras de columna de la tabla de datos a nombres más apropiados.
MostrarTambién puede dar formato a componentes de salida. En estos pasos, se dará formato al componente de salida {PRICE} (PRECIO) para que aparezca como un valor monetario en vez de como número normal.
Hay otros estilos y formato disponibles para los distintos tipos de datos, como porcentaje, fecha y hora. También se puede personalizar el formato de un componente de salida para que muestre un tipo de datos que no esté en la vista Propiedades, como pueda ser un número de teléfono.
MostrarAhora mismo, los datos de la lista no están ordenados. Para proporcionar a los usuarios una lista de anuncios más organizada, ordenaremos la lista de registros por categoría, de forma que los elementos similares se agrupen.
Si aparece un mensaje de aviso indicando que no se ha podido establecer la conexión a la base de datos, es porque ha dejado el servidor en ejecución después de probar el sitio Web. Si así fuera, pulse cancelar en los diálogos y detenga el servidor según se explica en Detener el servidor en el Ejercicio 1.3: Prueba del sitio Web.
La ventana tendrá este aspecto:

Los datos ya están ordenados por categoría. Puede ordenar cualquier columna de la base de datos.
MostrarEn vez de mostrar todos los registros de una vez en la tabla de datos, puede utilizar un paginador. El paginador divide automáticamente los registros en páginas de un tamaño establecido, sin tener que crear nuevos archivos JSP para el proyecto.
La visualización del paginador en el Diseñador de páginas (Page Designer) es una imagen de posición, y no refleja realmente las páginas que se visualizarán, ya que sólo se puede determinar cuando la página se carga en un navegador.
Puede probar distintos estilos de los componentes Paginador y Estadísticas de página para buscar la que mejor se ajuste a su diseño de página.
MostrarEn vez de tener un componente de salida en cada columna de la tabla de datos, se pueden combinar elementos dentro de las columnas para generar un diseño más atractivo. Se utilizará un Recuadro de grupo para organizar los componentes de una forma parecida al uso de una tabla HTML oculta. Concretamente, tras añadir el componente imagen para mejorar visualmente el sitio, tomaremos la mayoría de la información de texto de cada anuncio y lo colocaremos en una única columna de la tabla de datos, que tendrá como etiqueta DETAILS (DETALLES).
Un Recuadro de grupo de lista diseña los componentes que tiene dentro en una única columna o fila y se puede orientar vertical u horizontalmente.
La página debería ser algo como:

MostrarUn Recuadro de grupo también puede organizar componentes en formato de tabla. Un Recuadro de grupo de tipo Lista sólo puede tener una fila o columna, pero un Recuadro de grupo de tipo Rejilla puede tener varias filas o columnas. En estos pasos, se moverán los componentes {PRICE} y {PHONE} a la columna DESCRIPTION de la tabla de datos e incluiremos etiquetas para ellos.
Este componente de salida será una etiqueta para la descripción del elemento a la venta. Cada componente de salida tendrá una etiqueta como esta en la celda izquierda de la tabla.
Si tiene problemas arrastrando los componentes al lugar adecuado del recuadro de grupo, pruebe pulsando el botón del ratón y observe el cursor. La ubicación del cursor en el recuadro de grupo indica el lugar en que aparecerá el componente cuando suelte el botón del ratón. En este ejercicio, debe soltar el botón del ratón cuando el cursor esté a la derecha del componente previo.

La mejor
forma de hacer esto es mantener pulsado el propio icono del enlace
y
arrastrarlo directamente bajo el recuadro de grupo de rejilla.
De esta
forma se moverá tanto la etiqueta de texto como el icono de enlace, manteniendo
así la funcionalidad del enlace. Si se mueve el enlace o el texto por separado,
el enlace ya no funcionará. Si ocurriera esto, pulse Editar > Deshacer
en la barra de menús y vuelva a intentarlo.
Para suprimir una columna, pulse sobre la columna y abra la vista Propiedades. A continuación pulse h:dataTable de la lista de códigos HTML que hay a la izquierda de la vista, seleccione la columna que quiere eliminar de la lista de la derecha de la vista y pulse Eliminar.
La página debería ser algo como:

MostrarLas Hojas de estilo en cascada (cascading style sheets - CSS) no son solo la mejor forma de controlar el aspecto de un sitio Web, sino que también controlan el aspecto de componentes individuales JavaServer Faces. En la siguiente sección se utilizar el archivo CSS proporcionado en el proyecto para cambiar el aspecto de la página. Concretamente, se aplicará una regla a las cabeceras de columna y dos reglas a las filas para crear un efecto de color alternativo que permitirá distinguir cada fila de la tabla de datos.
Se abre la ventana Seleccionar clase en la que se muestran todos los estilos disponibles en las hojas de estilo del proyecto. En este momento sólo hay una hoja de estilo en este proyecto.

Si no está familiarizado con la ejecución de las aplicaciones en el servidor, consulte el Ejercicio 1.3: Prueba del sitio Web.
Cuando pruebe la página, se debería ver así:

Hemos aprendido algunos trucos que se pueden utilizar para transformar una tabla en algo un poco más vistoso.
Ya puede continuar con el Ejercicio 2.3: Uso del componente subida de archivos.