Introducción.
Sabemos que es un dolor de cabeza usar las variables de sesión a través de los objetos HttpSession y HttpRequest. No sabemos si una variable está en nivel de sesión o en nivel de request, simplemente lo ponemos y lo usamos, aunque después nos pueden dar problemas a lo largo de la aplicación, pero al usar JSF esto se hará mucho más sencillo.
JSF nos permite utilizar tres tipos de alcances:
Aplicación: Una variable guardada en este alcance es visible durante toda la aplicación, hasta que se repliegue la aplicación o hasta que se detenga el servidor.
Sesión: Una variable guardada a nivel de sesión, puede ser visible durante el tiempo de vida del usuario en la aplicación hasta que se invalide la sesión.
Request: Una variable en nivel request dura solo hasta la siguiente página, una página 1, guarda la variable en nivel request y redirecciona la petición a la página 2. La página 2 la utiliza, y el objeto desaparece.
Haremos una aplicación que permita hacer votos y mostrar los resultados.
Primero se deberá seleccionar un jugador de futbol perteneciente a un equipo mostrado en un SelectOneMenu. Los equipos, jugadores y variable que cuenta los votos se almacenaran a nivel de aplicación; el usuario que haya hecho el voto no podrá volver a votar, por tanto la aplicación sabrá que se trata del mismo usuario porque mantiene la sesión; y cuando el usuario quiera ver los resultados, estos se mostrarán de de acuerdo al requerimiento.
Creando una aplicación JSF con Visual ICEFaces.
Para comenzar crearemos una aplicación Web en Netbeans la que llamaremos variableSesionJSF.
Ilustración 1: Creación del proyecto web.
En la paso donde seleccionamos el Frameworks de la creación del proyecto web activamos el framework Visual Web ICEfaces.
Ilustración 2: Selección de Frameworks.
Diseño página inicial de la aplicación.
Agregaremos al diseño de nuestra pagina dos SelectOneMenu para seleccionar el equipo y al jugador a quien vamos a dar nuestro voto. También agregaremos dos CommandButton, uno para votar y otro para ver el resultado parcial de la votación.
En la ventana llamada JSP de nuestro archivo Page1.jsp agregamos el siguiente script en el interior del cuerpo de nuestra página.
<ice:form id=»form1«>
<ice:outputText id=»cabecera» style=»border-color: rgb(204, 204, 204); background-color: rgb(79, 115, 224); color: rgb(255, 255, 255); font-family: Calibri,Helvetica,sans-serif,Arial; font-size: 25px; font-style: normal; font-weight: normal; height: 60px; left: 72px; right: 10px; top: 24px; position: absolute; text-align: justify; vertical-align: middle; width: 864px; letter-spacing: 2px;word-spacing: 4px;» value=» Javalea Blog de Informática«/>
<ice:panelGrid id=»panel_central» style=»border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204); height: 170px; left: 72px; top: 95px; position: absolute» visible=»true» width=»456«/>
<ice:outputText escape=»false» id=»titulo_interno»
style=»border-right: solid rgb(204, 204, 204) 1px; border-bottom: solid rgb(204, 204, 204) 1px; border-left: solid #cccccc 1px; background-color: rgb(255, 255, 204); color: rgb(51, 51, 51); font-family: cursive; font-size: X-small; font-variant: small-caps; font-weight: normal; left: 72px; top: 96px; position: absolute; text-align: left; vertical-align: middle; visibility: visible; width: 250px»
value=» Votación mejor futbolista Chileno» visible=»true«/>
<ice:outputText id=»txtEquipo» style=«font-family: ‘Calibri’; font-size: 14px; font-weight: lighter; left: 120px; top: 142px; position: absolute» value=»Seleccione un Equipo«/>
<ice:outputText id=»txtJugador» style=»font-family: ‘Calibri’; font-size: 14px; left: 120px; top: 166px; position: absolute» value=»Seleccione un Jugador«/>
</ice:form>
Ilustración 3: Diseño pagina de inicio.
A continuación ingresaremos los SelectOneMenu, los cuales tendrán y los CommandButton.
Ilustración 4: Estructura de página de inicio.
En el explorador del proyecto, abrimos el nodo llamado Source Packages y en su interior abrimos la clase ApplicationBean1.java. Esta clase contendrá todas las variables que se usarán en toda la aplicación. Para nuestro caso, aquí colocaremos la lista de equipos, jugadores, y el contador por cada opción marcada.
Ingresamos los siguientes import al comenzar la clase:
import com.sun.rave.web.ui.appbase.AbstractApplicationBean;
import com.sun.webui.jsf.model.Option;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import javax.faces.FacesException;
Posteriormente ingresaremos las variables en la clase:
private com.sun.webui.jsf.model.Option[] equipos;
private Map<String,String> hm = new HashMap<String,String>();
private Iterator it = hm.entrySet().iterator();
private java.util.HashMap votos;
private String[] UC;
private String[] CC;
private String[] UE;
private String[] UCH;
Crearemos los métodos set y get para cada una de las variables, podemos hacer esto haciendo clic con el botón derecho sobre una variable y seleccionando la opción Reestructurar > Encapsular.
Ilustración 5: Creacion métodos set y get.
Ahora, vamos al método init de la misma clase, y en la última línea del cuerpo del método escribiremos la inicialización de los valores de las propiedades que acabamos de crear:
setEquipos(new Option[]{
new Option(«UC«, «U. Católica«),
new Option(«CC«, «Colo Colo«),
new Option(«UCH«, «U. de Chile«),
new Option(«UE«, «Unión Española«)
});hm.put(«Cristopher Toselli«,»U. Católica«);
hm.put(«Hans Martínez«,»U. Católica«);
hm.put(«Milovan Mirosevic«,»U. Católica«);
hm.put(«Luis Núñez«,»U. Católica«);
hm.put(«Francisco Prieto«,»Colo Colo«);
hm.put(«Luis Mena«,»Colo Colo«);
hm.put(«Arturo Sanhueza«,»Colo Colo«);
hm.put(«Emilio Hernández«,»U. de Chile«);
hm.put(«Cristián Limenza«,»Unión Española«);setUC(new String[]{
new String(«Cristopher Toselli«),
new String(«Hans Martínez«),
new String(«Milovan Mirosevic«),
new String(«Luis Núñez«)
});
setCC(new String[]{
new String(«Francisco Prieto«),
new String(«Luis Mena«),
new String(«Arturo Sanhueza«)
});
setUCH(new String[]{
new String(«Emilio Hernández«)
});
setUE(new String[]{
new String(«Cristián Limenza«)
});votos = new HashMap();
while (it.hasNext()) {
Map.Entry e = (Map.Entry)it.next();
votos.put(e.getKey().toString(), 0);
}
También necesitamos hacer una pequeña lógica de negocio para incrementar los votos a alguna opción seleccionada y un método para obtener los votos de una opción en particular. Así que crearemos los siguientes métodos:
public void votoPara(String votoHecho) {
Integer cuenta = (Integer) votos.get(votoHecho);
if (cuenta == null) {
cuenta = 0;
}
cuenta++;
votos.put(votoHecho, cuenta);
}public int votosDe(String votoHecho) {
Integer cuenta = (Integer) votos.get(votoHecho);
if (cuenta == null) {
cuenta = 0;
}
return cuenta;
}
Ya tenemos las variables que son visibles desde toda la aplicación. Ahora haremos la variable que durará la sesión del usuario, así que abrimos la clase SessionBean1.java y agregamos la variable boolean haVotado con sus respectivos set/get.
private boolean haVotado;public boolean isHaVotado() { return haVotado;}
public void setHaVotado(boolean haVotado) { this.haVotado = haVotado;}
Y la última variable de nivel de requerimiento será la hora en que se accede al resultado de los votos. Así que abriremos la clase RequestBean1.java y agregamos la propiedad java.util.Date hora con su respecto set/get.
private java.util.Date hora;
public Date getHora() { return hora;}
public void setHora(Date hora) { this.hora = hora;}
Manejando los valores de los controles.
Ahora colocaremos los valores que creamos en el array equipos de la clase ApplicationBean1 en el formulario.
Vayamos al modo diseño visual de Page1.jsp, hagamos clic derecho sobre el objeto equipoMenu y seleccionamos Bind to data.
Seleccionamos el objeto equipo que se encuentra bajo el objeto ApplicationBean1.
Ilustración 6: Seleccion datos de equipoMenu.
Como las opciones solo se verán en tiempo de ejecución, no se pueden visualizar en el modo de edición los datos de este objeto.
Ahora hacemos clic derecho en el mismo menú y seleccionamos Add Binding Attribute como se ve en la siguiente imagen:
Ilustración 7: Creacion objeto equipoMenu.
Hacemos doble clic en equipoMenu y agregamos los siguientes métodos:
public void equipoMenu_processValueChange(ValueChangeEvent vce) {
if (equipoMenu.getValue().toString().equals(«UC«)) {
selectOneMenu2DefaultItems.setItems(getApplicationBean1().getUC());
} else if (equipoMenu.getValue().toString().equals(«CC«)) {
selectOneMenu2DefaultItems.setItems(getApplicationBean1().getCC());
} else if (equipoMenu.getValue().toString().equals(«UE«)) {
selectOneMenu2DefaultItems.setItems(getApplicationBean1().getUE());
} else if (equipoMenu.getValue().toString().equals(«UCH«)) {
selectOneMenu2DefaultItems.setItems(getApplicationBean1().getUCH());
}
}
protected ApplicationBean1 getApplicationBean1() {
return (ApplicationBean1) getBean(«ApplicationBean1«);
}
protected RequestBean1 getRequestBean1() {
return (RequestBean1) getBean(«RequestBean1«);
}
protected SessionBean1 getSessionBean1() {
return (SessionBean1) getBean(«SessionBean1«);
}
Y en el método init() agregamos:
selectOneMenu2DefaultItems.setItems(getApplicationBean1().getUC());
Ahora, debemos establecer que cuando el usuario haya hecho clic en el botón Votar, ya no puede volver a votar. Para ello necesitamos desactivar el botón. Así que el estado de este control depende del valor de la propiedad haVotado que está en la clase SessionBean1.
Haremos clic derecho sobre el botón, y seleccionamos Properties binding y seleccionamos en el panel izquierdo la propiedad disabled y en el panel derecho seleccionamos de SessionBean1.haVotado.
Ilustración 8: Deshabilitar botón al realizar voto.
Hacemos clic en el botón superior Design para ver el modo diseño de Page1.jsp y seleccionamos Add Binding Attribute en el menú de jugadores.
Luego hacemos doble-clic sobre el botón Votar, esto creará el método btnVotar_action() en la clase Page1.java.
Aquí obtendremos el valor seleccionado y lo incrementaremos en el contador de votos:
public String btnVotar_action() {
String votoHecho = jugadorMenu.getValue().toString();
getApplicationBean1().votoPara(votoHecho);
getSessionBean1().setHaVotado(true);
Date hora = new Date();
getRequestBean1().setHora(hora);
return null;
}
Regresamos al modo diseño de Page1.jsp y hacemos doble clic en el botón btnResultados y hacemos que devuelva la cadena mostrar_resultados.
public String btnResultados_action() {
return «mostrar_resultados«;
}
Página de respuesta.
Creamos una nueva página de la categoría JavaServer Faces y el tipo ICEfaces Visual Web JSF Page.
Ilustración 9: Creacion nueva página.
A la nueva página le agregamos el siguiente código:
<ice:form id=»form1«>
<ice:outputText id=»cabecera«style=»border-color: rgb(204, 204, 204); background-color: rgb(79, 115, 224); color: rgb(255, 255, 255); font-family: Calibri,Helvetica,sans-serif,Arial; font-size: 25px; font-style: normal; font-weight: normal; height: 60px; left: 72px; right: 10px; top: 24px; position: absolute; text-align: justify; vertical-align: middle; width: 864px; letter-spacing: 2px;word-spacing: 4px;» value=» Javalea Blog de Informática«/>
<ice:panelGrid id=»panel_central«style=»border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204); height: 457px; left: 72px; top: 120px; position: absolute«visible=»true» width=»600«/>
<ice:outputText escape=»false» id=»titulo_interno«style=»border-right: solid rgb(204, 204, 204) 1px; border-bottom: solid rgb(204, 204, 204) 1px; border-left: solid #cccccc 1px; background-color: rgb(255, 255, 204); color: rgb(51, 51, 51); font-family: cursive; font-size: X-small; font-variant: small-caps; font-weight: normal; left: 72px; top: 96px; position: absolute; text-align: left; vertical-align: middle; visibility: visible; width: 250px«value=» Resultados de los votos» visible=»true«/>
<ice:commandButton action=»#{Page2.inicioButton_action}» id=»inicioButton«style=»background-color: rgb(0, 51, 153); color: rgb(255, 255, 255); font-size: X-small; left: 96px; top: 144px; position: absolute» value=»Inicio«/>
<ice:commandButton action=»#{Page2.cargarButton_action}» id=»cargarButton«style=»background-color: rgb(0, 51, 153); color: rgb(255, 255, 255); font-size: X-small; left: 480px; top: 144px; position: absolute» value=»Recargar«/>
<ice:outputText binding=»#{Page2.resultadoText}» escape=»false» id=»resultadoText» style=»height: 258px; left: 96px; top: 168px; position: absolute; width: 454px«/>
<ice:outputText binding=»#{Page2.fechaText}» id=»fechaText» style=»left: 96px; top: 504px; position: absolute; width: 456px«/>
</ice:form>
Tanto para resultadoText como para fechaText hacemos clic derecho sobre el control y seleccionamos Add Binding Attribute.
Hagamos doble en el botón Inicio, se abrirá el editor del código de Page2.java, y se creará el método inicioButton_action(), modificamos el código para que tenga el siguiente contenido:
public String inicioButton_action() {
return «inicio«;
}
Estando en el archivo Page2.java, buscamos el método prederender() y lo editamos con el siguiente código:
ApplicationBean1 appBean = getApplicationBean1();
Map hm = appBean.getHm();
Iterator it = hm.entrySet().iterator();
StringBuilder sb = new StringBuilder();
sb.append(«<br>«);
sb.append(«<table border=’1′ cellpadding=’5′>«);
sb.append(«<tr>«);
sb.append(«<td>EQUIPO</td>«);
sb.append(«<td>JUGADOR</td>«);
sb.append(«<td>VOTOS</td>«);
sb.append(«</tr>«);
while (it.hasNext()) {
Map.Entry e = (Map.Entry)it.next();
int cuenta = appBean.votosDe(e.getKey().toString());
sb.append(«<tr>«);
sb.append(«<td>» + e.getValue() + «</td>«);sb.append(«<td>» + e.getKey() + «</td>«);
sb.append(«<td>» + cuenta + «</td>«);
sb.append(«</tr>«);
}sb.append(«</table>«);
resultadoText.setValue(sb);RequestBean1 reqBean=getRequestBean1();
Date hora=reqBean.getHora();if (hora!=null){
fechaText.setValue(«Su voto fue realizado el «
+(String)DateFormat.getTimeInstance(DateFormat.FULL).format(hora));
}
Navegación entre las páginas.
Abrimos el archivo faces-config.xml, hacemos clic en el botón superior que dice PageFlow para entrar al modo visual de la navegación de las páginas de JSF.
Modificamos el Diseño de la navegación de las páginas para que quede de la forma que se ve a continuación:
Ilustración 10: Diseño de PageFlow.
Ejecutando la aplicación.
Ejecutamos la aplicación presionando la tecla F6, se nos mostrará el navegador con la primera página (iPage1.jsp) que contiene lo que se ve a continuación:
Ilustración 11: Votación de futbolista.
Después de seleccionar un jugador de futbol perteneciente a un equipo de acuerdo al menú superior, votamos y vemos los resultados parciales de la votacion:
Ilustración 12: Resultado de la votacion.
Código del Proyecto.
El código fuente del proyecto utilizado en este tutorial se encuentra aquí https://javalea.wordpress.com/descarga-codigos/
Javalea Blog de Informática 