Ejercicio clase JSF’s Manejo de Beans

1. Ejercicio clase JSF’sManejo de Beans

2. Introducción • Java Server Faces (JSF) es un entorno de desarrollo de aplicaciones Web. Consta de una librería de etiquetas, junto con un conjunto de reglas para su utilización.JSF ahorra tiempo al desarrollador aportando potentes recursos, especialmente para la gestión de formularios y la presentación de datos contenidos en bases de datos. JSF está construido sobre JSP, por lo que los conocimientos sobre JSP son de ayuda importante para manejar JSF. • El presente tutorial tiene como objetivo introducir al lector en JSF, consiguiendo desarrollar habilidades sobre los aspectos más cotidianos de su utilización. • Como herramienta de desarrollo utilizaremos NetBeans. Se asume que el lector ya ha descargado e instalado correctamente NetBeans, así como un dominio básico del mismo.

3. Creando el Proyecto • Abriremos NetBeans y pulsaremos el icono de New Project, o bien abriremos un nuevo proyecto mediante el menú principal, en File:New project • Elegiremos como categoría Web y como subcategoría Web application

4. Creando el Proyecto • A continuación pulsamos el botón Next y nos encontraremos asi:

5. Creando el proyecto • Pulsamos el botón Next y entre los entornos (frameworks), elegimos JavaServer Faces. Una vez hecho esto pulsamos Finish con lo que NetBeans nos crea nuestro proyecto.

6. Estructura aplicación web • En el panel de proyectos aparece el recién creado DimeNombre. Si lo desplegamos observamos su estructura, en forma de árbol de directorios. • Web Pages: Contiene tanto las páginas Web, como dos directorios que son necesarios para definir la configuración de la aplicación. Estos directorios son: • METAINF: Contiene el fichero context.xml. • WEBINF: Contiene los ficheros de configuración: • facesconfig.xml: Contiene instrucciones de configuración que atañen a las clases java de respaldo de las páginas Web. Aquí se inicializan variables, se enlaza código Java con páginas Web, se indica como se salta de una página Web a otra, etc. • web.xml: Recoge parámetros de configuración generales de la aplicación, tales como cuales son las páginas de inicio y error, qué recursos adicionales usa la aplicación,temas de seguridad, etc.

7. Estructura aplicación web • Configuration Files: Es un directorio virtual que nos muestra juntos todos los ficheros de configuración de la aplicación. En él volvemos a ver facesconfig.xml, web.xml y otros. • Server Resosurces: Contiene referencias a los recursos del contenedor de páginas Web, el cual puede ser Tomcat, como en nuestro caso, o bien otro contenedor. Por ejemplo el servidor de aplicaciones J2EE u otros. Estos recursos pueden ser conexiones a bases datos, definiciones de servicios para enviar emails desde nuestra aplicación, y otros más. • SourcePackages: Contiene nuestro código Java. • Test Packages: Contiene el código que usamos para pruebas. Nosotros hacemos la pruebas directamente sobre el código contenido en SourcePackages. • Libraries: Las librerías que necesita nuestro programa. • Test Libraries: Las librerías en pruebas.

8. Ejecutando programa • NetBeans nos crea una primera página de bienvenida en JSP index.jsp y otra más en JSF WelcomeJSF.jsp. • Si pinchamos en el icono de ejecución del programa o alternativamente pulsamos la tecla F6, o bien seleccionamos en el menú principal la opción Run:RunMain Project, NetBeans compilará y construirá nuestro programa. • Después lanzará Netbeans para que procese las páginas JSP y lanzará también nuestro navegador. En éste veremos la página de inicio del programa. Esta página, por defecto es index.jsp. En ella veremos un enlace a la página WelcomeJSF.jsp. • Nótese que Glassfishes capaz de arrancar la copia de Glassfishque forma parte de su propia instalación. Si tuvieramos previamente instalado en nuestro ordenador otra copia de Glassfish, deberíamos ser nosotros los que la arrancáramos, pues NetBeans no podría. • Podemos cambiar el navegador seleccionando en el menú de NetBeansTools:Options. • Para modificar cualquiera de las páginas Web existentes, podemos teclear en ella código JSP o JSF

9. Ejecutando programa • Lo mejor pues, es abrir las páginas index.jsp y WelcomeJSF.jsp en nuestro editor en NetBeans. Para ello en el panel de proyectos, desplegamos el árbol que representa nuestra aplicación y tras abrir el nodoWebPages, hacemos dobleclick sobre el nombre de cada una de las páginas

10. Editando JSP • Observamos que una vez que hemos abierto una página JSP en el editor, a la derecha disponemos de un panel que contiene elementos de varias categorías: HTML, JSP, JSF, y DataBase. Mediante ellos se simplifica la tarea de diseño. También podemos sencillamente editar la página tecleando código. • Una de las facilidades más interesantes de JSF es el manejo de formularios. Por ello vamos a modificar la página WelcomeJSF.jsp • Pinchamos en el panel de la derecha el control JSF Form y lo arrastramos hasta el editor sobre la página WelcomeJSF.jsp

11. Editando JSP • En la situación de la figura 5, elegimos la opción EmtyForm, con lo que NetBeans incluye en nuestra página un formulario vacío, tal cual vemos en el código siguiente • <%@page contentType="text/html"%> • <%@page pageEncoding="UTF-8"%> • <%@taglibprefix="f" uri="http://java.sun.com/jsf/core"%> • <%@taglibprefix="h" uri="http://java.sun.com/jsf/html"%> • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" • "http://www.w3.org/TR/html4/loose.dtd"> • <html> • <head> • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> • <title>JSP Page</title> • </head> • <body> • <f:view> • <h1><h:outputTextvalue="JavaServer Faces" /></h1>

12. Editando JSP • /* Esta es la zona del formulario vacio */ • <h:form> • </h:form> • </f:view> • /****************************************/ • </body> • </html>

13. Editando JSP • Observamos en el comienzo de la página las directivas • <%@taglibprefix="f" uri="http://java.sun.com/jsf/core"%> <%@taglibprefix="h" uri="http://java.sun.com/jsf/html"%> que indican que las marcas con prefijo f, tales como f:view corresponden a la librería java.sun.com/jsf/core, mientras que las marcas con prefijo h, se encuentran en la librería java.sun.com/jsf/html. • Ahora aprovecharemos la facilidad de autocompleción de NetBeans para insertar elementos en el formulario vacío. • Para ello entre  y , tecleamos  y esperamos a que NetBeans nos ofrezca opciones para completar el comando. Si vemos que no ocurre nada tras esperar prudencialmente, pulsamos simultáneamente las teclas ctrl y espacio.

14. Editando JSP

15. Editando JSP • Los nombres de los marcadores son bastante autoexplicativos. En nuestro caso elejiremos , que es el que sirve para poner un texto fijo en el formulario. • Escribiremos siguiendo esta operativa el siguiente código • <f:view> <h:form> <h:outputLabeltitle="Cual es tu nombre ?:" /> <h:inputTextvalue="nombre"/> <h:commandButtonaction="submit" value="Enviar"/> </h:form> </f:view> Ejecutamos el programa y veremos en nuestro navegador lo siguiente, tras pulsar el enlace a la página WelcomeJSF.jsp

16. Editando JSP • Nos es difícil entender del todo que es lo que ha pasado, pero esto no es lo que queríamos. Tras un análisis de la situación vemos que el parámetro value=''nombre'', que habíamos puesto en el marcadorh:inputText aparece dentro del campo de texto. • Nos ocuparemos de esto más tarde. Ahora vamos a dar a nuestro formulario otro aspecto. Para ello utilizaremos algo que maneje la disposición de los elementos del formulario en la página Web. • Así pues lo que necesitamos es el marcador . Escribiremos ahora • <f:view> <h:form> <h:panelGridcolumns="2"> <h:outputLabeltitle="Cual es tu nombre ?:" /> <h:inputTextvalue="nombre"/> <h:commandButtonaction="submit" value="Enviar"/> </h:panelGrid> </h:form> </f:view> Observamos que el resultado cambia y nuestro formulario tiene ahora dos columnas. h:panelGrid es el marcador que se encarga de controlar la disposición de los elementos en el formulario. Podemos tener varios panelGrids dentro de un mismo formulario. Entre medias de los panelGrids se puede escribir código HTML. • Vamos ahora a ocuparnos del funcionamiento del campo de entrada de texto. Para ello vamos a crear código Java que procese la información del formulario.

17. Creando un ManagedBean • Creando una managedbean • Pulsaremos el botón derecho del ratón sobre el nombre del proyecto DimeNombre y en el menú que emerge seleccionamos la opciiónNew. • Aparece entoces un panel en que se ofrecen varias posibilidades. Seleccionaremos File/Folder, que sirve para que se nos ofrezcan todas las posibilidades existentes, compatibles con nuestro contexto.

18. Creando un ManagedBean • Seleccionaremos la categoría Web:JSFManagedBean. • Esto nos lleva a la situación de la figura • Daremos a lamanagedbean, el nombre WelcomeJSFManagedBean y en el campo Package, indicaremos misBeans. Después pulsaremos Finish y NetBeans nos mostrará en el editor la nueva clase creada.

19. Creando un ManagedBean

20. Creando un managedBean • Primero crearemos un atributo llamado nombre y de tipo String. Nuestro código queda • packagemisBeans; • publicclassWelcomeJSFManagedBean { • String nombre=""; • /** Creates a new instance of WelcomeJSFManagedBean */ • publicWelcomeJSFManagedBean() { • } • }

21. Creando un ManagedBean • A continuación pulsamos con el botón derecho del ratón sobre el editor, en cualquier sitio y veremos el menú emergente

22. Creando un ManagedBean • Seleccionamos en el menú emergente la categoría Refactor:EncapsulateFields. Se nos pregunta por los campos a encapsular, aceptamos, y después en la parte inferior de NetBeans pulsamos Do Refactoring. Una vez hecho esto observamos que NetBeans ha creado un método get y otro set, para el atributo nombre. • A través de estos métodos es como se comunica la página JSP con la managedbean.

23. Enlazando la pagina web con el bean • Ahora tenemos que indicar que la clase de respaldo de la página WelcomeJSF.jsp es la clase WelcomeJSFManagedBean.java, ya que en caso contrario el sistema no lo establece por si mismo. Nótese que los nombres de la página Web y de la clase de respaldo son totalmente independientes. • Para ello en la página Web WelcomeJSF.jsp modificaremos el valor del campo de texto como sigue. • <h:inputTextvalue="#{WelcomeJSFManagedBean.nombre}"/> nótese que mientras estamos tecleando el código,siempre podemos pusarcrtl-espacio, para que NetBeans nos ayude con su autocompleción.

24. Enlazando la pagina web con el Bean • La parte interesante de la página Web queda • <f:view> • <h1><h:outputTextvalue="JavaServer Faces" /></h1> • <h:form> • <h:panelGridcolumns="2"> • <h:outputLabelvalue="Cual es tu nombre ?:" /> • <h:inputTextvalue="#{WelcomeJSFManagedBean.nombre}"/> • <h:commandButtonaction="submit" value="Enviar"/> • </h:panelGrid> • </h:form> • </f:view> • Ahora lanzamos el programa y observamos que su comportamiento es normal.

25. Enlazando la pagina web con el Bean • Ahora vamos a procesar desde la clase de respaldo (bean), el contenido de la página Web. • Para ello crearemos una página Web nueva. • Clickeamos con e botón derecho del ratón sobre la carpeta Web Pages, por ejemplo, la cual se encuentra en el árbol de estructura del proyecto, en el panel izquierdo de NetBeans. • En el mnú emergente seleccionamos New:Web:JSP. Se nos abre el panel de creación de la página Web y le damos el nombre respuesta sin extensión ninguna.

26. Enlazando la pagina web con el Bean • Esto nos crea una página Web de tipo JSP. Para que maneje las librerías de JSF, incluimos las directivas • <%@tagliburi="http://java.sun.com/jsf/core" prefix="f" %> • <%@tagliburi="http://java.sun.com/jsf/html" prefix="h" %> • A continuación incluiremos en la página de respuesta (respuesta.jsp, el formulario siguiente • <f:view> • <h:form> • <h:outputLabelvalue="#{WelcomeJSFManagedBean.nombre}"/> • </h:form> • </f:view> • Nótese que tomamos el nombre de la clase de respaldo.

27. Creando las reglas de navegacion • Ahora tenemos que hacer algo para que cuando enviamos el nombre desde la página Welcome.jsp, éste aparezca en la página de respuesta. • Para ello abrimos el fichero faces-config.xml en el editor. A continuación pulsamos sobre él en el editor, el botón derecho del ratón y veremos un menú emergente. Seleccionamos la opción JavaServerFaces:AddNavigationRule • Pulsamos el botón Browse, y seleccionamos la página WelcomeJSF.jsp. A continuación pulsamos el botón Add. Observamos que en faces-config.xml, aparece un texto que intuitivamente comprendemos.

28. Creando las reglas de navegacion • A continuación pulsamos de nuevo el botón derecho del ratón sobre el editor, y esta vez elegimos, en el menú emergente, la opción JavaServerFaces:AddNavigation Case. • Estaremos en la situación de la figura • La mecánica a seguir es intuitiva. • Los campos del formulario de • deben ser: • From View: /WelcomeJSF.jsp • Fromoutcome: submit • To View: /respuesta.jsp

29. Asidebio quedar el XML • <?xmlversion='1.0' encoding='UTF-8'?> • <!DOCTYPE faces-config PUBLIC • "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" • "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> • <faces-config> • <managed-bean> • <managed-bean-name>WelcomeJSFManagedBean</managed-bean-name> • <managed-bean-class>misBeans.WelcomeJSFManagedBean</managed-bean-class> • <managed-bean-scope>request</managed-bean-scope> • </managed-bean> • <navigation-rule> • <description> • </description> • <from-view-id>/welcomeJSF.jsp</from-view-id> • <navigation-case> • <from-outcome>submit</from-outcome> • <to-view-id>/repuesta.jsp</to-view-id> • </navigation-case> • </navigation-rule> • </faces-config>

30. Procesando la informacion • Ahora podemos ejecutar nuestro programa y veremos que tras escribir un nombre en la página WelcomeJSF.jsp, y pulsar enviar, éste aparece en la página respuesta.jsp. • Es decir la primera página a enviado el dato a la clase de respaldo y la segunda página lo ha tomado de ella. • Ahora para que esto sea realmente interesante, deberíamos procesar realmente la información, no solamente pasarla de página en página.

31. Procesando la información de respaldo • Primeramente crearemos el código necesario para realizar algún trabajo con la información que nos envían desde la página. • Para ello es necesario modificar varias cosas: • Crearemos un nuevo atributo en la clase WelcomeJSFManagedBean.java con la instrucción • privateString respuesta=""; Después crearemos sus métodos get y set, como hicimos anteriormente, mediante el menú emergente que obtenemos al pulsar el botón derecho del ratón sobre el editor y seleccionarRefactor:EcapsulateFields.

32. Procesando la informacion de respaldo • Crearemos un método en la la clase WelcomeJSFManagedBean.java, el cual llamaremos procesar. El código de este método es: • publicString procesar() { • respuesta = nombre + ", " + "tu nombre tiene " + • nombre.length() + " letras."; • return "respuesta_procesada"; • } • Nótese el valor que devuelve la función. Además vemos que esta función pone un valor en el atributo respuesta de la clase. Este valor es el que recogerá la página repuesta.jsp. La coincidencia de los nombres es puramente accidental. La página y el valor podrían llamarse de manera diferente. • Pulsamos la tecla F9, para compilar la clase y comprobar que no hemos cometido ningún error.

33. Procesando la información de respaldo • Modificamos la página WelcomeJSF.jsp. Ahora el comando que manipula el botón de enviar es • <h:commandButtonaction="#{WelcomeJSFManagedBean.procesar}" value="Enviar"/> • Nótese que ahora cuando pulsamos el botón la página llama al método procesar que hemos creado en la clase de respaldo. • Modificamos la página respuesta.jsp. Ahora el texto que aparece se controla con la instrucción • <h:outputTextvalue="#{WelcomeJSFManagedBean.respuesta}" /> Es decir esta página recoge el valor dejado en la variable respuesta, por el método procesar, el cual ha sido invocado cuando pulsamos el botón enviar.

34. Asidebio quedar Faces-Config.xml • <?xmlversion='1.0' encoding='UTF-8'?> <!DOCTYPE faces-config PUBLIC • "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" • "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> • <faces-config> • <managed-bean> • <managed-bean-name>WelcomeJSFManagedBean</managed-bean-name> • <managed-bean-class>misBeans.WelcomeJSFManagedBean</managed-bean-class> • <managed-bean-scope>request</managed-bean-scope> • </managed-bean> • <navigation-rule> • <description> • </description> • <from-view-id>/welcomeJSF.jsp</from-view-id> • <navigation-case> • <from-outcome>respuesta_procesada</from-outcome> • <to-view-id>/repuesta.jsp</to-view-id> • </navigation-case> • </navigation-rule> • </faces-config>

35. Procesando la información de respaldo • Nótese que hemos modificado la regla de navegación. Ahora cuando la función procesar devuelve la cadena ``respuesta_procesada'', el sistema sabe que tiene que llamar a la página respuesta.jsp • Observamos que este esquema de funcionamiento es totalmente flexible y mediante él podemos construir cualquier secuencia de llamadas a páginas Web, con procesamiento del tipo que deseemos entre las llamadas. • JavaServer Faces y JSP, permiten mucho más, pero para este tutorial de introducción es suficiente.