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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
3 RUEDA TORRES DULCE CAROLINA
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 ).
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
4 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
5 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
6 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
7 RUEDA TORRES DULCE CAROLINA
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
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
8 RUEDA TORRES DULCE CAROLINA
3. Damos clic en Finalizar, la clase UserNumberBean se genera y se
abre en el editor.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
9 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
10 RUEDA TORRES DULCE CAROLINA
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).
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
11 RUEDA TORRES DULCE CAROLINA
Seleccionamos la opción userNumber : Integer. Clic en Generar.
Y se genera el siguiente código:
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
12 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
13 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
14 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
15 RUEDA TORRES DULCE CAROLINA
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'.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
16 RUEDA TORRES DULCE CAROLINA
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
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
17 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
18 RUEDA TORRES DULCE CAROLINA
3. Eliminamos los comentarios del JSF formulario HTML.
En esta etapa, el código entre las <body> etiquetas es el siguiente:
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
19 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
20 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
21 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
22 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
23 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
24 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
25 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
26 RUEDA TORRES DULCE CAROLINA
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:
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
27 RUEDA TORRES DULCE CAROLINA
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>
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
28 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
29 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
30 RUEDA TORRES DULCE CAROLINA
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
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
31 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
32 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
33 RUEDA TORRES DULCE CAROLINA
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.
INTRODUCCIÓN A JAVA SERVER FACES JSF
Web Application Development
34 RUEDA TORRES DULCE CAROLINA
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.