RUEDA TORRES DULCE CAROLINA 3CM2 JSF JAVA SERVER FACES WEB APPLICATION DEVELOPMENT

Transcripción

1 3CM2 JSF JAVA SERVER FACES WEB APPLICATION DEVELOPMENT

2 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. 2

3 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 ). 3

4 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. 4

5 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

6 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. 6

7 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 7

8 3. Damos clic en Finalizar, la clase UserNumberBean se genera y se abre en el editor. 8

9 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. 9

10 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). 10

11 Seleccionamos la opción usernumber : Integer. Clic en Generar. Y se genera el siguiente código: 11

12 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. 12

13 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. 13

14 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. 14

15 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'. 15

16 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 16

17 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. 17

18 3. Eliminamos los comentarios del JSF formulario HTML. En esta etapa, el código entre las <body> etiquetas es el siguiente: 18

19 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. 19

20 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. 20

21 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. 21

22 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. 22

23 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. 23

24 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. 24

25 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. 25

26 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: 26

27 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> 27

28 7. Ejecutamos el proyecto. Cuando la página de bienvenida se abre en el navegador, modificamos la dirección URL a la siguiente: 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. 28

29 GREETING.XHTML INTRODUCCIÓN A JAVA SERVER FACES JSF 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. 29

30 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 30

31 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. 31

32 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. 32

33 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. 33

34 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. 34