Visualizar información dinámica en páginas web con JavaServer Faces

Esta guía de aprendizaje le enseña a diseñar un sitio Web dinámico que funciona como la sección de anuncios clasificados de un periódico. El sitio Web es una aplicación Web J2EE completa que utiliza componentes JavaServer Faces (JSF) y Objetos de datos de servicio (SDO). Esta aplicación utiliza tecnología JSF para crear páginas Web dinámicas que enlazan con una base de datos que almacena datos de anuncios clasificados. Al arrastrar componentes JSF a sus páginas, puede crear una aplicación Web JSF conocida como aplicación CRUD porque puede crear, leer, actualizar y suprimir registros de una base de datos. Los usuarios del sitio pueden utilizar estas funciones para gestionar las anuncios clasificados en la base de datos.

Una vez seguida hasta el final esta guía de aprendizaje, los usuarios no sólo pueden ver los artículos a la venta sino que también pueden añadir artículos nuevos, cambiar detalles de los artículos (por ejemplo el precio o la descripción) o buscar un artículo específico. Aunque el diseño de este sitio de guía de aprendizaje es simple, los principios y tecnologías que trata también se utilizan en sitios Web más grandes y complicados.

Objetivos de aprendizaje

Esta guía de aprendizaje está dividida en dos módulos, cada uno con sus propios objetivos de aprendizaje. Puede optar por seguir cualquiera de los dos módulos o ambos. Dentro de cada módulo, debe realizar los ejercicios para que el sitio Web funcione adecuadamente.

Módulo 1: Crear páginas web con conexiones de datos

En este módulo aprenderá a configurar una conexión con una base de datos y visualizar la información de la base de datos en una página Web. En este módulo, podrá:

Conectar páginas Web a una base de datos.
Crear páginas que visualicen, creen, editen y supriman registros de la base de datos.
Enviar datos de una página a otra.

Módulo 2: Añadir características avanzadas

En este módulo aprenderá a utilizar métodos potentes para utilizar datos de una base de datos. En este módulo, podrá:

Dar formato a registros de bases de datos de una página Web
Añadir un componente que permite subir archivos a una base de datos desde una página Web
Navegar automáticamente de página a página
Automatizar algunas tareas de administración de base de datos

Cuando esté listo, inicie el Módulo 1: Crear páginas Web con conexiones de datos.

Tiempo necesario

Total: 3 horas y 30 minutos

Módulo 1: 2 horas

Módulo 2: 1 hora y 30 minutos

Nivel de habilidad

Intermedio

Público

Desarrolladores de aplicación Web, diseñadores de interfaz de usuario Web

Requisitos del sistema

Para seguir esta guía de aprendizaje, primero debe instalar y configurar un servidor de tiempo de ejecución. Esta guía de aprendizaje se ha probado con los servidores siguientes:

IBM WebSphere Application Server, versiones 6.0, 6.1 y 7.0

Para seguir esta guía de aprendizaje, debe instalar las herramientas SDO. Para instalar las herramientas SDO, en Installation Manager, pulse Modificar. En la lista de características, pulse IBM Rational Application Developer for WebSphere Software 7.5.0 > Herramientas de desarrollo Web. Seleccione SDO - Mediadores de Domino y JDBC y pulse Modificar.

Prerrequisitos

Para completar esta guía de aprendizaje debe estar familiarizado con:

Conceptos básicos de diseño web, como sitios web, páginas Web, navegadores y servidores.
Cómo crear una página web estática sencilla
Los elementos de una página web, como tablas, hiperenlaces, formularios e imágenes.
Términos de bases de datos, como tablas, registros, columnas y campos.

También será de ayuda si se sabe:

Cómo utilizar las perspectivas y vistas del entorno de trabajo.
Cómo editar el código HTML para una página Web.

Resultados esperados

Una vez finalizada la aplicación Web, la página inicial tendrá el aspecto de la imagen siguiente. La navegación del sitio Web que se añade a las páginas Web a través de la plantilla del sitio, los enlaces a las páginas que permiten crear un anuncio nuevo o ver todos los anuncios. La acción de fila de la tabla que se visualiza a continuación le lleva a una página de actualización en la que puede cambiar la información asociada a un anuncio determinado.