go postal. El formulario también tiene un botón 

Enviar

 para enviar los datos al servidor, y un botón 

Clear

 para 

restablecer los campos del formulario. La aplicación almacena la información de la libreta de direcciones en una 
base de datos llamada 

LibretaDirecciones

, la cual tiene una sola tabla llamada 

Addresses

. (En el directorio 

de ejemplos para este capítulo proporcionamos esta base de datos. Puede descargar los ejemplos de 

www.deitel.

com/books/jhtp7

). Este ejemplo también introduce el componente JSF 

Tabla

, el cual muestra las direcciones de 

la base de datos en formato tabular. En breve le mostraremos cómo confi gurar el componente 

Tabla

.

27.2.1 Creación de una aplicación Web que muestra datos de una base 
de datos

Ahora le explicaremos cómo crear la GUI de la aplicación 

LibretaDirecciones

 y establecer un enlace de datos 

que permita al componente 

Tabla

 mostrar información de la base de datos. Más adelante en esta sección presenta-

remos el archivo JSP generado, y hablaremos sobre el archivo de bean de página relacionado en la sección 27.2.2. 
Para crear la aplicación 

LibretaDirecciones

, realice los siguientes pasos:

Paso 1: Crear el proyecto

En Java Studio Creator 2, cree un proyecto 

Aplicación web JSF

 llamado 

LibretaDirecciones

. Cambie el nom-

bre a los archivos JSP y de bean de página a 

LibretaDirecciones

, usando las herramientas de refactorización.

Paso 2: Crear el formulario para la entrada del usuario

En modo 

Diseño

, agregue un componente 

Texto estático

a la parte superior de la página que contenga el texto 

"Agregaruncontactoalalibretadedirecciones:"

 y utilice la propiedad 

style

 del componente para esta-

blecer el tamaño de la fuente en 

18px

. Agregue seis componentes 

Campo de texto

a la página y cambie su nombre 

a

pnombreCampoTexto

,

apaternoCampoTexto

,

calleCampoTexto

,

ciudadCampoTexto

,

estadoCampoTexto

 y 

cpCampoTexto

. Establezca la propiedad 

required

 de cada 

Campo de texto

 en 

true

; para ello seleccione el com-

ponente

Campo de texto

 y después haga clic sobre la casilla de verifi cación de la propiedad 

required

. Etiquete 

cada

Campo de texto

 con un componente 

Etiqueta

 y asocie ese componente con su correspondiente 

Campo

de texto

. Por último, agregue los botones 

Enviar

 y 

Borrar

. Establezca la propiedad 

primary

 del botón 

Enviar

 a 

true

, para hacer que resalte más en la página que el botón 

Borrar

, y para permitir que el usuario envíe un nuevo 

contacto, al oprimir 

Intro en vez de hacer clic en el botón 

Enviar

. Establezca la propiedad 

reset

 del botón a 

true

, para evitar la validación cuando el usuario haga clic en el botón 

Borrar

. Como vamos a borrar los campos, 

no deseamos asegurarnos que contengan información. Hablaremos sobre el manejador de acciones para el botón 

Enviar

 después de presentar el archivo de bean de página. El botón 

Borrar

 no necesita un método manejador de 

acciones, ya que al establecer la propiedad 

reset

 a 

true

 el botón se confi gura de manera automática para resta-

blecer todos los campos de entrada de la página. Cuando haya terminado estos pasos, su formulario deberá verse 
como el de la fi gura 27.1.

Paso 3: Agregar un componente Tabla a la página

Arrastre un componente 

Tabla

 de la sección 

Básicos

 de la 

Paleta

 a la página, y colóquelo justo debajo de los 

dos componentes 

Botón

. Cambie su nombre a 

direccionesTabla

. El componente 

Tabla

 da formato y muestra 

Figura 27.1

  |  Formulario de la aplicación 

LibretaDirecciones

 para agregar un contacto.

27.2 Acceso a bases de datos en las aplicaciones Web 

1175

27_MAQ_CAP_27_DEITEL.indd1175

5/8/084:17:20PM