introducciÓn a java server faces jsf - wad1 - home · · 2012-05-29introducciÓn a java server...

RUEDA TORRES DULCE CAROLINA

3CM2

JSF JAVA SERVER

FACES

WEB APPLICATION DEVELOPMENT

INTRODUCCIÓN A JAVA SERVER FACES JSF

Web Application Development

2 RUEDA TORRES DULCE CAROLINA

JavaServer Faces (JSF) es una interfaz de usuario (UI) para las aplicaciones

web Java. Está diseñado para aliviar considerablemente la carga de la

escritura y mantenimiento de las aplicaciones que se ejecutan en un

servidor de aplicaciones Java y prestar sus interfaces de usuario de nuevo

a un cliente de destino. JSF proporciona facilidad de uso de las siguientes

maneras:

o Hace que sea fácil de construir una interfaz de usuario de un

conjunto de componentes de interfaz reutilizables

o Simplifica la migración de los datos de las aplicaciones hacia y

desde la interfaz de usuario

o Ayuda a administrar el estado de la interfaz de usuario a través de

peticiones al servidor

o Proporciona un modelo simple para el cableado de los eventos

generados por el cliente al código de la aplicación del lado del

servidor

o Permite que los componentes de interfaz de usuario que se construye

fácilmente y volverse a utilizar

1. ADICIÓN DE JSF 2.0 A UNA APLICACIÓN WEB

Comenzamos abriendo el proyecto de aplicación web jsfDemo en el

IDE. Una vez con el proyecto abierto en el IDE, podemos agregar

compatibilidad con para utilizar el marco la ventana Propiedades del

proyecto.

1. Damos clic en Open Project ( ), situado en la barra de

herramientas principal del IDE.

http://netbeans.org/kb/docs/web/jsf20-intro.html#requiredSoftware




2. En el cuadro de diálogo Abrir proyecto, vamos a la ubicación en el

equipo donde se almacena el proyecto. Lo seleccionamos y damos

clic en Abrir proyecto para abrirlo en el IDE.

3. Ejecutamos el proyecto para ver cómo se ve en un navegador. El

navegador se abre para mostrar la página de bienvenida

( index.xhtml ).




4. Al hacer clic en el botón Enviar, la página de respuesta

( response.xhtml ) muestra lo siguiente:

En la actualidad las páginas de bienvenida y la respuesta son

estáticos y, junto con el stylesheet.css archivo y duke.png imagen, son

los archivos de la aplicación sólo se puede acceder desde un

navegador.

5. En la ventana de proyectos seleccionamos el proyecto y damos Clic

derecho, después clic en propiedades.




6. Seleccionamos la categoría de Frameworks, a continuación, damos

clic en el botón Agregar. En el cuadro de diálogo que aparece,

seleccionamos JavaServer Faces, clic en Aceptar. Después de

seleccionar JavaServer Faces, hay varias opciones de configuración

disponibles. En la pestaña Librerias, puede especificamos las

bibliotecas 2.0.La opción por defecto es el uso de las bibliotecas

incluidas en el servidor. Sin embargo, el IDE también los paquetes de

las bibliotecas JSF 2.0.




7. Damos clic en la pestaña de Configuración. Podemos especificar

cómo el servlet Faces está registrado en el descriptor de despliegue

del proyecto. También podemos indicar si desea Facelets o páginas

JSP para ser el utilizado en el proyecto.

8. Damos clic en Aceptar para finalizar los cambios y salir de la ventana

Propiedades del proyecto.Después de añadir soporte JSF para el

proyecto, el descriptor de despliegue del proyecto web.xml se ha

modificado para tener el siguiente aspecto.




2. CREACIÓN DE UN MANAGED BEAN

En cuanto a la página estática producida a partir de la ejecución del

proyecto, se necesita un mecanismo que determine si un número

introducido por el usuario coincide con el seleccionado en ese momento,

y devuelve la visión de que es apropiado para este

resultado. Utilizarememos el IDE para crear un Managed Bean para este

fin. Las páginas de Facelets que se crean a continuación se necesitan para

acceder al número que el usuario escribe, y la respuesta generada.

USANDO EL MANAGED BEAN WIZARD

1. En la ventana de Proyectos, damos clic en el nodo jsfDemo y

seleccionamos Nuevo> JSF Managed Bean.

2. En el asistente, escriba lo siguiente:

Nombre de clase: UserNumberBean

Paquete: guessNumber

Nombre: UserNumberBean

Ámbito de aplicación: Sesión

http://netbeans.org/kb/docs/web/jsf20-intro.html#staticPage




3. Damos clic en Finalizar, la clase UserNumberBean se genera y se

abre en el editor.




CREACIÓN DE UN CONSTRUCTOR

El constructor de UserNumberBean debe generar un número aleatorio

entre 0 y 10 y almacenarlo en una variable de instancia. Esta parte

constituye la lógica de negocio para la aplicación.

1. Definimos un constructor para la UserNumberBean clase.

2. Ejecutamos de nuevo el proyecto. Cuando se ejecuta el proyecto, el

archivo del servidor de registro se abrirá automáticamente en la

ventana de resultados.

Hay que tener en cuenta que no aparece en la salida " El numero de

Duke: ". Un objeto UserNumberBean no se creó porque JSF

utiliza instanciación perezosa por defecto. Es decir, los beans en

ámbitos particulares sólo se crean y se inicializan cuando se

necesitan en la aplicación.




3. Debido a que UserNumberBean es de ámbito de sesión, tenemos

que poner en práctica la interfaz Serializable.

AGREGAR PROPIEDADES

Las páginas de Facelets que se crean en la siguiente sección se necesitan

para acceder al número que el usuario escribe, y la respuesta

generada. Para facilitar esto, añadimos las propiedades userNumber y

response a la clase.

1. Empezamos por declarar un entero llamado userNumber.

2. Damos clic derecho en el editor de código y elegimos Insertar(setter

y getter).




Seleccionamos la opción userNumber : Integer. Clic en Generar.

Y se genera el siguiente código:




3. Creamos el atributo response el cual es de tipo String.

4. Creamos un método get para response.

El método anterior realiza dos funciones:

o Comprueba si el número introducido por el usuario

( userNumber ) es igual al número aleatorio generado por el

período de sesiones ( randomInt ) y devuelve una cadena de

respuesta en consecuencia.

o Se invalida la sesión del usuario si el usuario adivina el número

correcto (es decir, si userNumber = randomInt). Esto es

necesario para que un nuevo número se genera si el usuario

quiere volver a jugar.




3. ENLAZANDO MANAGED BEANS A LAS PÁGINAS

Uno de los propósitos principales de JSF es eliminar la necesidad de escribir

código repetitivo para gestionar POJO s y su interacción con los puntos de

vista de la aplicación.

A continuación, utilice el lenguaje de expresiones JSF para enlazar los

valores de propiedad con componentes de interfaz de usuario

seleccionados.

INDEX.XHTML

1. Abrimos la página index.xhtml en el editor. Tanto índice y las páginas

de respuesta ya contienen los componentes JSF interfaz de usuario

que requerimos para este ejercicio. Simplemente quitamos y

comentamos los elementos HTML que se utilizan actualmente.

2. Tras descomentar el componente JSF formulario HTML, hay que

declarar las etiquetas que no han sido declaradas. Para declarar

estos componentes, utilizamos la funcion de la IDE de código para

agregar el espacio de nombres de biblioteca de etiquetas a la

página de <html> etiqueta. Colocamos el cursor sobre cualquiera de

las etiquetas no declaradas y pulse Ctrl-Espacio. Clic en Enter.

http://netbeans.org/kb/docs/web/jsf20-intro.html#pojo




3. Utilice el lenguaje de expresiones JSF para ligar UserNumberBean's

userNumber propiedad a a inputText componente. El valor atributo

se puede utilizar para especificar el valor actual del componente

representado.

El lenguaje de expresión JSF utiliza el # {} sintaxis. Dentro de estos

delimitadores, se especifica el nombre del bean gestionado y la

propiedad del bean que desea aplicar, separados por un punto ( . ).

4. Especificamos el destino de la petición de que se invoca cuando se

hace clic en el botón de formulario. En la versión HTML de la forma,

que fueron capaces de hacer esto utilizando la etiqueta <form>

de la acción atributo. Con JSF, puede utilizar elCommandButton 's la

acción atributo. Por otra parte, debido a la característica de JSF 2.0

's de navegación implícita, sólo tiene que especificar el nombre del

archivo de destino, sin la extensión de archivo.

5. Probamos si la expresión anterior llama al método

setUserNumber() cuando se procesa la solicitud. Para ello, utilizamos

el depurador del IDE.




6. Cambiamos a la clase UserNumberBean y establecemos un

punto de interrupción en el método setUserNumber().

7. Damos clic en Depuración del Proyecto ( ), situado en la barra

de herramientas principal del IDE. Una sesión de depuración se inicia,

y la página de bienvenida del proyecto se abre en el navegador.

8. En el navegador, introducimos un número en el formulario y damos

clic en el botón 'Submit'.




9. Volvemos a la IDE e inspeccionamos la clase UserNumberBean . El

depurador se suspende en el método setUserNumber().

10. Abrimos la ventana del depurador variables, donde veremos los

valores de las variables para el punto en el que se suspende el

depurador




En la imagen superior, un valor de 'ocho' se proporciona para

el userNumber variable en el setUserNumber(). (El número 8 se ha

introducido en el formulario.) ' this 'se refiere a el objeto

UserNumberBean que fue creado para la sesión del usuario. Debajo

dell, se ve que el valor de la userNumber propiedad es

actualmente null.

11. En la barra de herramientas del depurador, damos clic en el boton

( ) . El depurador ejecuta la línea en la que actualmente está

suspendido. Se actualizará la ventana de variables, lo que indica

cambios con respecto a la ejecución y en userNumber se establece

ahora en el valor introducido en el formulario.

RESPONSE.XHTML

1. Abrimos response.xhtml página en el editor.

2. Comentamos el elemento de formulario HTML.




3. Eliminamos los comentarios del JSF formulario HTML.

En esta etapa, el código entre las <body> etiquetas es el siguiente:




4. Tras descomentar el componente JSF formulario HTML, el editor

indica que los <h:form> y <h:commandButton> etiquetas no han sido

declaradas, añadimos las librerías correspondientes.

5. Especificamos el destino de la petición de que se invoca cuando el

usuario hace clic en el botón del formulario, configurando el botón

de modo que cuando un usuario hace clic en él, él o ella se

devuelve a la página de índice. Para lograr esto, utilice el atributo

acción del control CommandButton 's .

6. Volvemos a colocar la etiqueta "[respuesta aquí]" con el valor de la

propiedad UserNumberBean 's response. Para ello, utilizamos el

lenguaje de expresión JSF.




7. Ejecutamos el proyecto ( ). Cuando aparezca la página de

bienvenida en el navegador, escribimos un número y damos clic

en enviar. Podemos ver la página de respuesta muestra similar a la

siguiente:

Dos cosas están mal con el estado actual de la respuesta de la

página:

o Los html <p> etiquetas se muestra en el mensaje de respuesta.

o El botón Atrás no se muestra en la ubicación correcta.

Los siguientes dos pasos corregir estos puntos, respectivamente.




8. Ajustamos el <h:outputText> atributo escape a false . Colocamos el

cursor entre outputText y valo , insertamos un espacio, a

continuación, pulse Ctrl-Espacio para invocar código de

terminación.

9. Ajustamos en <h:form> el atributo prependId a false . Sitúamos el

cursor justo después de ' m 'en <h:form> e insertar un espacio. Nos

desplazamos hacia abajo para elegir el atributo y examinar la

documentación. A continuación, damos clic en Enter, y

escribimos falsa como el valor.

10. Ejecutamos el proyecto de nuevo, introducimos un número en la

página de bienvenida, a continuación, damos clic en Enviar. En la

respuesta de la página ahora muestra el mensaje de respuesta sin

las <p> etiquetas, y el botón Atrás está colocado correctamente.




11. Damos clic en el botón Atrás. Debido a que el valor actual

de UserNumberBean 's userNumber propiedad está ligada a la

JSFinputText componente, el número que ya ha entrado ahora se

muestra en el campo de texto.

12. Revise el registro del servidor en la ventana de salida del IDE para

determinar cuál es el número correcto es conjetura.




13. Escriba el número correcto y haga clic en Enviar. La aplicación

compara la entrada con el número que se guarda y muestra el

mensaje correspondiente.

14. Damos clic en el botón Atrás de nuevo. Hay que tener en cuenta

que el número introducido anteriormente ya no se muestra en el

campo de texto, UserNumberBean s ' getResponse() método invalida

la sesión del usuario actual al adivinar el número correcto.




4. APLICACIÓN DE UNA PLANTILLA FACELETS

Para los proyectos que contienen muchos puntos de vista, a menudo es

conveniente aplicar un archivo de plantilla que define la estructura y la

apariencia de múltiples puntos de vista. Cuando las solicitudes de servicio,

la aplicación inserta prepararse de forma dinámica el contenido en el

archivo de plantilla y envía el resultado al cliente. Aunque este proyecto

sólo contiene dos puntos de vista (la página de bienvenida y la respuesta

de la página), es fácil darse cuenta de que contienen una gran cantidad

de contenido duplicado. Se puede factorizar el contenido duplicado en

una plantilla de Facelets, y crear archivos de plantilla de cliente para

controlar el contenido que es específica para las páginas de bienvenida y

la respuesta.

CREACIÓN DEL ARCHIVO DE PLANTILLA DE FACELETS

1. Crear un archivo de plantilla Facelets. Presione Ctrl-N (⌘ + N en Mac)

para abrir el asistente de archivos. Seleccione la categoría de

JavaServer Faces, entonces Facelets de plantilla. Haga clic en

Siguiente.




2. Escriba en la plantilla para el nombre del archivo y elija entre

cualquiera de los ocho estilos de diseño y haga clic en Finalizar. El

asistente genera el template.xhtml archivos y hojas de estilo de

acompañamiento sobre la base de su selección, y lo deposita en

un recursos > CSS dentro de la carpeta del proyecto Webroot.

Después de completar el asistente, el archivo de plantilla se abre en

el editor. Para ver la plantilla en un navegador, haga clic derecho en

el editor y seleccione Ver.




3. Examine el archivo de plantilla de marcado. Tenga en cuenta los

siguientes puntos:

El Facelets biblioteca de etiquetas se declara en la

página <html> etiqueta. La biblioteca de etiquetas tiene la interfaz

de usuario prefijo.

La página utiliza el Facelets <h:head> y <h:body> etiquetas html en

lugar de la <head> y <body> etiquetas.Mediante el uso de estas

etiquetas, Facelets es capaz de construir un árbol de componentes

que abarca toda la página.

La página hace referencia a las hojas de estilo que se han creado

también cuando se ha completado el asistente.

<ui:insert> etiquetas se utilizan en el cuerpo de la página para cada

compartimento asociado con el estilo de diseño que ha

elegido. Cada <ui:insert> etiqueta tiene un nombre de atributo que

identifica el compartimiento. Por ejemplo:




4. Reemplace todo el contenido de su archivo de plantilla con el

contenido a continuación.

5. El código anterior implementa los siguientes cambios:

o El proyecto de stylesheet.css archivo sustituye las referencias

de hojas de estilo de plantillas creadas por el asistente.

o Todos los <ui:insert> etiquetas (y sus contienen clave de

búsqueda) se han eliminado, a excepción de uno

llamado cuadro .

o Un <ui:insert> par de etiquetas ha sido colocado alrededor del

título de la página, y el nombre del título .

6. Copiamos el código correspondiente, ya sea

del index.xhtml o response.xhtml archivo en la plantilla. Añadimos el

contenido se para el archivo de plantilla en las etiquetas.<h:body>




7. Ejecutamos el proyecto. Cuando la página de bienvenida se abre

en el navegador, modificamos la dirección URL a la siguiente:

http://localhost:8080/jsfDemo/faces/template.xhtml

El archivo de plantilla se muestra como sigue:

CREACIÓN DE ARCHIVOS DE PLANTILLA DE CLIENTE

Crear archivos de plantilla de cliente para las páginas de bienvenida y la

respuesta. Nombre del archivo del cliente plantilla para la página de

bienvenida greeting.xhtml . Para la página de respuesta, el archivo

será response.xhtml.

http://localhost:8080/jsfDemo/faces/template.xhtml




GREETING.XHTML

1. Abrimos el asistente de New File. Seleccionamos la categoría

JavaServer Faces, a continuación, seleccionamos Cliente Facelets

de plantilla. Clic en Siguiente.

2. Asignamos greeting para el nombre del archivo. Damos clic en el

botón Examinar situado junto al campo de plantilla, a continuación,

utilizamos el cuadro de diálogo que muestra para ir al archivo

template.xhtml que creamos en la sección anterior.




3. Damos clic en Finalizar. La nueva plantilla de ficha de cliente

greeting.xhtml se genera y se muestra en el editor.

Las referencias de clientes de la plantilla de archivo de una plantilla

con el <ui:composition> etiqueta de plantilla deatributo. Debido a

que la plantilla contiene <ui:insert> etiquetas para el título y

el cuadro de , este cliente plantilla contiene <ui:define> etiquetas

para estos dos nombres. El contenido que se especifique entre

los <ui:define> etiquetas es lo que se insertará en la plantilla entre

los <ui:insert> etiquetas del nombre correspondiente.

4. Especificamos greeting como el título para el archivo




5. Cambiamos al archivo index.xhtml y copiamos el contenido de lo

que normalmente aparecería en el cuadrado gris que aparece en la

página representada. A continuación, volver a greeting.xhtml y

pegarlo en el archivo del cliente de la plantilla.

6. Declaramos la biblioteca de etiquetas HTML para el archivo JSF

. Colocamos el cursor sobre cualquiera de las etiquetas que se

marcan con un error, y pulse Ctrl-Espacio. A continuación,

seleccione la etiqueta de la lista de sugerencias de finalización de

código. El espacio de nombres de biblioteca de etiquetas se

agregan al archivo de <html> etiqueta, y desaparecen los

indicadores de error.




RESPONSE.XHTML

Debido a que el proyecto ya contiene un archivo

denominado response.xhtml, lo modificaremos para convertirse en el

archivo del cliente de la plantilla.

1. Abrimos response.xhtml en el editor. Reemplazamos el contenido de

todo el archivo con el código de abajo.




Hay que tener en cuenta que el archivo es idéntico al greeting.xhtml,

excepto por el contenido especificado entre

los <ui:define> etiquetas para el título y el cuadro .

2. En el descriptor de despliegue del proyecto web.xml, modificamos la

entrada del archivo de bienvenida, para que greeting.xhtml sea la

página que se abre cuando se ejecuta la aplicación.

3. Ejecutamos el proyecto para ver cómo se ve en un navegador,

dando clic en el proyecto de ejecución ( ), situado en la barra de

herramientas principal. El proyecto se implementa en el servidor

GlassFish, y se abre en un navegador.




Con la plantilla de Facelets y los archivos de plantilla de cliente, la

aplicación se comporta exactamente de la misma manera como lo

hizo anteriormente. Al factorizar código duplicado en las páginas de

bienvenida y la respuesta de la aplicación, se logró reducir el

tamaño de la aplicación y se elimina la posibilidad de escribir más

código duplicado, debe ser añadido más páginas en un momento

posterior. Esto puede hacer que el desarrollo sea más eficiente y más

fácil de mantener cuando se trabaja en grandes proyectos.

introducciÓn a java server faces jsf - wad1 - home · · 2012-05-29introducciÓn a java server...

Documents