Visualizar información dinámica en páginas web con JavaServer Faces > Módulo 1: Crear páginas web con conexiones de datos >
< Anterior | Siguiente >

Lección 1.2: Conectarse a una base de datos y visualizar datos en una página Web

En esta lección aprenderá a conectarse a una base de datos y a visualizar registros de datos en una página Web. También aprenderá a añadir una lista de registros relacionales a la página Web.

El sitio Web de esta guía de aprendizaje utiliza páginas Web dinámicas con componentes JavaServer Faces para acceder a una base de datos y visualizar información en la página. Esta guía de aprendizaje utiliza registros relacionales y listas de registros relacionales para representar 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 beans de acceso Java.

Más información sobre los beans de acceso a datos

Los beans de acceso a datos son beans Java que representan a beans de empresa. Se suelen utilizar en programas cliente que utilizan archivos de páginas JavaServer (JSP), servlets o beans de empresa como interfaz con otros beans de empresa. Los beans de acceso evitan la complejidad de la gestión de los ciclos de vida de los bean de empresa. Esto implica que se puede programar un bean de empresa de forma tan sencilla a como programaría beans Java, lo que simplifica los programas cliente de beans de empresa y reduce el tiempo global de desarrollo.

Más información sobre Componentes Faces y JavaServer Faces

JavaServer Faces es una tecnología que proporciona ayuda para la construcción de interfaces de usuario para aplicaciones dinámicas que se ejecutan en un servidor. La infraestructura JavaServer Faces gestiona el estado de la IU en todas las peticiones al servidor y ofrece un modelo sencillo para el desarrollo de eventos activados en el servidor por parte del cliente. JavaServer Faces está basado en una infraestructura Modelo-Vista-Controlador (model-view-controller - MVC). Para JavaServer Faces, esto quiere decir que el controlador es un servlet, el modelo está representado por JavaBeans y la vista se compone de componentes JavaServer Faces con poco o ningún código. El objetivo de este modelo es separar el contenido de su representación.

Herramientas como Componentes Faces ayudan a utilizar esta tecnología en sus aplicaciones Web. Componentes Faces incluye una biblioteca de códigos personalizados de JavaServer Pages (JSP) para expresar la interfaz JavaServer Faces dentro de una página. Este asistente le ayuda a crear archivos JSP que pueden utilizar los componentes Faces. Los componentes Faces permiten desarrollar una aplicación Web arrastrando componentes de una bandeja Faces de la vista Paleta y soltándolos en las páginas Web que esté creando.

Por ejemplo, puede arrastrar un campo de texto de entrada y soltarlo en un formulario de la página. A continuación, puede arrastrar y soltar un botón Someter junto al campo de texto de entrada. Finalmente, puede conectar el campo de texto de entrada a un origen de datos. Esto permitirá a los usuarios finales entrar datos desde la aplicación web en su origen de datos.

Otra ventaja de la construcción de aplicaciones utilizando componentes Faces es que la interfaz de usuario se desarrolla independientemente de la lógica subyacente del programa. Esto quiere decir que las aplicaciones pueden ejecutarse y acceder a datos en distintas plataformas, como navegadores o dispositivos de mano, como agendas electrónicas.
Bandeja Componentes Faces ampliados de la paleta

Añadir una lista de registros relacionales

En esta lección creará una lista de registros relacionales para representar todos los anuncios clasificados de la base de datos. Posteriormente podrá conectarse 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.
  • Los Registros relacionales se conectan a un sólo registro de una base de datos. En este caso, un registro relacional representa un único anuncio clasificado de la base de datos de ejemplo. Mediante el uso de un registro relacional puede crear, editar o suprimir registros.
  • Las listas de registros relacionales se conectan a más de un registro de una base de datos. En este caso, una lista de registros relacionales representa entre 2 y todos los anuncios clasificados de la base de datos de ejemplo.
  • Las Tablas de datos visualizan los datos de una lista de registros relacionales de la página. Las tablas de datos simplemente designan un lugar para las listas de registros; no dan formato a los datos en filas y columnas, como hace una tabla en HTML.
    Más información sobre las tablas de datos

    La tabla de datos es un componente de una página JSP de Faces que tiene objetos de datos, como una lista de registros relacionales.Aunque parezca que una tabla de datos tenga filas y columnas como una tabla HTML, no funciona como una tabla HTML. Si quiere dar formato a los controles de entrada y salida como en una tabla, debe utilizar un Panel - Recuadro de grupo de la bandeja Componentes Faces ampliados de la paleta. Este aspecto se cubre en el Ejercicio 2.2: Dar formato a una tabla de datos

    Como las tablas de datos son componentes Faces y no de HTML, se controlan por medio de la vista Propiedades, no en la vista del Diseñador de páginas (Page Designer). Por medio de la vista Propiedades puede personalizar una tabla de datos de muchas maneras:
    • Añadir, eliminar y cambiar el orden de las columnas
    • Formatear texto y el fondo
    • Añadir cabeceras, pies y márgenes
    • Añadir paginado para la visualización de resultados

Para crear una lista de registros relacionales nueva:

  1. En la vista Explorador de proyectos de la perspectiva Web, expanda 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 Contenido predeterminado de bodyarea.
  4. En la vista Paleta, expanda Bandeja de datos.
  5. Arrastre el componente Lista de registros relacionales de la paleta al área vacía de contenido. Se abrirá la ventana Añadir lista de registros relacionales.
  6. En el campo Nombre, escriba all_recordlist. Los nombres de la lista de registros relacionales y del registro relacional deben cumplir el convenio de denominación estándar 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 tendrá el aspecto siguiente:
    Ventana Añadir Lista de registros relacionales.

    Pulse Siguiente.

  8. en el campo Nombre de conexión de la página siguiente del asistente, pulse Nueva para crear una conexión de base de datos nueva. Se abre el diálogo Conexión JDBC nueva. Marque el botón de selección Crear una conexión nueva y pulse Siguiente.
  9. En la lista Seleccionar un gestor de base de datos, expanda Derby y seleccione 10.1.
  10. En el campo Ubicación de base de datos, pulse Examinar y seleccione <ubicación_de_espacio_de_trabajo>\ClassifiedsTutorial\WebContent\\database, donde <ubicación_de_espacio_de_trabajo> es el directorio del espacio de trabajo actual. Pulse Aceptar para cerrar la ventana Examinar carpeta.
  11. En el campo Ubicación de clase, teclee la ubicación del archivo o los archivos JAR que implementan las clase de controlador JDBC o pulse Examinar para seleccionar la ubicación en el sistema de archivos. Una vez elegida la ubicación de los archivos JAR, pulse Abrir.
  12. Deberá especificar un ID de usuario para acceder a la base de datos. No es necesaria una contraseña. El asistente Conexión de base de datos nueva debe tener el aspecto siguiente:
    Ventana Conexión de base de datos nueva.
  13. En el asistente Conexión JDBC nueva, pulse Finalizar. Volverá al asistente Añadir lista de registros relacionales.
  14. Pulse Configurar conexiones de base de datos del proyecto. Se abre la ventana de propiedades Conexiones JDBC.
  15. Pulse Editar junto a la sección de detalles de la conexión de tiempo de ejecución. Seleccione Utilizar conexión del gestor del controlador como el tipo de conexión de tiempo de ejecución. Pulse Finalizar y pulse Aceptar para volver al diálogo Añadir lista de registros relacionales. Ahora que ha creado una conexión a la base de datos de Derby, 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.
  16. Expanda W5SAMPLE y seleccione ADS. Pulse Siguiente. 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 ejercicios posteriores.
    Diálogo Añadir lista de registros relacionales.
  17. En la página Añadir registro relacional del diálogo, especificará las columnas que desea incluir en la lista de registros relacionales. Pulse Siguiente.
  18. 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 para cada anuncio clasificado. Todas las columnas están seleccionadas de forma predeterminada; pulse para deseleccionar la visualización de todas las columnas excepto de las siguientes:
    • MAINCATEGORY: String
    • TITLE: String
    • DESCRIPTION: String
    • PRICE: BigDecimal
    • PHONE: String
  19. Puede refinar la organización de la visualización de la tabla de datos en la página Web. Para reordenar las columnas, seleccione una columna y pulse las flechas arriba y abajo hasta que la columna esté en la posición deseada.
    Organice las columnas en el orden siguiente:
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
    Pulse Finalizar.
    Ahora la página Web tiene el aspecto siguiente:
    Aspecto actual de la página.
  20. Guarde la página.
En la lección siguiente, 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. 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).

Punto de comprobación de lección

Ha terminado la Lección 1.2. En esta lección ha aprendido a conectarse a una base de datos y a visualizar registros de datos en una página Web mediante una lista de registros relacionales.

< Anterior | Siguiente >