Guía 3: Managed Beans

Sistematización de Datos
2019 - I

Información general
Para este taller se espera que los estudiantes logren poner el práctica el manejo
de los Managed Beans por medio de una aplicación funcional del mismo..

¿Qué aprenderás?
● Managed Beans
● Ámbitos de Managed Beans.
● Configuración de Managed Beans
● Navegación usando XML

Crear el proyecto de Managed Beans

Para este proyecto vamos a utilizar Netbeans que proporciona un gran soporte
para el desarrollo de aplicaciones con JSF.

Seleccionamos la opción New Project y buscamos la opción que se muestra en la

imagen Java Web > Web application:

Netbeans creando un proyecto Java Web

Guía 3: Managed Beans
Sistematización de Datos
2019 - I

Ahora seguimos los pasos del wizard introduciendo los datos:

● Ubicamos nuestro proyecto y le damos nombre: JSFBasicProject

● Seleccionamos el servidor de aplicaciones GlassFish con Java EE 8 y
mantenemos la ruta
● Seleccionaremos JSF y la librería Primefaces, por ejemplo, aunque en este
proyecto no la vamos a usar.
● Listo ya tenemos el proyecto creado con Primefaces, despliégalo para
comprobar que todo funciona

Aquí tienes en imágenes los pasos seguidos:

JSF 2 Create Project – Wizard – Java Web Application

Guía 3: Managed Beans
Sistematización de Datos
2019 - I

JSF 2 Create Project – Wizard – Selección de Servidor

JSF 2 Create Project – Wizard – Selección de JSF 2.2

Ámbitos de los beans

El ámbito de los beans determina su ciclo de vida: cuándo se crean y destruyen
instancias del bean y cuándo se asocian a las páginas JSF. Es muy importante
definir correctamente el ámbito de un bean, porque en el momento de su creación
se realiza su inicialización. JSF llama al método constructor de la clase, donde
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

habremos colocado el código para inicializar sus valores, creando una instancia de
la clase que pasará a ser gestionada por el framework.

En JSF se definen los siguientes ámbitos para los beans: petición, sesión, vista y
aplicación. El ámbito de vista es un elemento nuevo de JSF 2.0. Los otros ámbitos
son similares a los definidos con los JavaBeans de JSP.

Petición: Se define con el valor request en la propiedad managed-bean-scope

del faces-config.xml o con la anotación @RequestScoped en la clase. El bean se
asocia a una petición HTTP. Cada nueva petición (cuando desde el navegador se
abre una página por primera vez una página o se recarga) crea un nuevo bean y lo
asocia con la página. Dada su corta vida, se recomienda usar este ámbito para el
paso de mensajes (bien sea de error o de estatus), o para cualquier otro tipo de
dato que no sea necesario propagar a lo largo de la aplicación

Sesión: Se define con el valor session en el faces-config.xml o con la anotación

@SessionScoped en la clase. Las sesiones se definen internamente con el API de
Servlets. Una sesión está asociada con una visita desde una navegador. Cuando se
visita la página por primera vez se inicia la sesión. Cualquier página que se abra
dentro del mismo navegador comparte la sesión. La sesión mantiene el estado de
los elementos de nuestra aplicación a lo largo de las distintas peticiones. Se
implementa utilizando cookies o reescritura de URLs, con el parámetro jsessionid.
Una sesión no finaliza hasta que se invoca el método invalidate en el objeto
HttpSession, o hasta que se produce un timeout.

Aplicación: Se define con el valor application y con la anotación

@ApplicationScoped. Los beans con este ámbito viven asociados a la aplicación.
Definen singletons que se crea e inicializa sólo una vez, al comienzo de la
aplicación. Se suelen utilizar para guardar características comunes compartidas y
utilizadas por el resto de beans de la aplicación.

Vista: (JSF 2.0): Se define con el valor view en el faces-config.xml o con la

anotación @ViewScoped en la clase. Un bean en este ámbito persistirá mientras
se repinte la misma página (vista = página JSF), al navegar a otra página, el bean
sale del ámbito. Es bastante útil para aplicaciones que usen Ajax en parte de sus
páginas.

Custom: (@CustomScoped): Un ámbito al fin y al cabo no es más que un mapa

que enlaza nombres y objetos. Lo que distingue un ámbito de otro es el tiempo de
vida de ese mapa. Los tiempos de vida de los ámbitos estándar de JSF (sesión,
aplicación, vista y petición) son gestionados por la implementación de JSF. En JSF
2.0 podemos crear ámbitos personalizados, que son mapas cuyo ciclo de vida
gestionamos nosotros. Para incluirlo en ese mapa, usaremos la anotación
@CustomScoped("#{expr}"), donde #{expr} indica el mapa. Nuestra aplicación
será la responsable de eliminar elementos de ese mapa.

Conversación: (@ConversationScoped) - provee de persistencia de datos hasta

que se llega a un objetivo específico, sin necesidad de mantenerlo durante toda la
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

sesión. Está ligado a una ventana o pestaña concreta del navegador. Así, una sesión
puede mantener varias conversaciones en distintas páginas. Es una característica
propia de CDI, no de JSF.

Crear un Managed Bean

Nuestro ejemplo va a consistir en un sistema básico de introducción de usuario y
una serie de campos: user, nickName, email y validationCode. La validación va
a consistir en la introducción de un código predefinido en el sistema, con esto
podremos ver como funcionan los Managed Bean, y como comprobamos la
validación de las respuestas, en función de la introducción de código que haga el
usuario devolveremos las siguientes respuestas:

● Código válido: mostramos una página con lo datos introducidos por el

usuario
● Código erróneo: le indicamos al usuario que es erróneo y le damos el
acceso para volver a intentarlo

Configuración de un Bean
Seleccionamos New file para seleccionar dentro de JSF la opción de Managed
Bean como se muestra en la imagen:
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

JSF 2 – Managed Bean -Wizard 01 Create

Ahora introducimos un nombre para nuestro primer Managed Bean en mi caso:

UserManagedBean, y el paquete donde lo vamos a ubicar, por ejemplo:
org.xulescode.jsf, como se muestra en la imagen:
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

JSF 2 – Managed Bean -Wizard 02 Name

El código final creado será el siguiente:

package org.xulescode.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

/**
*
* @author xules
*/
@ManagedBean
@SessionScoped
public class UserManagedBean {

/**
* Creates a new instance of UserManagedBean
*/
public UserManagedBean() {
}

En este caso hemos seleccionado session, lo primero que vamos a hacer es

implementar el interfaz Serializable.

Creando un constructor
Como hemos definido en nuestro sencillo ejemplo para validar al usuario vamos a
utilizar un código de validación para aprobarlo, para este sencillo ejemplo con
introducir un valor en el constructor ya nos servirá para nuestras pruebas:

private String code;

public UserManagedBean() {
code = "XULES-CODE";
System.out.println("Validation code (Código de validación): " + code);
}

Definimos una serie de propiedades

En este caso para un ejemplo sencillo creamos las siguientes propiedades y les
generamos sus respectivos getters y setters.
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

private String user;

private String nickName;
private String email;
private String validationCode;

El campo validationCode va a ser el que utilicemos para validar o no al usuario

mediante la introducción del código correcto que fijamos en el constructor.

Definimos una propiedad para validar la respuesta

Definimos una propiedad para validar la respuesta con su getter correspondiente
donde evaluaremos el código introducido y en función de si es correcto o no
enviaremos al usuario a una u otra página.

Vamos a definir la respuesta evaluando validationCode como sigue:

/**
* Creates a new instance of UserManagedBean.
* Crea una nueva instancia para UserManagedBean
*/
public UserManagedBean() {
code = "XULES-CODE";
System.out.println("Validation code (Código de validación): " + code);
}
/**
* We perform checks to validate the code and depending on the result return a
response.
* Realizamos las comprobaciones para validar el códigoy en función del
* resultado devolvemos una respuesta.
* @return <code>String</code> we return a string with the result of the code
validation.
* Devolvemos una cadena con el resultado de la validación del código.
*/
public String getValidation() {
if ((validationCode != null) && (validationCode.compareTo(code) == 0)) {
// The validationCode is OK then we show the user data in validation.xhtml
// El código validationCode es correcto entonces mostramos los datos en
validation.xhtm
FacesContext context = FacesContext.getCurrentInstance();
HttpSession session = (HttpSession)
context.getExternalContext().getSession(false);
session.invalidate();
return "<p>User accepted:</p>"
+ "<ul>"
+ " <li>User: " + getUser() + " </li>"
+ " <li>Nick name: " + getNickName() + " </li>"
+ " <li>Email: " + getEmail() + " </li>"
+ "</ul>";
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

} else {
return "<p>Sorry, " + validationCode + " isn't valid.</p>"
+ "<p>Try again...</p>";
}
}

Crear página Web

Para nuestro ejemplo necesitamos dos páginas xhtml, en primer lugar vamos a
reutilizar index.xhtml para introducir nuestro formulario, y crearemos una
nueva que llamaremos validation.xhtml donde devolveremos el resultado de la
comprobación del código válido.

En ambos casos vamos a utilizar JSF 2 para ello debemos indicar en index.xhtml
(lo mismo para validation.xhtml) que vamos a utilizar la librería de JSF para así
usar sus componentes y su lenguaje de expresiones para vincular las propiedades
con los respectivos componentes UI. Para ello incluimos en la cabecera de html la
referencia: “xmlns:h=”http://xmlns.jcp.org/jsf/html”

Configuración archivo index.xhtml

Ahora creamos un formulario, como podrás ver en el código hacemos la referencia
a las etiquetas JSF anteponiendo h:, creamos el cuerpo del formulario con el
siguiente código:

<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h4>Introduce the user data with the validation code</h4>

<h:form>
<!-- Aquí diseñaremos nuestro formulario -->
</h:form>
<br />
</h:body>

Como puedes ver combinamos el uso de JSF con html puro, ahora veamos cómo
creamos el campo para la introducción del usuario y como lo vinculamos con el
Managed Bean, usamos el componente h:inputText y lo vinculamos con el bean
mediante el valor value=”#{userManagedBean.user}”, también podemos
definir otros valores como puedes ver con la auto ayuda de Netbeans, el código
final:
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

User: <h:inputText id="user" size="40" maxlength="60"

value="#{userManagedBean.user}" />
<br/>

Hacemos lo mismo para los otros elementos del formulario y ya solo nos falta
incluir el botón de submit para ejecutar el formulario y comprobarlo en el
servidor con el método: public String getValidation(), simplemente indicando
en el campo action el nombre : action=”validation”.

Este es el código final de nuestro index.xhtml modicado con nuestro formulario

y el botón de submit:

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Formulario</title>
</h:head>
<h:body>
<h4>Introducce el código de verificación</h4>

<h:form>
Usuario: <h:inputText id="user" size="40" maxlength="60"
value="#{userManagedBean.user}" /> <br/>
Nickname: <h:inputText id="nickName" size="40" maxlength="60"
value="#{userManagedBean.nickName}" /><br/>
Email: <h:inputText id="email" size="40" maxlength="60"
value="#{userManagedBean.email}" /><br/>
Código de validación:<h:inputText id="validationCode" size="40"
maxlength="60"
value="#{userManagedBean.validationCode}" /><br/>
Requerido<br/>
(El código de validación es necesario para validad el usuario)<br/>
<h:commandButton id="submit"
value="SUBMIT"
action="validation" />

</h:form>
<br />

</h:body>
</html>
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

Para el botón de submit utilizamos el componente commandButton donde

podemos utilizar el parámetro action para definir el método donde se efectúa la
comprobación de código válido.

Crear archivo validation.xhtml

Creamos una página con el nombre del método que hemos definido para la
validación y donde mostraremos las respuestas que hemos diseñado en el método:
public String getValidation() y que mostramos utilizando la llamada al bean de
la siguiente forma: value=”#{userManagedBean.validation}”. Este es el código:

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h3>This is the result (Este el resultado): </h3>
<h4><h:outputText escape="false"
value="#{userManagedBean.validation}"/></h4>
<br />
<h:form>

<h:commandButton id="backButton" value="Back" action="index" />

</h:form>

</h:body>
</html>

Navegaciones en JSF 2
JSF 2 hace las cosas más fáciles en la versión anterior de JSF 1.2 deberíamos
introducir las reglas de navegación en el fichero de configuración, esto ahora es
automático con JSF 2:

<navigation-rule>
<from-view-id>/index.xhtml</from-view-id>

<navigation-case>
<from-outcome>validation</from-outcome>
<to-view-id>/validation.xhtml</to-view-id>
Guía 3: Managed Beans
Sistematización de Datos
2019 - I

</navigation-case>
</navigation-rule>

Resultado final
En este sencillo ejemplo no he utilizado ningún css ni ninguna plantilla (template)
para mejorar la presentación del ejemplo, esto lo haré en una nueva publicación,
donde se explicará la utilización de plantillas con facelets para nuestros
desarrollos con JSF.

Si desplegamos nuestro proyecto nos aparecerá el formulario que hemos creado

en blanco:

Managed Bean – Formulario inicial en index.xhtml