JSF Basico BD PDF

Java Server Faces (JSF)
Autor: Antonio J. Martn

NDICE
1. INTRODUCCIN................................................................................................... 5
1.1. CARACTERSTICAS DE JSF................................................................................... 5
2. COMPONENTES DE UNA APLICACIN JSF .................................................... 5
2.1. ARCHIVO DE CONFIGURACIN FACES-CONFIG.XML................................................. 6
2.2. SERVLET FACESSERVLET..................................................................................... 6
2.3. BEANS GESTIONADOS .......................................................................................... 7
2.4. CONTEXTO DE APLICACIN. LA CLASE FACESCONTEXT ......................................... 8
2.5. ACCIONES JSP.................................................................................................... 9
3. CREACIN DE UNA PRIMERA APLICACIN JSF............................................ 9
3.1. CREACIN DE LA ESTRUCTURA DE LA APLICACIN................................................ 10
3.2. IMPLEMENTACIN DEL MODELO........................................................................... 11
3.3. CREACIN Y REGISTRO DE BEANS GESTIONADOS................................................. 11
3.4. IMPLEMENTACIN DE CONTROLADORES DE ACCIN.............................................. 11
3.5. DEFINICIN DE REGLAS DE NAVEGACIN ............................................................. 12
3.6. CREACIN DE LAS VISTAS................................................................................... 13
EJERCICIO 1.................................................................................................. 16
EJERCICIO 2.................................................................................................. 20
4. EVENTOS DE ACCIN (ACTIONEVENT)......................................................... 24
5. CICLO DE VIDA DEL PROCESAMIENTO DE UNA PETICIN JSF................ 26
5.1. RESTORE VIEW.................................................................................................. 27
5.2. APPLY REQUEST VALUES................................................................................... 28
5.3. PROCESS VALIDATION........................................................................................ 28
5.4. UPDATE MODEL VALUES .................................................................................... 28
5.5. INVOKE APPLICATION ......................................................................................... 28
5.6. RENDER RESPONSE........................................................................................... 29
6. COMPONENTES GRFICOS JSF..................................................................... 29
6.1. RENDERIZACIN ................................................................................................ 30
6.2. TAGS DE COMPONENTES JSF............................................................................. 30
6.2.1. Formulario ................................................................................................. 32
6.2.2. Controles: atributos comunes. .................................................................. 32
6.2.3. Campos de texto ....................................................................................... 32
6.2.4. Controles de comando.............................................................................. 33
6.2.5. Generacin de texto.................................................................................. 33
6.2.6. Casillas de verificacin.............................................................................. 33
6.2.7. Listas de seleccin nica .......................................................................... 33
6.2.7.1. Componentes de una lista ................................................................. 34
6.2.8. Listas de seleccin mltiple ...................................................................... 35
6.3. EL EVENTO VALUECHANGEEVENT ...................................................................... 36
EJERCICIO 3.................................................................................................. 36
7. CONVERSORES Y VALIDADORES.................................................................. 41
7.1. VALIDADORES.................................................................................................... 42
7.1.1. Validacin automtica............................................................................... 42
7.1.2. Validadores implcitos JSF........................................................................ 45
7.1.3. Validadores personalizados...................................................................... 46
7.2. CONVERSORES.................................................................................................. 47
7.2.1. Conversores implcitos JSF ...................................................................... 48
1. INTRODUCCIN
JavaServer Faces (JSF) es un framework, incluido dentro de la especificacin Java EE,
que tiene como misin facilitar la construccin y mantenimiento de aplicaciones Web en Java,
siguiendo la arquitectura Modelo Vista Controlador.
En la definicin anterior hemos indicado una caracterstica que hace especial a JSF y la
diferencia de otros frameworks existentes, tambin orientados a la creacin de aplicaciones
MVC, como Struts; se trata del hecho de que JSF es parte de la especificacin Java EE. Esto
implica que la mayora de las herramientas creadas por terceros fabricantes para trabajar con
Java EE soportan esta tecnologa, convirtiendo as a JSF en el framework ms estandarizado
de todos los existentes y favoreciendo su rpida extensin.
1.1. CARACTERSTICAS DE JSF
Adems de lo comentado anteriormente, otras caractersticas que nos ofrece este
framework son:
Componentes de la interfaz de usuario. Habitualmente se suele decir que
JSF es un framework de interfaz de usuario, lo cual es debido al amplio
conjunto de componentes incluidos en el API JSF orientados a la creacin de
elementos grficos. Con ellos podemos construir potentes interfaces grficas
de una manera sencilla e independiente de la tecnologa utilizada para el
desarrollo de la vista, es decir, no slamente podemos emplear estos
componentes con pginas JSP, sino tambin con otras tecnologas como por
ejemplo velocity.
Modelo de navegacin declarativo. Como en cualquier aplicacin que siga el
patrn MVC, las peticiones son dirigidas al Controlador que se encarga de
analizarlas, despacharlas e invocar a la vista adecuada para la generacin de
la respuesta. En el caso de JSF la informacin referente a las posibles vistas
que deben ser generadas para cada pgina origen de la peticin se encuentra
registrada en un archivo de configuracin propio de JSF, llamado faces-
config.xml. Esta informacin, conocida como reglas de navegacin, es
consultada por el Controlador tras el procesamiento de una peticin cliente.
Ejecucin basada en eventos. De manera similar a como funcionan las
aplicaciones de escritorio, la programacin de una aplicacin JSF est basada
en parte en la captura de eventos sobre la interfaz grfica. A travs de los
atributos de las acciones JSF que representan a los componentes grficos, es
posible asociar estos eventos con mtodos de respuesta implementados en
los beans gestionados u otras clases del Controlador, de modo que cuando se
lance una peticin desde la pgina a la aplicacin (lo que se conoce como un
postback) el framework ser capaz de detectar los eventos producidos y
ejecutar los mtodos de respuesta a los mismos en el orden en que han tenido
lugar.
2. COMPONENTES DE UNA APLICACIN JSF
Como sucede con otros frameworks, JSF est orientado a prestar soporte para la
construccin de las capas Controlador y Vista de la aplicacin, implementndose el Modelo con
los elementos habituales para la encapsulacin de la lgica de negocio: clases estndares y
EJBs.
En lo que respecta a las otras dos capas de la aplicacin, Controlador y Vista, la
tecnologa JSF aporta los siguientes elementos:
2.1. ARCHIVO DE CONFIGURACIN FACES-CONFIG.XML
Se utiliza para definir diversos elementos clave para el funcionamiento de la aplicacin
JSF, como las reglas de navegacin o los beans gestionados y su mbito de utilizacin.
Esta informacin es utilizada por el controlador FacesServlet para despachar las
peticiones que llegan a la aplicacin y activar las vistas que deben generar las respuestas al
cliente en cada caso.
La estructura de un documento faces-config es la que se muestra en el siguiente
listado:
<?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>
:
</faces-config>
2.2. SERVLET FACESSERVLET.
Incluido dentro del paquete javax.faces.webapp, este servlet constituye el punto de
entrada a la aplicacin Web, haciendo las tareas de Front Controler. A el llegan todas las
peticiones procedentes de la capa cliente, encargndose de despachar cada una de ellas en
funcin de la informacin almacenada en el archivo de configuracin faces-config.xml.
Como sucede con cualquier otro servlet de una aplicacin, FacesServlet debe ser
registrado en el archivo de configuracin web.xml. Por convencin suele utilizarse la expresin
/faces/* como patrn de URL asociado al servlet, lo que significa que cualquier URL relativa
que comience por /faces/ provocar la ejecucin del servlet. He aqu el bloque de sentencias
de configuracin tpico de FacesServlet:

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
2.3. BEANS GESTIONADOS
Los beans gestionados son uno de los elementos ms caractersticos de una aplicacin
JSF. Se trata de simples JavaBeans que, adems de ser utilizados para la encapsulacin de
los datos procedentes de la capa cliente, incluyen los mtodos de respuesta a los eventos
producidos en la capa cliente.
Buscando una comparativa con struts, un bean gestionado es una combinacin de un
ActionForm y un Action en una misma clase, con la particularidad aadida de que el bean
gestionado es implementado mediante una simple clase POJO (Plain and Old Java Object), es
decir, una clase que no necesita heredar ni implementar ninguna clase o interfaz especial.
Precisamente se les llama gestionados porque es el propio framework el que se encarga
totalmente de la gestin de su ciclo de vida, es decir, de su instanciacin, recuperacin,
rellenado de datos, invocacin a los mtodos de respuesta a eventos, etc. El programador
simplemente tendr que codificarlo y registrarlo en el archivo de configuracin de JSF.
El siguiente ejemplo representa un bean que encapsula los credenciales de usuario e
incluye un mtodo para realizar la validacin del mismo:
package javabeans;
public class CredencialesBean {
private String user;
private String password;
public CredencialesBean () {
}
public String getUser() {
return user;
}
public void setUser(String user) {
this.user = user;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String doLogin(){
if(password.equals(admin)){
return valido;
}
else{
return novalido;
}
}
}
El mtodo doLogin() es el llamado controlador de accin o mtodo de aplicacin.
Se trata de un mtodo asociado a los controles de comando (componentes grficos
UICommand que pueden ser representados como un botn de pulsacin o un enlace). Cada
vez que uno de estos controles es activado, se lanza una peticin a la aplicacin
(postback) que har que se ejecute este mtodo. Ms adelante analizaremos el significado
del objeto String devuelto por este tipo de mtodos.
En caso de requerir una lgica de negocio ms compleja para realizar la validacin de
los datos, que incluyera por ejemplo un acceso a los datos, dichas operaciones seran aisladas
en una clase o EJB independiente, incluyendo nicamente el mtodo doLogin() la llamada a los
mtodos de negocio.
Para registrar este bean en el archivo faces-config.xml habra que incluir el siguiente
bloque de texto en el interior del elemento faces-config:
<managed-bean>
<managed-bean-name>credencialesBean</managed-bean-name>
<managed-bean-class>
javabeans.CredencialesBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
A continuacin se explica el significado de los elementos utilizados para el registro de
un bean gestionado:
managed-bean. Es el elemento principal en el que se incluyen los datos de
registro del bean. Ser necesario aadir un bloque <managed-bean> por cada
bean que se quiera sea gestionado por el framework.
managed-bean-name. Es el nombre que permite referirse a la instancia del
bean. Este nombre es utilizado mediante el lenguaje EL desde los componentes
de la interfaz para acceder a las propiedades y mtodos del objeto.
managed-bean-class. Nombre cualificado de la clase a la que pertenece el
bean.
managed-bean.scope. mbito en el que ser mantenida la instancia, siendo sus
posibles valores: request, session y application.
El bean gestionado es parte tanto de la Vista como del Controlador ya que es utilizado
por ambas capas, en el primer caso para almacenar los datos cliente y en el segundo para
despachar la peticin.
2.4. CONTEXTO DE APLICACIN. LA CLASE FACESCONTEXT
Las aplicaciones JSF deben ser capaces de almacenar informacin sobre la peticin en
curso. Toda esta informacin es accesible al programador a travs de la clase FacesContext
existente en el paquete javax.faces.context.
Ms adelante veremos algunas de las aplicaciones ms importantes de esta clase.
2.5. ACCIONES JSP
Como se ha indicado con anterioridad, JSF incluye un elevado nmero de
componentes grficos para la construccin de potentes interfaces de usuario.
En el caso de que las vistas sean implementadas mediante pginas JSP el acceso a
estos componentes se realizar a travs de una serie de libreras de acciones JSP.
Concretamente, la especificacin JSP incluye dos tipos de libreras de acciones:
La librera html. Esta librera proporciona adems de los controles bsicos html
con capacidades mejoradas, una serie de componentes grficos complejos
orientados a la presentacin de datos en la pgina. Todos los controles incluidos
en esta librera se integran perfectamente con el modelo de JavaBean de Java,
permitiendo vincular de manera automtica las propiedades de un objeto con las
de un control de la interfaz.
Para poder hacer uso de esta librera en el interior de una pgina JSP se debera
incluir la siguiente directiva taglib:
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
La siguiente etiqueta representa un ejemplo de uso de un componente grfico de
tipo caja de texto, en el que a travs del elemento value conseguimos vincular el
contenido del control a un la propiedad de un JavaBean:
<h:inputText value="${credencialesBean.user}"/>
La librera core. Adems de incluir elementos bsicos para la generacin de una
vista JSF, esta librera proporciona unos componentes especiales conocidos
como validadores y conversores que permiten realizar validaciones y
conversiones de datos, respectivamente, de la informacin suministrada por el
usuario a travs de la interfaz, todo ello de manera que el programador no tenga
que incluir una sola lnea de cdigo para esta tarea.
La directiva taglib necesaria para utilizar las acciones de esta librera sera:
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
3. CREACIN DE UNA PRIMERA APLICACIN JSF
Vamos a realizar una sencilla aplicacin que nos permita poner en prctica los
conceptos explicados anteriormente, as como conocer el proceso bsico de creacin de una
aplicacin basada en este framework.
La aplicacin consistir en validar los credenciales introducidos por el usuario a travs
de una pgina de login. Si el usuario es vlido se mostrar una pgina con los dos datos
introducidos y si no se le llevar a una pgina de error. El esquema con las tres pginas
involucradas se muestra en la figura 1.
Figura. 1.
Vamos a ir viendo los pasos que tenemos que seguir para construir la aplicacin.
3.1. CREACIN DE LA ESTRUCTURA DE LA APLICACIN.
En este primer paso debemos crear la estructura de la aplicacin Web y aadir las
libreras necesarias para trabajar con JSF, as como crear el archivo de configuracin faces-
config.xml y registrar el servlet FacesServlet en el web.xml.
Si contamos con un entorno de desarrollo como NetBeans todas estas operaciones se
pueden realizar de forma automtica. Para ello, en el asistente de creacin de aplicacin Web
debemos activar en el ltimo paso la casilla correspondiente al framework JavaServer Faces,
tal y como se indica en la figura 2.
Figura. 2.
Con esto no slo se crear la estructura de la aplicacin Web, sino que tambin se
llevarn a cabo las operaciones descritas anteriormente.
Password
correcto
Password
incorrecto
login.jsp valido.jsp
novalido.jsp
3.2. IMPLEMENTACIN DEL MODELO
Como se indic anteriormente, la implementacin de la capa de negocio en una
aplicacin JSF es un proceso en el que no interviene ningn elemento de est tecnologa.
El desarrollo de estos componentes de negocio puede realizarse de manera
independiente al resto de las capas.
En este ejemplo no hay que desarrollar ninguna clase de negocio, puesto que la nica
lgica existente ir incluida en el mtodo controlador de accin que ser ejecutado con la
pulsacin del botn Aceptar.
3.3. CREACIN Y REGISTRO DE BEANS GESTIONADOS
El nico bean gestionado que utilizaremos en esta aplicacin ser el CredencialesBean
presentado anteriormente, registrndolo en el archivo faces-config.xml mediante el bloque de
sentencias XML indicado.
El archivo faces-config.xml podemos encontrarlo en la carpeta configuration files de
NetBeans.
3.4. IMPLEMENTACIN DE CONTROLADORES DE ACCIN
Los mtodos controladores de accin, se implementan en los propios beans
gestionados. Estos mtodos sern ejecutados por el controlador tras procesarse la peticin
generada por control de comando, despus de que se hayan rellenado los campos del bean
con los datos recibidos en la peticin.
Como resultado de su ejecucin, los controladores de accin deben devolver un String
que es utilizado por FacesServlet para determinar la siguiente vista que deber ser invocada,
informacin esta que se encuentra definida en las reglas de navegacin dentro de faces-config.
En nuestra aplicacin de ejemplo, el mtodo doLogin() correspondiente a la pulsacin
del botn Aceptar es bastante simple:
public String doLogin(){
if(password.equals("admin")){
return "valido";
}
else{
return "novalido";
}
}
Como vemos se devuelven dos posibles valores en funcin de si el password se
considera o no vlido. Dichos valores determinarn a donde ser redirigido el usuario.
Aunque en este ejemplo no hemos tenido necesidad de ello, en numerosas ocasiones
puede ocurrir que necesitemos acceder desde el controlador de accin a alguno de los objetos
clsicos del API servlet para interactuar con la aplicacin Web.
A diferencia de los mtodos execute() de los objetos de Struts, donde se reciba como
parmetros referencias a los objetos HttpServletRequest y HttpServletResponse, los mtodos
controladores de accin de los beans gestionados no reciben ningn parmetro. No
obstante, se puede acceder al contexto de aplicacin desde estos mtodos a travs de la clase
javax.faces.context.ExternalContext cuyos mtodos getRequest(), getResponse(),
getSession(), etc. nos devuelven referencias a los distintos objetos de aplicacin.
Para poder obtener un objeto ExternalContext debemos recurrir a la clase
FacesContext existente en el mismo paquete. El siguiente bloque de instrucciones de ejemplo
sera el cdigo que deberamos utilizar para obtener un objeto Request desde un mtodo de
accin:
FacesContext context=FacesContext.getCurrentInstance();
ExternalContext excontext=context. getExternalContext();
HttpServletRequest request=
(HttpServletRequest)excontext. getRequest();
3.5. DEFINICIN DE REGLAS DE NAVEGACIN
Las reglas de navegacin determinan el flujo de navegacin entre las distintas vistas de
la aplicacin. Las reglas de navegacin son aplicadas por FacesServlet cuando ste recibe una
peticin desde el navegador, con motivo de la generacin de un evento de accin en la pgina
cliente.
En cada regla de navegacin se indican, para cada pgina origen, las posibles pginas
destino a las que ser redirigido el usuario en funcin de los valores devueltos por el mtodo de
accin. Una regla de navegacin se define mediante el elemento <navigation-rule>, el cual
incluir los siguientes sub elementos:
from-view-id. URL relativa de la pgina origen para la que se define la regla de
navegacin.
navigation-case. Define el posible destino al que ser reenviada la peticin del
usuario. Cada uno de estos posibles destinos requiere su propio <navigation-
case> que deber incluir a su vez los siguientes subelementos:
- from-outcome. Valor devuelto por el mtodo de accin, que provocar
la navegacin a este destino.
- to-view-id. URL relativa de la vista destino.
En el ejemplo que estamos desarrollando nicamente debemos incluir la regla de
navegacin asociada al evento del botn Aceptar de la pgina login.jsp, regla que
indicaremos a continuacin de la definicin de los beans gestionados:
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config
1.1//EN"

<faces-config>
<managed-bean>
<managed-bean-name>credencialesBean</managed-bean-name>
<managed-bean-class>javabeans.CredencialesBean
</managed-bean>
<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-outcome>valido</from-outcome>
<to-view-id>/valido.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>novalido</from-outcome>
<to-view-id>/novalido.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Algo muy importante que debemos tener en cuenta a la hora de definir reglas de
navegacin es que, si el valor devuelto por alguno de los mtodos de accin incluidos en la
pgina origen no coincide con ninguno de los valores indicados en los elementos <from-
outcome>, se producir la recarga de la pgina origen.
3.6. CREACIN DE LAS VISTAS
Finalmente, procedemos a crear las distintas vistas de la aplicacin. Todas las
pginas JSP en las que vayamos a hacer uso de algunas de las libreras de acciones JSF
debern incluir el elemento <f:view> de la librara core, dentro del cual se incluirn el resto
de acciones JSF de la pgina.
En el caso de la pgina login.jsp, utilizaremos las acciones inputText e inputSecret de
JSF para generar los campos de texto usuario y password, respectivamente. Estas acciones
disponen de un atributo value que nos permite vincular los controles con las propiedades
de un bean gestionado, mostrando en su interior el valor de la propiedad cuando la pgina es
cargada y volcando en la propiedad el contenido del campo cuando se produce el submit de la
pgina.
Por su parte, el botn Aceptar ser generado mediante la accin commandButton, en
cuyo atributo action habr que indicar, mediante notacin EL, el nombre del mtodo
controlador de accin que habr que invocar cuando se produzca la pulsacin del botn.
Como ya se indic con anterioridad, la activacin de este tipo de controles provoca
automticamente el submit o postback de la pgina.
He aqu el cdigo completo de la pgina login.jsp:
<%@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>
<br/><br/>
<center><h1>Pgina de validacin</h1></center>
<f:view>
<h:form>
<table width="50%" align="center" border="0">
<tr>
<td>Nombre usuario:</td>
<td><h:inputText
value="#{credencialesBean.user}"/></td>
</tr>
<tr>
<td>Contrasea:</td>
<td><h:inputSecret
value="#{credencialesBean.password}"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<h:commandButton value="Aceptar"
action="#{credencialesBean.doLogin}"/>
</td>
</tr>
</table>
</h:form>
</f:view>
</body>
</html>
Pudiera ocurrir que la pulsacin de un botn de comando no tuviera que ejecutar
ningn cdigo de servidor concreto, tan solo producir una navegacin esttica a una
determinada vista de la aplicacin. En este caso, basta con indicar como valor del atributo
action la cadena de caracteres asociada a la pgina destino en la regla de navegacin.
En cuanto a la pgina valido.jsp encargada de mostrar los credenciales del usuario
vlido, utiliza un elemento outputText para mostrar el valor de cada dato. Este elemento realiza
la misma funcin que una expresin JSP:
<%=expresion%>
En su atributo value se deber indicar el valor a mostrar, que podr ser una cadena de
texto esttica o una expresin EL que devuelva algn dato existente en cualquiera de los
mbitos de aplicacin. En este caso, se utiliza una expresin EL para acceder a las
propiedades del bean credencialesBean, que al tener mbito de peticin (request) es accesible
desde esta pgina. El cdigo de la pgina valido.jsp se muestra en el siguiente listado:
<html>
<head>
charset=UTF-8">
</head>
<body>
<f:view>
<h2>Sus datos:</h2>
Usuario: <h:outputText
value="#{credencialesBean.user}"/><br/>
Password: <h:outputText
value="#{credencialesBean.password}"/><br/>
</f:view>
</body>
</html>
En cuanto a la pgina novalido.jsp, su contenido se indica en el siguiente listado:
<html>
<head>
charset=UTF-8">
</head>
<body>
<f:view>
<h2>Error</h2>
El password <b><h:outputText
value="#{credencialesBean.password}"/>
</b> no es correcto
</f:view>
</body>
</html>
EJERCICIO 1
Seguidamente vamos a realizar una aplicacin que permita recoger datos de una
persona y almacenarlos en una coleccin. as mismo, el programa permitir al usuario ver los
datos de todas las personas que ha almacenado durante su sesin.
La pgina de inicio tendr el aspecto que se indica en la figura 3.
Figura. 3.
El botn Guardar almacenar en la coleccin una nueva persona con los datos
suministrados a travs de los campos de texto, permaneciendo despus el usuario en la misma
pgina. Por otro lado, la pulsacin del botn Ver Todos nos llevar a una nueva pgina donde
se muestren los datos de todas las personas grabadas por ese usuario, tal y como se indica en
la figura 4.
Figura. 4.
Para empezar, crearemos un bean gestionado llamado PersonaBean que encapsule
los datos de la persona e incluya un mtodo doGuardar() que tenga como misin almacenar los
datos de la nueva persona en un objeto ArrayList. Este objeto ser almacenado en un atributo
de sesin para que sea accesible desde todas las peticiones realizadas durante la sesin. El
siguiente listado nos muestra el cdigo de la clase PersonaBean:
package javabeans;
import java.util.*;
import javax.faces.context.FacesContext;
import javax.servlet.http.*;
public class PersonaBean {
private String nombre;
private long telefono;
private int edad;
public PersonaBean() {
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public long getTelefono() {
return telefono;
}
public void setTelefono(long telefono) {
this.telefono = telefono;
}
public int getEdad() {
return edad;
}
public void setEdad(int edad) {
this.edad = edad;
}
public String doGuardar(){
FacesContext context=FacesContext.getCurrentInstance();
HttpSession sesion=(HttpSession)context.
getExternalContext().getSession(true);
ArrayList<PersonaBean> listapersonas;
listapersonas=(ArrayList<PersonaBean>)sesion.
getAttribute("listapersonas");
//comprueba si ya existe la coleccin de personas
//en la sesin y si no es as la crea
if(listapersonas==null){
listapersonas=new ArrayList<PersonaBean>();
sesion.setAttribute("listapersonas",listapersonas);
}
listapersonas.add(this);
return null;
}
}
Podemos observar en la clase anterior como no hemos creado ningn mtodo para
responder a la pulsacin del botn Ver Todos. El motivo es que este botn simplemente
genera una navegacin esttica a la pgina del listado de personas, ver.jsp.
Otro detalle interesante es la devolucin del valor null por el mtodo doGuardar(). Esto
es as porque tras ejecutar el mtodo el usuario debe permanecer en la misma pgina, para lo
que basta con que el mtodo devuelva un valor no definido en ninguno de los elementos
<navigation-case>.
El siguiente listado corresponde al archivo de configuracin faces-config.xml, donde
podemos observar el registro de PersonaBean as como las reglas de navegacin:
1.1//EN"
<faces-config>
<managed-bean>
<managed-bean-name>PersonaBean</managed-bean-name>
<managed-bean-class>
javabeans.PersonaBean
</managed-bean>
<navigation-rule>
<from-view-id>/grabadatos.jsp</from-view-id>
<navigation-case>
<from-outcome>ver</from-outcome>
<to-view-id>/ver.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
En cuanto a las vistas, el siguiente cdigo corresponde a la pgina de solicitud de
datos, grabadatos.jsp:
<html>
<head>
charset=UTF-8">
</head>
<body>
<center><h1>Formulario de datos</h1></center>
<f:view>
<h:form>
<tr>
<td>Nombre:</td>
<td><h:inputText
value="#{PersonaBean.nombre}"/></td>
</tr>
<tr>
<td>Telfono:</td>
<td><h:inputText
value="#{PersonaBean.telefono}"/></td>
</tr>
<tr>
<td>Edad:</td>
<td><h:inputText
value="#{PersonaBean.edad}"/></td>
</tr>
<tr>
<h:commandButton value="Guardar"
action="#{PersonaBean.doGuardar}"/>
</td>
</tr>
<tr>
<h:commandButton value="Ver Todos"
action="ver"/>
</td>
</tr>
</table>
</h:form>
</f:view>
</html>
Obsrvese como el valor del atributo action del commandButton Ver Todos contiene
nicamente la cadena de texto asociada a la pgina ver.jsp en la regla de navegacin.
En cuanto a ver.jsp, se ha utilizado la librera core de JSTL para recorrer la coleccin
de objetos y mostrar sus propiedades en una tabla HTML. He aqu el cdigo de la pgina:
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
charset=UTF-8">
</head>
<body>
<center><h1>Listado de personas</h1></center>
<table border="1" align="center">
<tr>
<th>Nombre</th>
<th>Telfono</th>
<th>Edad</th>
</tr>
<c:forEach var="per" items="${listapersonas}">
<tr>
<td><c:out value="${per.nombre}"/></td>
<td><c:out value="${per.telefono}"/></td>
<td><c:out value="${per.edad}"/></td>
</tr>
</c:forEach>
</table>
</body>
</html>
EJERCICIO 2
En esta ocasin vamos a realizar un ejercicio que incluya acceso a datos. Se trata de
una pgina de registro que permita insertar usuarios en una tabla de clientes, tal y como se
indica en la figura 5.
Figura. 5.
Cuando se pulse el botn Grabar se proceder a guardar los datos del nuevo cliente
en la base de datos. Si la insercin del registro se ha realizado correctamente, se mostrar una
pgina con un mensaje indicando dicha circunstancia, sino, se volver a recargar la misma
pgina de registro con un mensaje de error en la parte inferior de la misma.
El acceso a los datos lo aislaremos en una clase llamada Operaciones cuyo cdigo se
muestra en el siguiente listado:
package modelo;
import java.sql.*;
import javabeans.*;
public class Operaciones {
public Connection obtenerConexion() {
Connection cn=null;
try{
Class.forName("com.mysql.jdbc.Driver");
cn=DriverManager.getConnection(
"jdbc:mysql://localhost:3306/libreria");
}
catch(Exception e){e.printStackTrace();}
return cn;
}
public boolean insertarCliente(ClienteBean c){
boolean resultado=false;
String sql="Insert into clientes values('";
sql+=c.getUsuario()+"','";
sql+=c.getPassword()+"','";
sql+=c.getEmail()+"',";
sql+=c.getTelefono()+")";
try{
Connection cn=obtenerConexion();
Statement st=cn.createStatement();
st.execute(sql);
cn.close();
resultado=true;
}
catch(Exception e){c.setTextoError(
"error en los datos!");
e.printStackTrace();}
return resultado;
}
}
Por su parte, utilizaremos un bean gestionado al que llamaremos ClienteBean para
capturar los datos del nuevo cliente. Este bean, contar adems con un mtodo que ser
ejecutado como respuesta al comando de accin, y que ser el encargado de operar con el
modelo.
A continuacin se indica el cdigo de esta clase:
package javabeans;
import modelo.*;
public class ClienteBean {
private String usuario;
private String password;
private String email;
private long telefono;
private String textoError;
public ClienteBean() {
}
public String getUsuario() {
return usuario;
}
public void setUsuario(String usuario) {
this.usuario = usuario;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public long getTelefono() {
return telefono;
}
public void setTelefono(long telefono) {
this.telefono = telefono;
}
public String getTextoError() {
return textoError;
}
public void setTextoError(String textoError) {
this.textoError = textoError;
}
public String grabar(){
Operaciones op=new Operaciones();
if(op.insertarCliente(this)){
return "ok";
}
else{
return "mal";
}
}
}
En cuanto a la pgina de registro, el siguiente listado corresponde al cdigo JSP de la
misma:
<html>
<head>
charset=UTF-8">
</head>
<body>
<f:view>
<h1>Pgina de registro</h1>
<h:form>
<table>
<tr>
<td>Usuario:</td>
<td><h:inputText
value="#{ClienteBean.usuario}"/></td>
</tr>
<tr>
<td>Password:</td>
<td><h:inputText
value="#{ClienteBean.password}"/></td>
</tr>
<tr>
<td>Email:</td>
<td><h:inputText
value="#{ClienteBean.email}"/></td>
</tr>
<tr>
<td>Telfono</td>
<td><h:inputText
value="#{ClienteBean.telefono}"/></td>
</tr>
<tr>
<h:commandButton value="Grabar"
action="#{ClienteBean.grabar}"/>
</td>
</tr>
<h2>
<h:outputText
value="#{ClienteBean.textoError}"/>
</h2>
</table>
</h:form>
</f:view>
</body>
</html>
Obsrvese el uso del tag <h:outputText> para mostrar el mensaje de error.
El siguiente ser el listado de la pgina que se muestra cuando el usuario ha sido
registrado correctamente:
<html>
<head>
charset=UTF-8">
</head>
<body>
<h1>El usuario ha sido registrado correctamente!</h1>
</body>
</html>
En cuanto a faces-context.xml, el siguiente listado muestra el contenido del mismo
donde se refleja el registro del bean y la regla de navegacin:
1.1//EN"
<faces-config>
<managed-bean>
<managed-bean-name>ClienteBean</managed-bean-name>
<managed-bean-class>javabeans.ClienteBean
</managed-bean>
<navigation-rule>
<from-view-id>/registro.jsp</from-view-id>
<navigation-case>
<from-outcome>ok</from-outcome>
<to-view-id>/registrado.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
4. EVENTOS DE ACCIN (ACTIONEVENT)
La activacin de un botn o enlace generado mediante un control de comando, adems
de provocar el submit de la pgina genera un evento, conocido como evento de accin al que
se puede asociar un mtodo escuchador en alguna de las clases Java del servidor.
Normalmente, estos mtodos escuchadores se codifican en el bean gestionado junto
con los mtodos controladores de accin.
As pues, nos encontramos con que un control de comando puede tener asociado dos
tipos de mtodos que sern ejecutados como respuesta a su activacin: los controladores de
accin y los escuchadores de accin.
Es importante tener en cuenta las diferencias entre ambos mtodos:
Los controladores de accin realizan operaciones de aplicacin, relacionadas
con la funcionalidad de esta (aunque normalmente se suele aislar toda la lgica
de negocio en el Modelo), mientras que los escuchadores de accin se utilizan
para realizar algn tipo de actuacin sobre la interfaz grfica. Para ello, los
mtodos de escuchadores reciben como parmetro un objeto
javax.faces.event.ActionEvent que proporciona informacin sobre el componente
que produjo el evento.
Los controles de accin afectan a las reglas de validacin, mientras que los
escuchadores no. Un mtodo escuchador no devuelve ningn resultado.
Los escuchadores de accin pueden ser ejecutados antes de procederse a la
validacin de los datos (segn valor del atributo inmediate), mientras que, como
ya sabemos, los controladores de accin siempre son ejecutados despus de
que esta validacin se haya realizado.
Para asociar a un control de comando el correspondiente mtodo escuchador, se
emplea el atributo actionListener de la etiqueta correspondiente. Por ejemplo, la siguiente
instruccin genera un commandButton al que asocia el mtodo limpiar definido en el bean
DatosBean, como respuesta a su evento de accin:
<h:commandButton value=Reset
actionListener= #{DatosBean.limpiar}/>
El formato del mtodo limpiar sera:
public void limpiar (ActionEvent e){
//cdigo
}
Mediante el atributo boolean inmediate de commandButton se puede especificar el
momento exacto en que queremos ejecutar el mtodo escuchador. Si su valor es true, la
ejecucin se producir antes de que los datos sean validados, mientras que si es false se
ejecutar despus de que los datos hayan sido almacenados en el bean al final del ciclo de
vida de la peticin, justo antes de la ejecucin del controlador de accin.
4.1. INFORMACIN SOBRE EL EVENTO: LAS CLASES ACTIONEVENT Y
UICOMPONENT
Es habitual que desde un mtodo escuchador se quiera acceder a los objetos grficos
de la interfaz.
Para este fin, el mtodo getComponent() de la clase ActionEvent (mtodo heredado de
la subclase FacesEvent) devuelve un objeto UIComponent que representa el componente
origen del evento.
UIComponent es la clase base de todos los componentes de interfaz de usuario de
JSF. Esta clase dispone un amplio conjunto de mtodos con los que podemos acceder a
diversas propiedades grficas de inters no slo del componente en el que se ha producido el
evento, sino tambin del resto de objetos de la interfaz.
Aunque ms adelante estudiaremos con ms detenimiento la clase UIComponent y sus
subclases especficas correspondientes a los distintos componentes grficos JSF,
comentaremos a continuacin algunos de los mtodos ms importantes incluidos en esta clase.
Entre ellos se encuentran:
String getId(). Devuelve un String con el valor del atributo id del componente.
UIComponent getParent(). Devuelve el componente padre del objeto.
List getChildren(). Devuelve la coleccin con todos los hijos del componente.
UIComponent findComponent(String id). Este mtodo intenta localizar en la
misma interfaz un componente cuyo id se especifica. Este mtodo resulta
bastante til para acceder desde el mtodo manejador de evento al resto de los
componentes del formulario.
void setRendered(boolean render). Establece la propiedad rendered del
componente. Esta propiedad indica si el componente ser o no renderizado
(generado dentro de la interfaz) al ser enviada la pgina al cliente.
Veamos un ejemplo de utilizacin de eventos de accin en el ejercicio anterior de
almacenamiento y visualizacin de personas.
La modificacin consistir en hacer inicialmente invisible el botn Ver Todos para que
no se pueda acceder a la lista de personas hasta que no se haya guardado al menos una. Al
pulsar el botn Guardar se proceder a hacer visible el botn Ver Todos la prxima vez que
se muestre la pgina.
Para hacer invisible inicialmente el botn Ver Todos simplemente tenemos que
establecer el valor false en el atributo rendered del componente, as mismo, estableceremos un
valor a su atributo id para poder referirnos despus al componente desde cdigo:
<h:commandButton id="vertodos" rendered="false"
value="Ver Todos" action="ver"/>
La visualizacin del botn la programaremos en el evento ActionListener del botn
Guardar:
actionListener="#{PersonaBean.doHabilitar}"
action="#{PersonaBean.doGuardar}" />
Como vemos, se vincula este evento con un nuevo mtodo doHabilitar() definido en la
clase PersonaBean, he aqu el cdigo de este mtodo:
public void doHabilitar(ActionEvent ev){
UIComponent cp=ev.getComponent();
UIComponent btnver=cp.findComponent("vertodos");
btnver.setRendered(true);
}
5. CICLO DE VIDA DEL PROCESAMIENTO DE UNA
PETICIN JSF
En este contexto entendemos por ciclo de vida el proceso que tiene lugar desde que el
controlador FacesServlet recibe una peticin procedente del navegador cliente hasta que
devuelve la respuesta apropiada.
Es importante tener en cuenta que las fases por las que pase este proceso variaran en
funcin de si la peticin ha sido enviada desde una pgina generada previamente por el
framework JSP (postback) o no. En este ltimo caso hablaramos de peticin inicial, pues se
refiere a aquellos casos en los que la peticin se realiza mediante la introduccin de la URL
directamente en el navegador, o al activar un vnculo de alguna pgina HTML esttica.
La figura 6 muestra las diferentes fases que tienen lugar durante el ciclo de vida de la
peticin.
Figura. 6.
Tal como se puede apreciar, en el caso que se trate de una peticin inicial las fases 2
al 5 sern omitidos, pasando directamente a la ltima fase encargada de generar la respuesta
al usuario.
Seguidamente analizaremos las acciones que tienen lugar en cada una de estas seis
fases.
5.1. RESTORE VIEW.
Durante esta primera fase, se intenta recuperar el estado del cliente. El estado del
cliente est formado por el conjunto de objetos grficos UIxxx que forman la interfaz grfica de
la pgina desde la que se realiza la peticin y que durante la anterior peticin fue salvado por el
framework (normalmente en el objeto session), luego este estado solo ha podido ser
almacenado anteriormente si no se trata de una peticin inicial.
Lgicamente, en caso de que se trate de una peticin inicial el estado anterior no
existir, procedindose a crear un nuevo rbol del componentes asociado a la pgina
solicitada.
El rbol de componentes consta de un objeto raz UIViewRoot que no est asociado a
ningn elemento visual concreto. De l colgarn los distintos objetos grficos de la pgina
(formularios, botones, etc.). La figura 7 muestra un rbol de componentes de ejemplo formado
por tres elementos grficos.
FacesServlet
Restore View
Peticin
Apply Request Values
Process Validations
Update Model Values
Invoke Application
Render Response
Respuesta
Figura. 7.
Una vez que se dispone del rbol de componentes (nuevo o recuperado), se procede a
almacenarlo en el contexto de aplicacin (FacesContext).
Tras realizar esta operacin se pasa a la siguiente fase que, en el caso de una peticin
inicial, ser la ltima fase del ciclo (Render Response), mientras que si es un postback ser la
siguiente del ciclo (Apply Request Values).
5.2. APPLY REQUEST VALUES
El propsito de esta fase es permitir que el rbol de componentes pueda alimentarse
con los datos procedentes de la peticin. Durante esta fase, adems, son ejecutados los
mtodos escuchadores de evento para todos aquellos componentes en los que el atributo
inmediate se haya establecido al valor true. Para aquellos en los que el valor de dicho atributo
sea false, los eventos generados sern enviados a una cola de la cual sern extrados durante
la penltima fase del ciclo para la ejecucin de sus mtodos escuchadores en el orden
producido.
5.3. PROCESS VALIDATION
Una vez actualizados los valores de los componentes, se procede a la validacin de los
datos mediante el procesado de los validadores y conversores asociados a cada componentes
(ms adelante veremos el uso de estos elementos).
Si el proceso de validacin de alguno de los componentes falla se dar por terminado
el procesamiento de la peticin y se pasar a la ltima fase del ciclo.
5.4. UPDATE MODEL VALUES
Durante esta fase, todos los valores recibidos en la peticin y que ya han sido
correctamente validados y convertidos, son asignados a los correspondientes propiedades de
los beans gestionados, segn se indica en el atributo value de cada componente grfico.
Si durante este proceso de asignacin se produce algn error, el procesamiento de la
peticin se dar por terminado y se pasar a la ltima fase del ciclo.
5.5. INVOKE APPLICATION
Se proceder a la ejecucin de los mtodos escuchadores de los eventos encolados,
siguiendo el orden en que dichos eventos se han producido.
Finalmente, se ejecutar el mtodo controlador de accin, cuyo valor de devolucin
ser utilizado por FacesServlet para determinar la siguiente pgina a ejecutar, finalizando en
este punto el procesamiento de la peticin.
HtmlForm
UIViewRoot
HtmlTextBoxButton HtmlCommandButton
Si el valor devuelto por el mtodo controlador es null, o no coincide con ninguno de los
valores definidos en las reglas de navegacin o, simplemente, no existe el mtodo controlador,
se proceder a la ejecucin de la siguiente y ltima fase. En este caso pues, la respuesta que
recibir el cliente ser la propia pgina desde la que lanz la peticin.
5.6. RENDER RESPONSE
El propsito de esta fase es preparar la respuesta para el usuario, la cual es generada
directamente a partir de las codificaciones definidas por los renderizadores asociados a cada
uno de los componentes del rbol.
Por defecto, cada componente lleva asociado un renderizador que se encarga de
transformar el componente en su correspondiente bloque de etiquetas XHTML. No obstante, a
travs del archivo de configuracin faces-config.xml pueden especificarse otros kits de
renderizacin que transformen los componentes en otros formatos.
6. COMPONENTES GRFICOS JSF
Es el momento de enfocar nuestro estudio en el conjunto de componentes grficos
proporcionados por el framework JSF.
La existencia de estos componentes o bloques prefabricados, adems de facilitar la
creacin de aplicaciones grficas complejas, permite a los desarrolladores centrarse en la
lgica de aplicacin en vez de estar ocupados en las tareas de generacin de respuestas. La
figura 8 nos muestra un diagrama con las principales clases de componentes UI de JSF, todas
ellas se encuentran en el paquete javax.faces.component.
Figura. 8.
Una de las principales caractersticas del API de componentes de JSF es que
proporciona una gran cantidad de mtodos para manipular la interfaz grfica, sin preocuparnos
por el aspecto concreto que dichos componentes tendrn durante su presentacin.
Por eso, aunque mayoritariamente se utilizarn los componentes JSF para la creacin
de interfaces basadas en HTML, su uso no est ni mucho menos limitado a este estndar de
presentacin; si se dispone del renderizador apropiado, un componente JSF puede adoptar
mltiples formas a la hora de ser presentado.
UIComponentBase
UICommand UIOutput
UIInput
UIForm
UISelectOne UISelectMany
UIComponent
UISelectBoolean
UIData UIPanel UIViewRoot
Esta capacidad de los componentes UI JSF para ser presentados de diferentes formas
es aplicable tambin incluso dentro de un mismo estndar de presentacin. Por ejemplo, el
componente UISelectOne representa un elemento de seleccin simple, que en el caso concreto
de HTML puede ser implementado como un ListBox de seleccin simple, un ComboBox o un
conjunto de botones de radio.
6.1. RENDERIZACIN
La renderizacin es el proceso mediante el cual un determinado componente UI es
transformado en un control especfico correspondiente a un determinado lenguaje de marcado.
En el caso de los componentes UI JSF, como ya sabemos, la funcionalidad de los
mismos est separada de los detalles de presentacin, as, mientras que la funcionalidad es
implementada por el propio componente UI, los detalles de presentacin son proporcionados
por el renderizador.
Un renderizador es el objeto que contiene los detalles de presentacin de un
determinado tipo de componente, proporcionando los tags apropiados segn el lenguaje de
marcado que se vaya a utilizar para la presentacin en cliente.
Los renderizadores se encuentran agrupados en lo que se conoce como un kit de
renderizacin o RenderKit.
Un RenderKit es una coleccin de renderizadores que utilizan una tecnologa comn de
presentacin para los controles de la interfaz, como por ejemplo HTML.
La especificacin JSF proporciona un kit de renderizacin estndar que incluye un
conjunto de renderizadores para la generacin de marcado HTML. Este RenderKit estndar se
encuentra asociado por defecto a cualquier aplicacin JSF, de modo sern aplicados sus
renderizadores a la hora de construir la interfaz. No obstante, es posible registrar otros
RenderKits en una aplicacin o, incluso, definir kits de renderizacin personalizados.
En la figura 9 se indican algunas de las clases que utilizan los rederizadores del kit
estndar. Como vemos, se trata de subclases de los componentes UI de JSF que aaden
detalles especficos para la presentacin en HTML.
6.2. TAGS DE COMPONENTES JSF
La especificacin JSF incluye una librera de acciones o tags JSP para la inclusin de
componentes grficos JSF dentro de una pgina JSP. De forma predeterminada, estas
acciones se encuentran asociadas al kit de renderizadores especficos HTML. En la tabla de
figura 10 se muestra la equivalencia entre cada componente HTML y el tag que lo genera.
Figura. 9.
Figura. 10.
Seguidamente, vamos a analizar con ms detalle cada uno de estos tags, as como las
caractersticas de los controles que generan.
UICommand UIOutput
UIInput
UIForm
UISelectOne UISelectMany
HTMLCommandButton
HTMLCommandLink
HTMLInputSecret
HTMLInputText
HTMLInputTextArea
HTMLSelectOneRadio
HTMLSelectOneMenu
HTMLSelectOneListBox
HTMLSelectManyCheckBox
HTMLSelectManyMenu
HTMLSelectManyListBox
HTMLForm
UISelectBoolean
HTMLSelectBooleanCheckBox
controles de comando
controles de seleccin
simple
controles de seleccin
mltiple
controles de texto
Casilla de verificacin <h:selectBooleanCheckBox ..> HTMLSelectBooleanCheckBox
Conjunto de casillas de
verificacin
<h:selectManyCheckbox ..> HTMLSelectManyCheckBox
Conjunto de botones de
radio
<h:selectOneRadio ..> HTMLSelectOneRadio
Lista desplegable <hselectOneMenu ..> HTMLSelectOneMenu
Caja de texto multilnea <h:inputTextarea ..> HTMLInputTextArea
Lista normal <h:selectOneListbox ..> HTMLSelectOneListBox
Lista desplegable de
seleccin mltiple
<h:selectManyMenu ..> HTMLSelectManyMenu
Campo de texto <h:inputText ..> HTMLInputText
Campo de texto con
caracteres ocultos
<h:inputSecret ..> HTMLInputSecret
Lista normal de
seleccin mltiple
<h:selectManyListbox ..> HTMLSelectManyListBox
Enlace HTML <h:CommandLink ..> HTMLCommandLink
Botn submit <h:CommandButton..> HTMLCommandButton
Tipo de control Tag JSF Componente HTML
Casilla de verificacin <h:selectBooleanCheckBox ..> HTMLSelectBooleanCheckBox
Conjunto de casillas de
verificacin
<h:selectManyCheckbox ..> HTMLSelectManyCheckBox
Conjunto de botones de
radio
<h:selectOneRadio ..> HTMLSelectOneRadio
Lista desplegable <hselectOneMenu ..> HTMLSelectOneMenu
Caja de texto multilnea <h:inputTextarea ..> HTMLInputTextArea
Lista normal <h:selectOneListbox ..> HTMLSelectOneListBox
Lista desplegable de
seleccin mltiple
<h:selectManyMenu ..> HTMLSelectManyMenu
Campo de texto <h:inputText ..> HTMLInputText
Campo de texto con
caracteres ocultos
<h:inputSecret ..> HTMLInputSecret
Lista normal de
seleccin mltiple
<h:selectManyListbox ..> HTMLSelectManyListBox
Enlace HTML <h:CommandLink ..> HTMLCommandLink
Botn submit <h:CommandButton..> HTMLCommandButton
Tipo de control Tag JSF Componente HTML
6.2.1. Formulario
Todos los componentes grficos encargados de la captura de datos deben estar
incluidos en un formulario HTML, cuya generacin corre a cargo del tag <h:form>. Los valores
de los atributos method y action del formulario se encuentran implcitamente establecidos
POST y a la URL de la pgina actual, respectivamente. El elemento <h:form> no dispone de
ningn atributo para establecer estos valores, por lo que no podrn ser modificados por el
programador.
En el interior de este elemento se incluirn los tags de controles grficos.
6.2.2. Controles: atributos comunes.
Hay una serie de atributos que presentan todos los tags para la generacin de
controles grficos y que tienen el mismo significado en todos ellos. He aqu los ms
importantes:
id. Identificador del elemento. Representa un identificador nico para cada objeto
existente en el formulario. Como ya vimos anteriormente al estudiar alguno de
los mtodos de la clase UIComponent, este identificador puede ser utilizado
desde cdigo para referirse a un determinado componente desde mtodos como
findComponent().
rendered. Especifica si el control ser renderizado inicialmente o no. Tal y como
comprobamos en el ejercicio 2, este atributo puede ser modificado a travs del
mtodo serRedered() de cada componente.
6.2.3. Campos de texto
Los campos de texto son componentes de tipo UIInput y se utilizan para solicitar la
entrada de datos al usuario. En una interfaz grfica HTML podemos utilizar cuatro campos de
texto: Text, Textarea, Secret y Hidden, los cuales son generados por los tags <h:inputText>,
<h:inputTextarea>, <h:inputSecret> e <h:inputHidden>, respectivamente.
Todos estos tags disponen de un atributo value que es utilizado en un doble sentido:
Para asignar un valor inicial al campo a partir de la propiedad de un bean
gestionado.
Para volcar en la propiedad de un bean gestionado el contenido del campo una
vez que se produzca el submit de la pgina.
Se utilizar la notacin EL para indicar en el atributo value la propiedad del bean
implicada en las operaciones anteriores:
<h:inputText value=#{bean.propiedad} />
Adems del atributo value, estos tags disponen de otro atributo de tipo boolean llamado
required, de modo que si este atributo es true ser obligatorio que el usuario suministre un
valor al campo; de no hacerlo, la pgina ser recargada de nuevo y se generar un
mensaje de error. Ms adelante, en el captulo dedicado a los conversores y validadores
analizaremos con detalle este punto.
El valor de este atributo puede ser modificado dinmicamente utilizando e mtodo
setRequired() proporcionado por la clase UIInput.
6.2.4. Controles de comando
Se trata de componentes UICommand cuya misin es, como ya hemos tenido
oportunidad de ver, generar el envo de datos del formulario cuando son activados.
Tenemos dos clases de renderizacin especfica HTML para este componente:
HTMLCommandButton y HTMLLinkButton, que son generados mediante los tags
<h:commandoButton> y <h:linkButton>, respectivamente. Se trata de dos maneras distintas de
realizar esta operacin de envo de datos desde la pgina: mediante la pulsacin de un botn o
mediante la activacin de un enlace.
Adems del atributo value, utilizado para indicar el texto del enlace o botn, estos
controles disponen como atributos ms importantes action, actionListener e inmediate, cuyos
significados ya han sido estudiados con anterioridad.
6.2.5. Generacin de texto
Se trata de un objeto cuya misin es presentar un texto esttico en la pgina. Se
genera mediante el tag <h:outputText> que corresponde al control HTMLOutputText, subclase
de UIOutput. Mediante el atributo value se establece el texto a mostrar. Este atributo puede
tener dos tipos de valores:
Una cadena de caracteres que represente el texto a mostrar.
Una expresin EL que indique la propiedad del bean cuyo contenido se va a mostrar.
Por ejemplo, el siguiente tag mostrara en contenido de la propiedad mensaje de un bean:
<h:outputText value=#{ErrorBean.mensaje} />
6.2.6. Casillas de verificacin
La casilla de verificacin corresponde a un componente de tipo UISelectOneBoolean y
cuya presentacin corre a cargo del tag <h:selectBooleanCheckbox>.
Su atributo value permite vincular el estado del control a una propiedad boolean de un
bean gestionado.
Mediante el mtodo setSelected() de la clase UISelectOneBoolean es posible modificar
el estado del control desde cdigo.
6.2.7. Listas de seleccin nica
La seleccin de un elemento dentro de un conjunto constituye una funcionalidad tpica
de cualquier aplicacin Web. Dicha funcionalidad es proporcionada en JSF por el componente
UISelectOne, el cual puede ser renderizado de tres formas diferentes en una pgina:
Como una lista simple. Representada por el renderizador especfico
HTMLSelectOneListbox, es generada mediante el tag <h:selectOneListbox>.
Como una lista desplegable. Representada por el renderizador especfico
HTMLSelectOneMenu, es generada mediante el tag <h:selectOneMenu>.
Como un conjunto de botones de radio. Representado por el renderizador
especfico HTMLSelectOneRadio, es generado mediante el tag
<h:selectOneRadio>.
Los tres tags disponen de un atributo value que permite indicar la propiedad del bean
gestionado donde ser almacenado el valor del elemento seleccionado, una vez se produzca el
submit de la pgina.
6.2.7.1. Componentes de una lista
Los elementos contenidos una lista de seleccin son objetos de tipo
javax.faces.model.SelectItem. Cada uno de estos objetos encapsula el valor y el texto a
mostrar del elemento que representa.
Existen dos maneras de indicar durante la fase de diseo de la aplicacin el conjunto
de objetos SelectItem que formar la lista:
Mediante componentes UISelectItem. Cada componente UISelectItem genera
un elemento SelectItem. Los componentes UISelectItem son incluidos dentro de
la lista mediante el tag <f:selectItem>. Cada tag de este tipo dispone de dos
atributos:
- itemLabel. Texto que se va a mostrar para el elemento.
- itemValue. Valor asociado al elemento.
As pues, debern anidarse tantos <f:selectItem> dentro del tag que genera la
lista como elementos vaya a contener sta. El siguiente bloque creara un
ListBox en la pgina con los das laborables de la semana:
<h:selectOneListbox id="lista">
<f:selectItem itemLabel="lunes" itemValue="1"/>
<f:selectItem itemLabel="martes" itemValue="2"/>
<f:selectItem itemLabel="mircoles" itemValue="3"/>
<f:selectItem itemLabel="jueves" itemValue="4"/>
<f:selectItem itemLabel="viernes" itemValue="3"/>
</h:selectOneListbox>
Como podemos observar, esta forma de generar una lista de opciones es
adecuada cuanto el contenido de la lista es esttico (no ser modificado) y es
conocido durante la fase de diseo de la aplicacin.
Mediante un componente UISelectItems. Cuando el contenido de la lista va a
ser generado de forma dinmica podemos hacer uso de este componente, cuya
funcin es la de crear un conjunto de objetos SelectItem dentro de la lista. El
componente UISelectItems se genera con el tag <f:selectItems> que, mediante
su atributo value, deber indicar la propiedad del bean gestionado donde est
contenido el conjunto de objetos SelectItem. Este conjunto puede ser tanto un
array como una coleccin de objetos SelectItem.
Por ejemplo, las siguientes tags generaran un conjunto de botones de radio con
las opciones disponibles en una coleccin de objetos SelectItem almacenada en
la propiedad turnos del bean CursosBean:
<h:selectOneRadio value="#{CursosBean.seleccionado}" >
<f:selectItems value="#{CursosBean.turnos}"/>
</h:selectOneRadio>
Por su parte, el bloque de cdigo que genera el contenido de la propiedad turnos
del bean podra estar implementado de la siguiente manera:
class CursosBean{
private List<SelectItem> turnos;
:
public CursosBean(){
turnos = new ArrayList<SelectItem>();
turnos.add(new SelectItem(0, maana));
turnos.add(new SelectItem(1, tarde));
turnos.add(new SelectItem(2, noche));
}
:
public List<SelectItem> getTurnos(){
return turnos;
}
:
}
Podemos observar como durante la creacin del los objetos SelectItem se pasa
como parmetros al constructor, en este orden, el valor asociado al elemento y el
texto a mostrar.
6.2.8. Listas de seleccin mltiple
La funcionalidad de las listas de seleccin mltiple es suministrada por el componente
UISelectMany, pudiendo ser renderizado de tres formas diferentes en una pgina:
Como una lista de seleccin mltiple. Representada por el renderizador
especfico HTMLSelectManyListbox, es generada mediante el tag
<h:selectManyListbox>.
Como una lista de seleccin mltiple y una lnea de altura. En cuanto a
tamao es similar a las listas desplegables, si bien se muestra siempre abierta
con dos flechas para realizar desplazamientos arriba y abajo. Est representada
por el renderizador especfico HTMLSelectManyMenu, que es generado
mediante el tag <h:selectManyMenu>.
Como un conjunto de casillas de verificacin. Representado por el
renderizador especfico HTMLSelectManyCheckbox, es generado mediante el
tag <h:selectManyCheckbox>.
El atributo value deber especificar la propiedad del bean donde se almacenarn los
valores de los elementos seleccionados. En este caso, dicha propiedad tendr que ser de tipo
array o coleccin.
En cuanto a la creacin del contenido de la lista, se utilizan exactamente las mismas
tcnicas que en las listas de seleccin simple.
6.3. EL EVENTO VALUECHANGEEVENT
El evento ValueChangeEvent se produce en todos los componentes de tipo UIInput,
como las listas simples, listas desplegables o cajas de texto y tiene lugar cuando se produce un
cambio en el dato de entrada del componente. Por ejemplo, en el caso de las cajas de texto
este evento se produce cada vez que se modifica el contenido del campo, mientras que en las
listas se produce al seleccionar un nuevo elemento.
A diferencia de ActionEvent, el evento ValueChangeEvent no produce el submit de
la pgina; todos los eventos de este tipo producidos en los distintos componentes de la interfaz
quedan aadidos a una cola para despus proceder a la ejecucin de sus mtodos de
respuesta una vez que se lance la peticin al servidor.
Al igual que sucede con ActionEvent, los mtodos de respuesta a los eventos
ValueChangeEvent pueden ser codificados en alguno de los beans gestionados. Estos
mtodos debern tener el formato:
public void metodoRespuesta(ValueChangeEvent ev)
A travs de las propiedades del objeto ValueChangeEvent podemos acceder a
informacin de inters sobre el evento. Entre ellas destacan:
getComponent(). Al igual que en ActionEvent, nos devuelve una referencia al
componente donde se ha producido el evento.
getOldValue(). Devuelve el valor anterior del componente, antes de producirse
el evento.
getNewValue(). Devuelve el nuevo valor del componente.
Por otro lado, la vinculacin entre el control y el mtodo manejador de evento
correspondiente se realizar a travs del atributo valueChangeListener del tag. El siguiente
ejemplo asociara el evento de cambio de turno al mtodo actualiza() del bean CursosBean:
<h:selectOneRadio value="#{CursosBean.seleccionado}"
valueChangeListener="#{CursosBean.actualiza}">
<f:selectItems value="#{CursosBean.turnos}"/>
</h:selectOneRadio>
EJERCICIO 3
En este ejercicio vamos a desarrollar una aplicacin para una tienda de ordenadores,
consistente en una pgina de inicio que permita al usuario configurar su equipo, permitindole
elegir un mdulo de memoria de una lista y una serie de accesorios adicionales, tal y como se
indica en la figura 11.
Figura. 11.
As mismo, se le permitir indicar la forma de pago elegida, de modo que si elige
transferencia se le aplicar un descuento en el precio final de un 10%.
Al pulsar calcular se mostrar en una nueva pgina el precio final segn la
configuracin elegida (figura 12).
Figura. 12.
Hay que tener en cuenta que se parte de un precio base de 300 euros, al que habr
que aadir los precios de la memoria y los accesorios, los cuales estn almacenados en una
base de datos.
Inicialmente, crearemos una clase que formar parte del modelo, encargada de obtener
las listas de precios para poder vincularlas a los controles de lista. Esta clase que llamaremos
PreciosBean corresponder al siguiente listado:
package javabeans;
import java.util.*;
import javax.faces.model.*;
import java.sql.*;
public class PreciosBean {
private List<SelectItem> memoria;
private List<SelectItem> accesorios;
public Connection obtenerConexion() {
Connection cn=null;
try{
Class.forName("com.mysql.jdbc.Driver");
cn=DriverManager.getConnection("
jdbc:mysql://localhost:3306/ordenadores");
}
return cn;
}
public List<SelectItem> getMemoria(){
//obtiene la lista de precios de los
//mdulos de memoria
String sql="";
ArrayList<SelectItem> totales=
new ArrayList<SelectItem>();
try{
sql="SELECT capacidad, precio FROM memoria";
ResultSet rs=st.executeQuery(sql);
while(rs.next()){
totales.add(new SelectItem(
rs.getString("precio"),rs.getString("capacidad")));
}
cn.close();
}
finally{memoria=totales;return memoria;}
}
public List<SelectItem> getAccesorios(){
//obtiene la lista de precios de los
//accesorios
String sql="";
ArrayList<SelectItem> totales=
new ArrayList<SelectItem>();
try{
sql="SELECT nombre, precio FROM accesorios";
ResultSet rs=st.executeQuery(sql);
while(rs.next()){
totales.add(new SelectItem(
rs.getString("precio"),rs.getString("nombre")));
}
cn.close();
}
finally{accesorios=totales; return accesorios;}
}
public void setMemoria(List<SelectItem> memoria) {
this.memoria = memoria;
}
public void setAccesorios(List<SelectItem> accesorios) {
this.accesorios = accesorios;
}
}
Por otro lado, la clase bean que capturar la configuracin elegida, a la que llamaremos
ConfiguracionBean, tendr el siguiente cdigo:
package javabeans;
import javax.faces.event.*;
import javax.faces.component.*;
import javax.faces.component.html.*;
public class ConfiguracionBean {
private String preciomemoria;
private String[] precioaccesorios;
private String envio;
private double preciofinal=300;
private String datosconfiguracion;
public String getPreciomemoria() {
return preciomemoria;
}
public void setPreciomemoria(String preciomemoria) {
this.preciomemoria = preciomemoria;
}
public String[] getPrecioaccesorios() {
return precioaccesorios;
}
public void setPrecioaccesorios(String[] precioaccesorios) {
this.precioaccesorios = precioaccesorios;
}
public String getEnvio() {
return envio;
}
public void setEnvio(String envio) {
this.envio = envio;
}
public String getDatosconfiguracion() {
return datosconfiguracion;
}
public void setDatosconfiguracion(String datosconfiguracion)
{
this.datosconfiguracion = datosconfiguracion;
}
public String calcular(){
setPreciofinal(getPreciofinal()+Integer.parseInt(
this.getPreciomemoria()));
for(String p:this.precioaccesorios){
setPreciofinal(getPreciofinal() +
Integer.parseInt(p));
}
if(Integer.parseInt(envio)==1){
setPreciofinal(getPreciofinal() * 0.9);
}
return "resultado";
}
public double getPreciofinal() {
return preciofinal;
}
public void setPreciofinal(double preciofinal) {
this.preciofinal = preciofinal;
}
}
Seguidamente se muestran los listados con las vistas de la aplicacin:
index.jsp
<html>
<head>
charset=UTF-8">
</head>
<body>
<f:view>
<h:form>
<h1>Configuracin de Equipo Informtico</h1>
<br/><br/>
<table>
<tr>
<td><b>Memoria:</b></td>
<td><h:selectOneMenu id="memoria"
value="#{ConfiguracionBean.preciomemoria}">
<f:selectItems
value="#{PreciosBean.memoria}"/>
</h:selectOneMenu></td>
<td><b>Accesorios:</b><br/></td>
<td><h:selectManyCheckbox id="accesorios"
value="#{ConfiguracionBean.precioaccesorios}">
<f:selectItems
value="#{PreciosBean.accesorios}"/>
</h:selectManyCheckbox</td>
</tr>
<tr>
<td><br/><b>Forma de pago:</b></td>
<td><br/><h:selectOneRadio id="pago"
value="#{ConfiguracionBean.envio}">
<f:selectItem itemLabel="Transferencia"
itemValue="1"/>
<f:selectItem itemLabel="Contra
reembolso" itemValue="2"/>
</h:selectOneRadio></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4" align="center"><br/>
<h:commandButton value="Calcular"
action="#{ConfiguracionBean.calcular}"/>
</td>
</tr>
</table>
</h:form>
</f:view>
</body>
</html>
resultado.jsp
<html>
<head>
charset=UTF-8">
</head>
<body>
<f:view>
<h1>Configuracin elegida</h1>
<br/><br/>
<h3>El precio final es de: <h:outputText
value="#{ConfiguracionBean.preciofinal}"/> eur.</h3>
</f:view>
</body>
</html>
7. CONVERSORES Y VALIDADORES
El proceso de conversin y validacin de datos es una tarea sumamente importante
dentro de una aplicacin Web, pues tiene como objetivo adaptar la informacin suministrada
por el usuario mediante los campos de la interfaz a los tipos y caractersticas de los datos
manejados por la aplicacin.
Como tuvimos oportunidad de ver durante el anlisis del ciclo de vida de una peticin
JSF, este proceso tiene lugar durante la segunda fase del ciclo llamada Proccess Validation.
Segn se indic entonces, cualquier error en la validacin o conversin de alguno de los
campos producir el fin del procesado de la peticin y la recarga de la pgina desde la que se
lanz la peticin, indicando se en la misma los mensajes de error generados durante el
proceso.
Seguidamente vamos a analizar de manera independiente las distintas tcnicas que
nos ofrece la tecnologa JSF para realizar las conversiones y validaciones de datos en una
aplicacin.
7.1. VALIDADORES
La validacin de datos consiste en comprobar la validez de un campo de entrada antes
de proceder a la asignacin del mismo a la propiedad del bean correspondiente.
Dejando a un lado la validacin manual de datos que siempre podramos incluir en los
mtodos set del JavaBean, JSF nos ofrece la siguientes tcnicas de validacin de datos:
Validacin automtica.
Utilizacin de validadores implcitos JSF.
Mtodos de validacin personalizados.
7.1.1. Validacin automtica
La validacin automtica no requiere ninguna accin por parte del programador,
aunque afecta nicamente a los tipos de datos y a la obligatoriedad de incluir valores en los
campos.
Por ejemplo, si un determinado campo est asociado a una propiedad int de un bean,
JSF intentar realizar la conversin de los caracteres introducidos a int. Si algn carcter no es
numrico, se producir un error de validacin en el campo.
En cuanto a la obligatoriedad de incluir valores en un campo, todos los tags que
generan componentes UIInput disponen de un atributo llamado required, de modo que si ste
est establecido a true ser obligatorio introducir un valor en el campo. Si el usuario deja
en blanco un campo de estas caractersticas se detectar este hecho durante la fase Process
Validator y se proceder a abortar el procesado de la peticin, recargndose de nuevo la
pgina en el cliente.
Cada vez que se detecta un error de validacin, el entorno JSF genera un mensaje de
error que puede ser mostrado en el momento que vuelva a recargarse la pgina mediante el
tag <h:message>. Este tag incluye un atributo llamado for en el que se debe especificar el id
del control cuyo mensaje de error se quiere mostrar.
Por ejemplo, supongamos que en el formulario utilizado en el ejercicio 1 queremos
establecer la obligatoriedad por parte del usuario de introducir datos en los tres campos
utilizados. El cdigo fuente de la pgina grabadatos.jsp quedara como se indica en el siguiente
listado:
<html>
<head>
charset=UTF-8">
</head>
<body>
<center><h1>Formulario de datos</h1></center>
<f:view>
<h:form>
<tr>
<td>Nombre:</td>
<td><h:inputText id="nombre" required="true"
value="#{PersonaBean.nombre}"/></td>
<td><h:message for="nombre"/></td>
</tr>
<tr>
<td>Telfono:</td>
<td><h:inputText id="tel" required="true"
value="#{PersonaBean.telefono}"/></td>
<td><h:message for="tel"/></td>
</tr>
<tr>
<td>Edad:</td>
<td><h:inputText id="edad" required="true"
value="#{PersonaBean.edad}"/></td>
<td><h:message for="edad"/></td>
</tr>
<tr>
actionListener="#{PersonaBean.doHabilitar}"
action="#{PersonaBean.doGuardar}" />
</td>
</tr>
<tr>
<h:commandButton id="vertodos"
rendered="false" value="Ver Todos"
action="ver"/>
</td>
</tr>
</table>
</h:form>
</f:view>
</html>
Podemos ver como adems de aadir el atributo required con el valor true a cada uno
de los campos de texto, hemos incluido una celda al lado de cada campo donde se mostrar el
mensaje de error asociado al mismo en caso de no cumplirse el criterio de validacin. La figura
13 muestra el aspecto de la pgina en caso de intentar el envo de datos sin haber introducido
ningn valor en el campo nombre.
Los mensajes de error mostrados estn definidos dentro de un archivo de recursos
llamado Message.properties que se encuentra en la librera jsf-impl.jar de JSF.
Figura. 13.
Es posible definir nuestros propios mensajes de error personalizados, para ello
crearamos un archivo .properties con la estructura de Message.properties y lo situaramos en
el directorio WEB-INF\classes de la aplicacin Web. El nombre de ese archivo puede ser
cualquiera, pero para que la aplicacin haga uso del mismo en vez de Message.properties
sera necesario aadir la siguiente entrada en faces-config.xml:
<application>
<message-bundle>Nombre_archivo</message-bundle>
</application>
Donde Nombre_archivo ser el nombre del archivo de recursos sin la extensin
.properties.
La validacin automtica tambin se aplica como hemos dicho a los tipos de datos de
los campos. Por ejemplo, si en la pgina anterior se introduce un valor que incluye caracteres
no numricos en el campo edad, se producir un error de conversin de tipos (recordemos que
el campo edad est definido como int en el bean PersonaBean), recargndose de nuevo la
pgina con el aspecto indicado en la figura 14.
Figura. 14.
7.1.2. Validadores implcitos JSF
La especificacin JSF incluye una serie de validadores que permiten realizar
comprobaciones clsicas en los campos de un formulario.
Estos validadores son clases que implementan la interfaz
javax.faces.validator.Validator, en las JSF delega la comprobacin de ciertas caractersticas de
los campos.
Para utilizar uno de estos validadores sobre un determinado campo, tan solo
tendremos que anidar el tag asociado al validador dentro del campo a validar. El siguiente
ejemplo utiliza un validador JSF que comprueba que el nmero de caracteres del campo
codigo sea como mnimo 4:
Cdigo: <h:inputText id="codigo" value="#{DatosBean.codigo}">
<f:validateLength minimum="4"/>
</h:inputText>
<h:message for="codigo"/>
Al igual que con las validaciones implcitas, utilizamos el tag <h:message> para indicar
el lugar donde se debe mostrar el mensaje de error en caso de incumplirse los criterios de
validacin.
Tres son los validadores proporcionados por la especificacin JSF. Las clases que
incluyen la lgica para la realizacin de las validaciones se encuentran en el paquete
javax.faces.validator, sin embargo, el programador no tendr que encargarse de instanciar
estas clases e invocar a los mtodos de validacin, todo ello se hace automticamente, como
hemos visto antes, anidando dentro del campo a validar el tag de validacin apropiado. Estos
tags se incluyen en la librera f de JSF y son:
<f:validateLength>. Comprueba que el nmero de caracteres introducido en el
campo se encuentra dentro de un determinado rango. Mediante los atributos
minimum y maximum se especifica el nmero mnimo y mximo de caracteres,
respectivamente, que debe tener el dato introducido. Ambos atributos son
opcionales, por lo que puede establecerse nicamente un lmite inferior o
superior.
<f:validateLongRange>. Comprueba que el valor numrico entero introducido en
el campo est dentro de un determinado rango. Rango que ser determinado por
los atributos minimum y maximum de la etiqueta. Como en el tag anterior, ambos
valores son opcionales.
<f:validateDoubleRange>. Comprueba que el valor numrico introducido en el
campo est dentro de un determinado rango. En este caso, el valor del campo
ser interpretado como double. El rango de valores viene determinado, como en
los tags anteriores mediante los atributos minimum y maximum.
En los tres casos, cuando el cdigo de validacin determine que el valor introducido
no cumple con los criterios definidos se lanzar una excepcin ValidationException que
provocar la recarga de la pgina y la visualizacin de los mensajes de error en los lugares
definidos por <h:message>
7.1.3. Validadores personalizados
Cuando los criterios de validacin de los validadores JSF no se ajustan a los
requerimientos de un determinado campo, ser necesario definir nuestros propios mtodos de
validacin personalizados en los que incluiremos el cdigo necesario para realizar las
comprobaciones requeridas.
Estos mtodos podrn ser definidos en los beans gestionados utilizados por la
aplicacin. Podrn ser llamados de cualquier manera, si bien debern ajustarse al siguiente
formato:
public void nombre_metodo(FacesContext context,
UIComponent component,
Object value) throws ValidatorException
Adems de no devolver ningn resultado, debern declarar tres parmetros cuyo
significado ser el siguiente:
context. Objeto FacesContext asociado a la aplicacin.
component. Componente grfico a validar.
value. Valor que debe ser validado.
Estos tres parmetros son pasados por el entorno de ejecucin de JSF al mtodo
durante la fase de validacin de datos (Process Validation).
En el interior de este mtodo se incluir el cdigo necesario para realizar las
comprobaciones, segn los criterios que hayamos establecido. En caso de que dichos criterios
no se cumplan, el mtodo deber lanzar una excepcin de tipo
java.faces.validator.ValidatorException.
Por otro lado, para vincular un componente UI con el mtodo de validacin
personalizado simplemente debemos indicar la referencia al mismo, utilizando la notacin EL,
en el atributo validator del tag del elemento.
El siguiente bloque JSP de ejemplo incluye un campo email dentro de una pgina, al
que asocia un mtodo de validacin definido en el bean DatosBean:
Email: <h:inputText id="email" value="#{DatosBean.email}"
validator="#{DatosBean.compruebaemail}"/>
<h:message for="email"/>
El mtodo compruebaemail podra estar definido de la siguiente manera en DatosBean:
public void compruebaemail(FacesContext context,
UIComponent component,
Object value) throws ValidatorException{
String valor=(String)value;
if((valor.indexOf("@")==-1)||(valor.indexOf(".")==-1)){
throw new ValidatorException(
new FacesMessage("Email no valido"));
}
return;
}
Observamos en el cdigo de ejemplo anterior como el constructor de la clase
ValidatorException requiere como parmetro un objeto javax.faces.application.FacesMessage
que representa un mensaje de validacin. De los cuatro constructores incluidos en la clase
FacesContext, el que se utiliza en este ejemplo recibe como parmetro un String
correspondiente a mensaje resumido de error, mensaje que ser mostrado por el tag
<h:message>.
7.2. CONVERSORES
La misin de los conversores es doble, por un lado se encargan de realizar una
conversin de los datos suministrados por el usuario a travs de los campos, a fin de
adaptarlos a las caractersticas requeridas por la aplicacin.
Por otro lado, los conversores permiten realizar una conversin en sentido contrario,
formateando los datos utilizados por la aplicacin para que puedan ser adecuadamente
presentados en la pgina. Por ello, a diferencia de los validadores que, nicamente pueden ser
utilizados con componentes de entrada de datos, los conversores pueden ser empleados
tanto con componentes de entrada como de salida, es decir, con cualquier componente
UIOutput.
Adems de las conversiones implcitas realizadas por JSF para adaptar los contenidos
de los campos a los tipos definidos por las propiedades del bean asociado, la especificacin
JSF incluye una serie de conversores que podemos utilizar en cualquier aplicacin.
7.2.1. Conversores implcitos JSF
Se trata de un conjunto de clases incluidas en el paquete javax.faces.convert que
permiten realizar conversiones en forma bidireccional de los datos. Como sucede con los
validadores, JSF incluye una serie de tags en la librera f que, anidados dentro del campo
correspondiente, permiten hacer uso de las clases conversoras durante la fase de diseo.
El siguiente ejemplo formatea el contenido del campo salario como tipo moneda. De
esta manera ser en este formato como se presentar en el campo de texto el contenido de la
propiedad salario del bean y, por otro lado, cualquier valor introducido en dicho campo ser
convertido a formato moneda al realizar el envo de la pgina, antes de ser asignado a la
propiedad:
Salario: <h:inputText id="salario"
value="#{EmpleadoBean.salario}">
<f:convertNumber type="currency"/>
</h:inputText>
Los dos tags proporcionados por JSF para la conversin y formato de datos son:
<f:convertNumber>. Es el que hemos utilizado en el ejemplo anterior; se utiliza
para realizar operaciones de formato de valores numricos. Entre los atributos
ms importantes de este tag destacamos:
- type. Especifica el tipo de formato del nmero. Sus posibles valores
son currency, percentage y number, siendo este ltimo el valor
predeterminado.
- integerOnly. Si est establecido a true, nicamente se almacenar en
la propiedad la parte entera del valor introducido en el campo. As
mismo, este slamente mostrar la parte entera de la propiedad.
- minFractionDigits. Indica el nmero mnimo de decimales con el que
ser formateado el nmero.
- maxFractionDigits. Indica el nmero mximo de decimales con el que
ser formateado el nmero. Por ejemplo, si este atributo est
establecido al valor 2 y en el campo se introduce 234,3457, el valor
asignado a la propiedad (suponiendo que sea de tipo decimal) ser
234,34.
- minIntegerDigits. Mnimo nmero de dgitos con el que ser
formateada la parte entera.
- manFractionDigits. Mximo nmero de dgitos con el que ser
formateada la parte entera. Por ejemplo, si el atributo est establecido
al valor 2 y en el campo se introduce el nmero 123,45, el primer dgito
entero ser desechado, almacenndose el valor 23,45 en la propiedad.
- currencySymbol. Smbolo utilizado para formatear el dato cuando se
utiliza el tipo currency.
- pattern. Cadena de caracteres que define un patrn de formato
personalizado. Si este atributo se encuentra establecido, se ignorar
el contenido del atributo type. Podemos encontrar informacin sobre
los caracteres de formato en la ayuda sobre la clase
java.text.NumberFormat. Por ejemplo, en el siguiente ejemplo se
formateara el campo salario como un nmero con una nica cifra
decimal:
salario: <h:inputText id="salario"
value="#{DatosBean.salario}">
<f:convertNumber pattern="##.#"/>
</h:inputText>
Si se introduce el valor 234,7967, ser formateado como 234,8.
<f:convertDateTime>. Se emplea para realizar operaciones de formato de
fechas y horas. Sus principales atributos son:
- type. Especifica el tipo de formato a aplicar. Sus posibles valores son
date, time o both.
- dateStyle. Especifica el estilo del formato para fechas. Sus posibles
valores son default, short, medium o long. El siguiente ejemplo
se establece un formato de fecha corta para el campo fecha
nacimiento:
fecha nacimiento <h:inputText id="fecha"
value="#{DatosBean.fecha}">
<f:convertDateTime type="date" dateStyle="short"/>
</h:inputText>
- timeStyle. Especifica el estilo del formato para la hora. Sus posibles
valores son default, short, medium o long.
- pattern. Especifica un patrn de formato personalizado para la
fecha/hora. En la clase java.text.DateFormat podemos encontrar
informacin sobre los posibles caracteres de formato a utilizar. Si este
atributo se encuentra especificado, se ignorar el contenido de los
atributos dateStyle, timeStyle y type.
- timeZone. Cadena de caracteres que representa la zona horaria con la
que ser formateada la fecha/hora. Por ejemplo, si la propiedad fecha
del bean DatosBean contiene la fecha/hora actuales, el siguiente tag
mostrar en la pgina la fecha actual en la zona de Los ngeles
formateada con formato corto:
Hora en Los Angeles: <h:outputText id="fecha"
value="#{DatosBean.fecha}">
<f:convertDateTime timeZone="America/Los_Angeles"
type="time" timeStyle="short"/>
</h:outputText>
AUTOEVALUACIN
1. Un objeto FacesServlet pertenece a la capa:
A. Controlador
B. Vista
C. Modelo
D. Es un elemento de apoyo a las tres capas anteriores
2. Indica cual de las siguientes caractersticas no es
aplicable al framework JSF:
A. Las aplicaciones son conducidas por eventos
B. Permite crear aplicaciones bajo arquitectura MVC
C. Los componentes grficos JSF nicamente pueden ser
utilizados en pginas JSP
D. La navegacin entre pginas se define en el archivo
de configuracin faces-config.xml
3. La ejecucin de los mtodos de respuesta a los eventos
ActionEvent de una interfaz JSF se produce en la fase:
A. Restore View
B. Apply Request Values
C. Invoke Application
D. Depende del atributo inmediate del componente
4. El acceso a los atributos de sesin desde un mtodo
controlador de accin se realiza:
A. A travs del objeto ActionEvent recibido como
parmetro
B. A travs de la clase FacesContext
C. A travs de la clase FacesServlet
D. Utilizando las propiedades de los beans gestionados
5. Tenemos un bean gestionado de identificador ComprasBean
que incluye un mtodo llamado listado() que recupera un
conjunto de filas de una base de datos y las almacena
en un atributo de peticin, devolviendo como resultado
una cadena de texto que servir para determinar la
prxima vista a enviar al usuario. Si queremos que ese
mtodo sea ejecutado al pulsar un botn de comando
linkCommand, cual de las siguientes acciones
deberamos incluir en una pgina JSP para realizar esa
operacin?:
A. <h:linkButton value="Aceptar"
actionListener="#{ComprasBean.listado}"/>
B. <h:linkButton value="Aceptar"
actionListener="#{ComprasBean.listado}"
inmediate="true"/>
C. <h:linkButton value="Aceptar"
action="#{ComprasBean.listado}"/>
D. <h:linkButton label="Aceptar"
value="#{ComprasBean.listado}"/>
6. Indica cual de las siguientes acciones JSP servira
para generar una lista de seleccin mltiple:
A. <h:selectOneMenu>
<f:selectItems value="#{LibrosBean.libros}"/>
</h:selectOneMenu>
B. <h:selectManyMenu>
</h:selectManyMenu>
C. <h:selectOneListbox multiple="true">
</h:selectOneListbox>
D. <h:selectManyListbox>
</h:selectManyListbox>
7. Cual de los siguientes controles no es de tipo
UIInput?
A. Lista de botones de radio
B. Botn de pulsacin
C. Caja de texto simple
D. Caja de texto multilnea
8. Para forzar a que el dato introducido por el usuario
tenga un nmero de caracteres contenido en un
determinado rango debemos utilizar:
A. El validador <f:validateLength>
B. El validador <f:validateLongRange>
C. El validador <f:textRange>
D. Un validador personalizado
Ejercicios Propuestos
1. Crear una nueva versin del ejercicio 2 resuelto en el tema de servlets,
consistente en generar dinmicamente una pgina formateada segn las opciones
indicadas en una pgina HTML:

Figura. 15.
Al pulsar el botn generar los datos sern enviados a una pgina JSP que ser la
encargada de generar dinmicamente la nueva pgina segn las opciones
elegidas. En este caso, emplearemos controles JSF para disear la interfaz y
realizaremos la gestin de eventos que consideremos adecuada.
2. Incluir los validadores necesarios en la pgina de registro del ejercicio 2, de forma
que se deban cumplir los siguientes criterios:
i. Todos los campos sern de obligada cumplimentacin.
ii. El n de caracteres del campo password ser como mnimo de 4 y
como mximo de 8.
iii. El campo email debe ser vlido (incluir un punto y la @)
iv. El campo telfono debe incluir solo caracteres numricos.
Se debern mostrar los mensajes de error en cada campo que incumpla las reglas
de validacin.

3. Crear una nueva versin de la aplicacin para la realizacin de votaciones a
travs de Internet realizada en temas anteriores, basada en este caso en la
utilizacin del framework JSF.

4. Realizar una aplicacin de librera, donde un usuario pueda ser validado a travs
de una pgina de login que adems contar con un enlace a una pgina de
registro para que se puedan registrar en caso de no estarlo.
Una vez validado, se mostrar una pgina con una lista desplegable para la
seleccin del tema, de modo que al seleccionar uno de ellos se visualicen, en la
misma u otra pgina, todos los libros de ese tema.
La aplicacin se desarrollar siguiendo el patrn MVC y con framework JSF. Y
deber incluir gestin de eventos y validacin de datos.
Utilizar como tablas de datos las empleadas en otros ejercicios realizados durante
el curso.

JSF Basico BD PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

JSF Basico BD PDF

Cargado por

Copyright:

Formatos disponibles

Java Server Faces (JSF)

Autor: Antonio J. Martn

También podría gustarte