Ejercicio 1.2: Trabajar con los componentes Lista de registros relacionales y Tabla de datos

Antes de comenzar, debe haber completado el Ejercicio 1.1: Importación de los recursos necesarios.

El sitio Web de esta guía de aprendizaje utiliza páginas web dinámicas para acceder a orígenes de datos, como bases de datos, y visualiza en la página la información de dichos orígenes de datos. En este ejercicio, configurará la página all_records.jsp para visualizar todos los anuncios clasificados de la base de datos. En las próximos ejercicios, se conectarán las otras páginas a la base de datos, de forma que se podrán crear anuncios clasificados nuevos, editar los antiguos y mostrar una lista filtrada de anuncios.

Esta guía de aprendizaje utiliza dos componentes que conectan páginas a bases de datos utilizando Java Server Faces: registros relacionales y listas de registros relacionales. Estos componentes representan los datos en una base de datos, de forma que los datos se pueden visualizar en la página en forma de tabla de datos o en una tabla HTML corriente. Estos componentes utilizan JavaBeans de acceso a datos; Más información acerca de beans de acceso a datos o Más información acerca de componentes Faces y JavaServer Faces.

Crear una lista nueva de registros relacionales

Mostrar

En estos pasos se creará una lista de registros relacionales para representar todos los anuncios clasificados de la base de datos. Posteriormente podrá conectar a la base de datos y seleccionar la tabla que almacena la información que se necesita en la lista de registros relacionales. Finalmente, visualizará esta lista de registros relacionales en la página en una tabla de datos.

  1. En la vista Explorador de proyectos, expanda Proyectos Web dinámicos > ClassifiedsTutorial > WebContent.
  2. En la carpeta WebContent, efectúe una doble pulsación sobre all_records.jsp. El archivo all_records.jsp se abre en el editor.
  3. Suprima el texto predeterminado Place content here.
  4. En la vista Paleta, pulse en la bandeja Datos para expandirla.
  5. Arrastre el componente Lista de registros relacionales de la paleta al área vacía de contenido.

    Puede que se le solicite guardar el archivo all_records.jsp. Si es así, pulse Aceptar.

    Se abrirá la ventana Añadir lista de registros relacionales.

  6. En el campo Nombre, entre all_recordlist.

    Los nombres de la lista de registros relacionales y del registro relacional deben cumplir el convenio de denominación estándar de Java para nombres de variables (por ejemplo, no pueden contener espacios).

  7. Asegúrese de que la opción Añadir controles de datos esté seleccionada.

    Cuando la opción Añadir controles de datos está seleccionada, el asistente crea una tabla de datos para visualizar la lista de registros en la página. De lo contrario, el asistente solo crea la lista de registros y ninguna representación de esos datos en la página. Por ahora, dejará que el asistente cree la tabla de datos por omisión y la personalizará más adelante. La ventana Añadir lista de registros relacionales será algo como:

    Ventana Añadir lista de registros relacionales

  8. Pulse Siguiente.
  9. En el campo Nombre de conexión pulse Nuevo para crear una conexión nueva a base de datos.

    Aparecerá el diálogo Conexión nueva. Observe que el campo Nombre de conexión se rellena automáticamente con el nombre ClassifiedsTutorial_Con1.

  10. Pulse Crear conexión nueva a BD. Aparecerá la ventana Conexión nueva a base de datos.
  11. Asegúrese de que la opción Elegir un gestor de base de datos y un controlador JDBC esté seleccionada y pulse Siguiente.

Especificación de la información de conexión de la base de datos

Mostrar

Hay que indicar a la lista de registros dónde buscar los datos que se quiere representar. Esto se hace en la ventana Conexión nueva a base de datos. En este caso, se especificará la base de datos Cloudscape que se incluye en el archivo importado en el ejercicio anterior. Una vez creada, esta conexión se utilizará en todo el sitio Web, por lo que sólo es necesario hacer esto una vez en toda la guía de aprendizaje.

  1. En el asistente Conexión de base de datos nueva, especifique el gestor de bases de datos:
    1. Bajo Seleccionar un gestor de bases de datos, expanda Cloudscape.
    2. Seleccione V5.1.
  2. Especifique la ubicación de la base de datos:
    1. Pulse el botón Examinar situado junto a Ubicación de base de datos.
    2. Sitúese en el directorio siguiente:

      <área de trabajo>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database

      Donde <área de trabajo> es el directorio que contiene el área de trabajo en la que está trabajando actualmnte.

    3. Seleccione la carpeta database y pulse Aceptar.

    No es necesario añadir un ID de usuario o contraseña para acceder a la base de datos. El asistente Conexión de base de datos nueva debe tener el aspecto siguiente:

    Ventana Conexión nueva a base de datos
  3. Pulse Finalizar para cerrar el asistente Conexión de base de datos nueva.
  4. En el asistente Conexión nueva, pulse Finalizar. Volverá al asistente Añadir Lista de registros relacionales.
  5. Ahora que ha creado una conexión a la base de datos de Cloudscape, es necesario elegir la tabla o lista de registros a representar. El asistente Añadir lista de registros relacionales muestra las tablas de la base de datos. En esta guía de aprendizaje se utilizará mayormente la tabla W5SAMPLE.ADS.

  6. Pulse sobre la tabla W5SAMPLE.ADS en el campo Tabla.

    Ventana Añadir lista de registros relacionales

    El resto de páginas del asistente le permiten excluir columnas de la lista de registros y seleccionar opciones avanzadas, como definir una clave primaria, añadir relaciones a otras tablas y especificar condiciones de filtrado y clasificación. Aprenderá más acerca de estas páginas en próximos ejercicios.
  7. Pulse Finalizar.

Ajuste de la tabla de datos por omisión

Mostrar

La vista Datos de página muestra ahora una lista de las columnas de la tabla ADS, y el archivo all_records.jsp contiene la visualización de estos datos dentro de una tabla de datos. En este momento, la tabla de datos por omisión contiene demasiada información. Para esta guía de aprendizaje sólo es necesario mostrar el título, descripción, categoría, precio y número de teléfono de cada anuncio clasificado. Siga estos pasos para pulir y reorganizar la tabla de datos:

  1. Pulse en cualquier lugar de la tabla de datos.
  2. Abra la ventana Propiedades.

    La vista Propiedades suele estar en la parte inferior central del entorno de trabajo. Si no puede ver la vista Propiedades, acceda a la barra de menús y pulse Ventana > Mostrar ventana > Propiedades.

  3. En la vista Propiedades, pulse h:dataTable de la lista de códigos HTML a la izquierda de la vista.
  4. En la parte derecha de la vista, pulse la columna ID que se encuentra en Etiqueta y luego pulse Eliminar. La columna ID se elimina de la tabla de datos.
  5. Repita este proceso para eliminar las columnas de la tabla de datos salvo las siguientes: TITLE, DESCRIPTION, MAINCATEGORY, PRICE y PHONE. La vista Propiedades se parecerá a:

    Vista Propiedades

    La página debería ser algo como:

    Aspecto actual de la página

    El orden de las columnas no es apropiado para un anuncio clasificado. El orden siguiente tiene mucho más sentido:

    1. TITLE (TÍTULO)
    2. DESCRIPTION (DESCRIPCIÓN)
    3. MAINCATEGORY (CATEGORÍA PRINCIPAL)
    4. PRICE (PRECIO)
    5. PHONE (TELÉFONO)
  6. Para cambiar el orden de las columnas, vuelva a la lista de columnas de la vista Propiedades. Pulse la etiqueta TITLE y luego Mover arriba hasta que TITLE esté al principio de la lista. La columnas TITLE es ahora la primera de la tabla de datos.
  7. De la misma forma, seleccione las otras columnas de una en una para cambiar el orden. La sección Columnas de la vista Propiedades quedará de la siguiente manera:

    Columnas en la vista Propiedades

  8. Guarde la página.

    En el ejercicio siguiente, Ejercicio 1.3: Prueba del sitio Web, verá el aspecto de esta página en un servidor web real.

    Hay muchas opciones para el formato de tablas de datos y componentes JavaServer Faces. Algunas de estas opciones se cubren en el módulo siguiente, Módulo 2: Añadir características avanzadas. También puede echar un vistazo a las vista Propiedades por su cuenta para ver los distintos componentes de JavaServer Faces de la página (por ejemplo, la tabla de datos y los componentes de salida individuales).

Puede comenzar el Ejercicio 1.3: Prueba del sitio Web.

Comentarios
(C) Copyright IBM Corporation 2000, 2005. Reservados todos los derechos.