Este documento describe cómo crear una aplicación web básica en JavaServer Faces (JSF) utilizando NetBeans. Explica cómo crear un proyecto JSF, agregar un formulario y un bean administrado, y vincularlos mediante reglas de navegación para procesar los datos del formulario.

1. Ejercicio clase JSF’s
Manejo 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.
• Source Packages: 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 Source Packages.
• 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:Run Main
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 Glassfish es capaz de arrancar la copia de Glassfish que 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
NetBeans Tools: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 nodoWeb Pages, 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 Emty Form, 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"%>
• <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
• <%@taglib prefix="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:outputText value="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
• <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="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:outputLabel title="Cual es tu nombre ?:" /> <h:inputText
value="nombre"/> <h:commandButton action="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:panelGrid columns="2"> <h:outputLabel title="Cual es tu
nombre ?:" /> <h:inputText value="nombre"/> <h:commandButton
action="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 Managed Bean
• Creando una managed bean
• Pulsaremos el botón derecho del ratón sobre el nombre del proyecto DimeNombre y en el menú que
emerge seleccionamos la opciión New.
• 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 Managed Bean
• Seleccionaremos la categoría Web:JSF Managed Bean.
• Esto nos lleva a la situación de la figura
• Daremos a la managed bean, 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 Managed Bean

20. Creando un managed Bean
• Primero crearemos un atributo llamado nombre y de tipo String. Nuestro código
queda
• package misBeans;
• public class WelcomeJSFManagedBean {
•
• String nombre="";
•
• /** Creates a new instance of WelcomeJSFManagedBean */
• public WelcomeJSFManagedBean() {
• }
•
• }

21. Creando un Managed Bean
• 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 Managed Bean
• Seleccionamos en el menú emergente la
categoría Refactor:Encapsulate Fields. 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 managed bean.

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:inputText
value="#{WelcomeJSFManagedBean.nombre}"/> nótese
que mientras estamos tecleando el código,siempre
podemos pusar crtl-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:outputText value="JavaServer Faces" /></h1>
•
• <h:form>
• <h:panelGrid columns="2">
• <h:outputLabel value="Cual es tu nombre ?:" />
• <h:inputText value="#{WelcomeJSFManagedBean.nombre}"/>
• <h:commandButton action="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
• <%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
• <%@taglib uri="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:outputLabel value="#{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 JavaServer Faces:Add Navigation Rule
• 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 JavaServer Faces:Add
Navigation 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
• From outcome: submit
• To View: /respuesta.jsp

29. Asi debio quedar el XML
• <?xml version='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
• private String 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:Ecapsulate Fields.

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:
• public String 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:commandButton
action="#{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:outputText value="#{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. Asi debio quedar Faces-Config.xml
• <?xml version='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.