Ejercicio 2.2: Dar formato a una tabla de datos
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.
Renombrar cabeceras de columna
En 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.
- Realice una doble pulsación sobre la página all_records.jsp en la
vista Explorador de proyectos.
- Pulse en la cabecera de la columna Maincategory de la tabla de datos.
- En la vista Propiedades, cambie el campo de texto Valor de
Maincategory por Categoría.
- Si quiere, cambie el nombre a las otras columnas.
- Guarde la página.
Dar formato a componentes de salida de JSF
Tambié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.
- Pulse sobre el componente de salida {PRICE} de la página.
- En la vista Propiedades, cambie el Tipo Decimal por Moneda.
- El precio de los elementos se mostrará en estilo de moneda en vez de como
un 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.
- Guarde la página.
Ordenación de los datos
Ahora 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.
- Pulse el botón derecho del ratón sobre all_recordlist (ADS) en la
vista Datos de página y pulse Configurar en el menú contextual. Se abrirá
la ventana Configurar lista de datos.
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.
- En la pestaña Condiciones de esta ventana, pulse la pestaña Ordenar por.
- En el panel Columnas disponibles, pulse sobre MAINCATEGORY.
- Pulse el botón > para mover la columna MAINCATEGORY al panel Ordenar por.
La ventana tendrá este aspecto:

- Pulse Cerrar para aplicar los cambios en el orden.
Los datos ya están ordenados por categoría. Puede ordenar cualquier columna de
la base de datos.
Añadir un paginador
En 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.
- Pulse en cualquier lugar de la tabla de datos.
- En la vista Propiedades, pulse h:dataTable de la lista de códigos
HTML en la parte izquierda de la vista.
- En la vista Propiedades, pulse Opciones de visualización de la lista de códigos
de la parte izquierda.
- En el campo Filas por página entre 5.
- Pulse Añadir un paginador de tipo web. En la parte inferior de la
tabla de datos aparece un dibujo que muestra cómo quedará el paginador.
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.
- Guarde la página.
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.
Diseño de los componentes de un recuadro de grupo como una lista
En 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).
- Arrastre un componente Panel - Recuadro de grupo de la bandeja Componentes
Faces de la paleta a la columna TITLE de la tabla de datos. Se abrirá la ventana Seleccionar tipo.
- Elija Lista como el tipo de Recuadro de grupo en la ventana Seleccionar
tipo, y pulse Aceptar.
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.
- Pulse sobre el Recuadro de grupo para seleccionarlo.
- En la vista Propiedades, cambie Orientación a Vertical.
- Arrastre el componente {TITLE} al recuadro de grupo de lista. El texto de
las instrucciones del recuadro de grupo desaparece una vez haya añadido un
componente.
- Arrastre un componente Imagen de la bandeja Componentes Faces de la
paleta al Recuadro de grupo de lista. Es útil arrastrar el componente de imagen
sobre el borde inferior del Recuadro de grupo para asegurar que la imagen
se colocará debajo del título.
- Pulse sobre el componente de imagen que acaba de añadir.
- Utilice el área Tamaño de la vista Propiedades para establecer la Anchura en 60
píxels y la Altura en 50 píxels. Así se asegura que, independientemente del tamaño de
las imágenes de la base de datos, en la página tendrán siempre el tamaño
60x50.
- Enlace el componente imagen a la columna PHOTO de all_recordlist
arrastrando la columna PHOTO de la vista Datos de página sobre el componente
imagen. Así se consigue que el componente imagen visualice los datos de imagen
de la columna PHOTO de cada registro.
- En la pestaña Básico de la vista Propiedades, pulse sobre el botón
Seleccionar objeto de datos de página
que hay junto al campo Tipo. Se abrirá la ventana Seleccionar objeto de datos de página.
- Pulse sobre el símbolo + para expandir la lista de registros
relacionales de all_recordlist.
- Pulse IMAGETYPE (String).
- Pulse Aceptar.
- Guarde la página.
La página debería ser algo como:

Diseño de los componentes de un recuadro de grupo como una rejilla
Un 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.
- Arrastre un componente Panel - Recuadro de grupo de la bandeja
Componentes Faces de la paleta a la columna DESCRIPTION de la
tabla de datos. Se abrirá la ventana Seleccionar tipo.
- Pulse Rejilla como tipo del componente a añadir y luego Aceptar.
- Pulse sobre el Recuadro nuevo de grupo de rejilla.
- Utilice la vista Propiedades para establecer el número de Columnas
de este recuadro de grupo en 2.
- Arrastre un componente Salida de la bandeja Componentes Faces de la
paleta al Recuadro de grupo de rejilla.
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.
- Pulse sobre el componente Salida (en Page Designer aparece como
outputText) y utilice la vista Propiedades para asignarle el
Valor Descripción:.
- Arrastre el componente {DESCRIPTION} existente en la página al borde inferior del recuadro de
grupo de rejilla.
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.
- Arrastre otro componente Salida de la paleta y suéltelo en la parte
derecha del recuadro de grupo.
- Utilice la vista Propiedades para asignarle el Valor Precio:.
- Arrastre el componente de salida {PRICE} existente a la derecha del texto de
salida Precio.
- De la misma forma, arrastre un componente Salida para la etiqueta para el componente
{PHONE} y llámelo Phone:.
- Arrastre el componente {PHONE} existente en el recuadro de grupo de rejilla a la derecha
del texto de salida de Phone. La página debería ser algo como:

- Arrastre el hiperenlace existente Actualizar listado y suéltelo en la
columna DESCRIPTION, pero no dentro de recuadro de grupo de rejilla.
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.
- Suprima las columnas vacías PRICE, PHONE y UPDATE de la tabla de
datos.
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.
- Pulse sobre la cabecera de la columna Descripción y utilice la vista Propiedades
para cambiar su campo Valor a Detalles.
La página debería ser algo como:

- Guarde la página.
Aplicación de reglas de Hoja de estilo
Las 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.
- Seleccione la tabla de datos pulsando una de las cabeceras de columna.
- En la vista Propiedades, pulse h:dataTable.
- Pulse el botón Todos los atributos
en la parte
superior de la vista Propiedades.
- En Nombre de atributos, pulse el elemento headerClass. Este valor controla el aspecto
de la fila de cabecera de la tabla de datos.
- A continuación pulse el botón Seleccionar clase
que aparece en
el campo Valor por headerClass. 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.
- Expanda la hoja de estilo y pulse .columnHeaderClass.
- Pulse Aceptar.

- A continuación, pulse sobre el elemento rowClasses bajo Nombre de atributo y
después pulse el botón Seleccionar clases
en el campo
Valor para volver a abrir la ventana Seleccionar clases. La opción rowClasses
controla cómo aparecerán las filas en la tabla de datos.
- Expanda la hoja de estilo y elija esta vez las reglas
.rowClass1 y .rowClass2 manteniendo pulsada la tecla
Control mientras las selecciona. Estas dos reglas tiene esquemas
de color distintos y al seleccionar ambas se obtendrán colores alternativos
para las filas.
- Pulse Aceptar.
- Por último, guarde la página y ejecútela en el servidor de prueba.
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.