Probando entornos para JSF

0
44006
Creando
JSF ¿Exadel Studio, Sun Studio Creator o nada?

El propósito de este documento es orientar
a los desarrolladores sobre qué herramienta utilizar a la hora
de comenzar un nuevo proyecto basado en JSF, y de sacar conclusiones acerca
de si estas herramientas realmente facilitan el trabajo, o son un problema
en sí mismas por su complejidad. Herramientas que en teoría
«facilitan» el desarrollo de este tipo de proyectos hay muchas,
pero me he centrado en dos por su popularidad y porque en principio son
«gratis». Exadel Studio en su versión gratuíta
y Sun Java Studio Creator.

Vamos a realizar una validación login/password
para acceder a un futuro panel de control, que de momento sólo
tendrá un mensaje de bienvenida. Además aprovecharemos este
ejemplo para ver algunos componentes de JSF, algo de navegabilidad, algo
de validaciones y como se accede a la sesión de usuario

Vamos a realizar una validación login/password
para acceder a un futuro panel de control, que de momento sólo
tendrá un mensaje de bienvenida. Además aprovecharemos este
ejemplo para ver algunos componentes de JSF, algo de navegabilidad, algo
de validaciones y como se accede a la sesión de usuario

 

Prueba1.
Trabajando con Exadel Studio como plugin de Eclipse

 

Descargando e instalando ExadelStudio

Lo primero que haremos será descargar la versión
gratuíta de Exadel Studio versión 3.5; hay otra
(Exadel Studio Pro 3.5) que proporciona una interfaz gráfica
más atractiva para la creación de JSF, estilo Sun Java
Studio Creator
, donde por ejemplo podemos especificar la navegavilidad
entre páginas JSF visualmente, pero que es de pago y por lo menos
a mí no me interesa. Para descargarnos la versión gratuíta
iremos a la página:
 


http://box.exadel.com/exadelproducts/app_products.process.main.start?_action=products

 

 

 

 

Una vez descargado, ejecutaremos el fichero descargado ExadelStudio-3[1].0.5.exe
e instalamos la herramienta; la instalación no da ningún problema.
La única particularidad es que durante la instalación nos pregunta cual
es el directorio donde tenemos el Eclipse.

Creando un proyecto JSF con Eclipse

Vamos a crear un nuevo proyecto JSF con la especificación
myFaces en blanco utilizando ExadelStudio. Para ello debemos seguir los
siguientes pasos:

1. Abrimos Eclipse y seleccionamos File>New>Project.
Después seleccionamos el tipo de proyecto (JSF Proyect)

2. Introducimos el nombre del proyecto, el directorio
donde lo almacenaremos y la implementación JSF a utilizr (MyFaces);
Además la herramienta nos da la posibilidad de crear la infraestructura
básica del proyecto en cuanto a directorios y ficheros de configuración
seleccionando MyFacesBlank, y como suena bastante bien, lo seleccionamos.
Eclipse nos advierte que los proyectos JSF están asociados a la perspectiva
de Exadel, confirmamos y ya estamos preparados para trabajar

 

      

 

 

 

Vemos qué es lo que ha generado Exadel, y aunque
no es ninguna maravilla, es útil no tener que buscar otro proyecto
en el que hayamos utilizado JSF para copiar las librerías, los ficheros
descriptor de JSF y web.xml.

Ahora vemos qué pinta tiene la
perspectiva de Exadel en Eclipse, que es bastante buena. A la derecha se
encuentran disponibles los componentes JSF que podemos ir añadiendo
a las páginas JSF. Están disponibles no sólo los de
la implementación de myFaces (myFaces Extensions y myFaces Tomahawk)
sino los core de JSF (JSF Core, JSF HTML…):

 

 

Aunque no podemos construir visualmente la navegabilidad
entre páginas, la verdad es que la herramienta parece potente. Nos
permite arrastrar el componente JSF al área de trabajo y nos pregunta
por los atributos que deseamos; esto nos permite tener una ayuda contextual
muy valiosa.

 

Empezamos con el ejemplo
Para saber por donde empezar vamos a ver qué
ficheros hay en el web.xml que son Welcome-file-list. Vemos
que por defecto están index.jsf, index.jsp e index.html. Creamos
un fichero WebContent/index.jsp para arrancar la aplicación,
que redirija a la página home.jsp de nuestra mini-aplicación.
Para ello seleccionamos File>New>JSP File

 

 

 

Y para home.jsp:

 

 

Echamos un vistazo al fichero descriptor de JSF:
/WEB-INF/examples-config.xml
. Como el nombre que ha impuesto Exadel
no me gusta, lo cambio seleccionando dicho fichero en el explorador de paquetes
de Eclipse y seleccionando la tecla F2. Después compruebo si este
nombre ha sido modificado en el /WEB-INF/web.xml. Parece que Exadel
no se ha enterado del cambio, así que cambio el nombre a mano.

 

 

Creamos un bean que represente el formulario que se
le va a presentar al usuario (login/password). Para ello debemos registrarlo
en el fichero descriptor de JSF: /WEB-INF/ejemplo2jsf-config.xml, en
la parte de Managed-Beans. Lo llamaremos LoginBean y tendrá como
propiedades el login y la password

 

 

Ahora preparamos la página (home.jsp)
que indique al usuario que debe introducir su login y password para acceder
a su panel de control. Seguiremos los siguientes pasos:

 

1. Cargar
el fichero de recursos donde estarán todos los mensajes de
la aplicación que queremos que estén sujetos a internacionalización.
Para esto creamos un nuevo fichero properties en el directorio
com.autentia.prueba1jsf.recursos
llamado recursos.properties.
Luego hay que arrastrar el componente JSF Core>load Bundle y rellenamos
los parámetros solicitados:

<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/extensions"
prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<html>
<head>
<title>PRIMERA PRUEBA JSF</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<f:loadBundle basename="com.autentia.prueba2jsf.recursos.mensajes"
var="mensajes"/>

..
</body>
</html>

 

2. Arrastrar un formulario desde la paleta
de Exadel al área de trabajo. Los formularios se encuentran en
JSF HTML>form
. Debemos arrastrar dicho formulario en la parte
Visual/Source del área de trabajo. Podemos acceder a las propiedades
de dicho formulario en la vista Properties que nos proporciona Exadel.
Impongo la siguiente: id=»loginBean», que es la referencia
al bean que va a manejar los datos del formulario.

<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/extensions"
prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<html>
<head>
<title>PRIMERA PRUEBA JSF</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<f:loadBundle basename="com.autentia.prueba2jsf.recursos.mensajes"
var="mensajes"/>
<f:view>
<h:form id="loginBean">
..
</h:form>

</f:view>
</body>
</html>

 

3. Arrastrar un panel grid al área de
trabajo. Este componente permite agrupar a su vez otros componentes
a modo de tabla en JSP y se encuentra en JSF HTML en la paleta
de Exadel. Completamos las propiedades mínimas que necesitamos.

<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/extensions"
prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<html>
<head>
<title>PRIMERA PRUEBA JSF</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<f:loadBundle basename="com.autentia.prueba2jsf.recursos.mensajes"
var="mensajes"/>
<f:view>
<h:form id="loginBean">
<h:panelGrid columns="2"
styleClass="login"
footerClass="pieLogin"
headerClass="cabeceraLogin"
columnClasses="etiquetaLogin,inputLogin">

...

</h:panelGrid>
</h:form>
</f:view>
</body>
</html>

 

4. Para la cabecera y pie del panel grid
arrastramos componentes f:facet que se encuentran en la parte
JSF Core dentro de la paleta de Exadel, y dentro de ellos colocamos
los componentes outputText que son los encargados de mostrar
texto plano que se mostrará en la cabecera y pie del grid.
Estos últimos se encuentran en la parte JSF HTML de
la paleta de Exadel.

<f:facet name="header">
<h:outputText id="lHeader" value="#{mensajes['login_introduzca']}"/>
</f:facet>
<f:facet name="footer">
<h:outputText value=" "/>
</f:facet>

 

5. Los textos para el login y password, así
como los inputs para que el usuario introduzca el login y password
son componentes de tipo outputText, inputText e inputSecret.
Estos componentes deben tener como values las propiedades que
tenemos ya definidas en loginBean. Además nos valemos
de las validaciones estándar que ofrece JSF para el login
y password (que el número de caracteres no sobrepase un número
ni sea menor que un número y la obligatoriedad).

En el caso de que no se cumplan estos requisitos
mínimos para el login y password, el motivo del error se
visualizará en la página gracias a <t:message
for="login" styleClass="error" showDetail="true"
showSummary="false" />
.
Además
de estas validaciones estándar, fijaos en la línea
<h:outputText styleClass="error"
value="#{loginBean.errorMessages}" escape="false"/>
.
Este mensaje de error lo rellenaremos desde loginBean en el caso
de que el login/password introducidos no se correspondan con ningún
usuario registrado en la aplicación. errorMessages
es una variable privada de loginBean de tipo String donde almacenamos
el mensaje de error.

El código va quedando como se ve a la derecha.
Hacer notar que con Exadel puedes ver de forma gráfica como
te va quedando la página, que es una cosa útil, aunque
podría ser mejor si se pudiese seleccionar desde la parte
visual cualquier componente y que se seleccionase automáticamente
la parte de código asociada… Supongo que esta facilidad
se proporcionará en el Exadel de pago.

<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/extensions"
prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<html>
<head>
<title>PRIMERA PRUEBA JSF</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<f:loadBundle basename="com.autentia.prueba2jsf.recursos.mensajes"
var="mensajes"/>
<f:view>
<h:form name="loginBean">
...
<!-- LOGIN -->
<h:outputLabel for="login" value="#{mensajes['login_login']}"/>
<h:panelGroup>
<h:inputText id="login" styleClass="cajaTexto"
value="#{loginBean.login}" maxlength="30" size="30"
required="true" >
<f:validateLength minimum="1" maximum="30"
/>
</h:inputText>
<t:message for="login" styleClass="error"
showDetail="true" showSummary="false" />

<h:outputText styleClass="error" value="#{loginBean.errorMessages}"
escape="false"/>

</h:panelGroup>
<!-- PASSWORD -->
<h:outputLabel for="password" value="#{mensajes['login_password']}"/>
<h:panelGroup>
<h:inputSecret id="password" styleClass="cajaTexto"
value="#{loginBean.password}" maxlength="30"
size="30" required="true" >
<f:validateLength minimum="1" maximum="30"
/>
</h:inputSecret>
<t:message for="password" styleClass="error"
showDetail="true" showSummary="false" />

</h:panelGroup>

...
</h:form>
</f:view>
</body>
</html>

 

 

6. Ahora colocamos un botón que va a
provocar el submit del formulario, y cuya acción será
manejada por nuestro bean loginBean:

<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/extensions"
prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<html>
<head>
<title>PRIMERA PRUEBA JSF</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<f:loadBundle basename="com.autentia.prueba2jsf.recursos.mensajes"
var="mensajes"/>
<f:view>
<h:form name="loginBean">
...
<h:panelGroup>
<h:commandButton id="boton1" value="#{mensajes['bot_aceptar']}"
action="#{loginBean.irPanelControl}"/>
</h:panelGroup>

...
</h:form>
</f:view>
</body>
</html>

 

7. Preparamos el método irPanelControl()
que necesariamente debe implementarse sin parámetros en loginBean,
donde debemos decidir qué hacer: Si el login/password corresponden
a un usuario conocido, muestra su panel de control. En caso contrario,
volvemos a la página de login indicando que el login/password
no corresponden a ningún usuario conocido. Además
también añadimos la variable donde se almacenará
el error de validación.

package com.autentia.prueba2jsf.beans;

import java.util.ArrayList;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpSession;

import com.autentia.prueba2jsf.data.Usuario;

/**
* @author Bea
* Bean para el manejo de la página de login
*/
public class LoginBean
{
public java.lang.String login;
private java.lang.String password;
private ArrayList errorMessages = new ArrayList();

public LoginBean()
{
}

public java.lang.String getLogin() {
return login;
}

public java.lang.String getPassword() {
return password;
}

public void setPassword(java.lang.String password) {
this.password = password;
}

public String getErrorMessages() {
String message=»»;
if (errorMessages.size() > 0)
{
for(int i=0; i<errorMessages.size(); i++)
{
message = message + «<BR>» +
(String)errorMessages.get(i);
}
}
return(message);
}

public String irPanelControl()
{
String donde = null;
if(!login.equals(«») && !password.equals(«»))
{
Usuario usuario = Usuario.valida(login,password);
if(usuario==null)
errorMessages.add(«Usuario no autorizado»);
else
{
// Metemos al usuario en sesión
ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();
HttpSession session = (HttpSession)context.getSession(true);
session.setAttribute(«usuarioLogin»,usuario);
donde=»ir_panelcontrol»;
}
}
return donde;
}

}

 

8. Creamos una clase Usuario cuya responsabilidad
será validar el login y password. No accedemos a base de datos,
hacemos la validación a pelo. En el caso de no pasar con éxito
la validación, el método valida devolverá
null.

package com.autentia.prueba2jsf.data;
/**
* @author Bea
* Entidad que representa un usuario
*/
public class Usuario
{
private String login;
private String password;
private String nombre;
public Usuario(String login,String password,String nombre)
{
this.login=login;
this.password=password;
this.nombre=nombre;
}
public String getLogin() {
return login;
}
public void setLogin(String login) {
this.login = login;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
/**
* Valida a pelo un usuario
* @param login login del usuario
* @param password password del usuario
* @return
*/
public static Usuario valida(String login,String password)
{
Usuario usuario = null;
if(login.equalsIgnoreCase("administrador") &&
password.equals("12345678"))
usuario = new Usuario(login,password,"Juan Cuesta Gómez");
return usuario;
}

}

 

9. Añadimos la nueva página de
panel de control en la parte navigation-Rules del fichero
descriptor ejemplojsf2.xml. Después de hacerlo visualmente
con Exadel, revisamos el fuente generado y queda como sigue:

<navigation-rule>
<display-name>Redirige al panel de control una vez se valida
al usuario</display-name>
<from-view-id>/home.jsp</from-view-id>
<navigation-case>
<from-outcome>ir_panelcontrol</from-outcome>
<to-view-id>/panelControl.jsp</to-view-id>
<redirect/>
</navigation-case>
</navigation-rule>

 

 

 

10. Creamos la página del panel de control.
Además añadimos a loginBean un método
que recupere al usuario de sesión

<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/extensions"
prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<html>
<head>
<title>PRIMERA PRUEBA JSF</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<br><br>
<f:view>
<h:form name="loginBean">
<font class="mensajeBienvenida">
Bienvenido <h:outputText value="#{loginBean.usuarioValidado.nombre}"/>.
En un futuro tendrás un panel de control muy completo
</font>
</h:form>
</f:view>
</body>
</html>
__________________________________________________________________________________


public class LoginBean
{
...
private Usuario usuarioValidado;
...

public Usuario getUsuarioValidado()

{
// Recuperamos el usuario de sesión. Si no está, devolvemos
un usuario vacío
ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();
HttpSession session = (HttpSession)context.getSession(true);
if(session.getAttribute("usuarioLogin") == null)
usuarioValidado = new Usuario();
else
usuarioValidado = (Usuario)session.getAttribute("usuarioLogin");
return usuarioValidado;
}

..

 

11. Utilizamos el build.xml que nos ha puesto
Exadel a la hora de crear el proyecto para compilar y desplegar
la aplicación. Me imagino que el target a utilizar será
el deploy… y veo que hay problemas, falta la inclusión
de alguno de los jars que hay en el directorio lib. Como no me gusta
como está hecho el build.xml, modifico varias cosillas para
poner bien el classpath de compilación y aprovechar el target
deploy para que despliegue la aplicación en mi TomCat.

 

 

12. y ahora probamos sin errores….

con errores de validación de los campos
del formulario…

con los errores de validación que hemos
puesto nosotros…

 

 

Prueba2.
Trabajando con Sun Java Studio Creator 2

 

Descargando e instalando Sun Java Studio Creator 2

Para poder descargase Java Studio Creator hay que
ir a la página siguiente:
  http://developers.sun.com/prodtech/javatools/jscreator/downloads/

Y registrarse Join SDN. Una vez registrado,
ya se puede acceder a Go to the Java Studio Creator 2 Download page (SDN
members-only)
y descargase el fichero creator-2-windows-ml.exe. La
ejecución de la instalación es trivial.

 

Creando un proyecto con Java Studio Creator

1. Seleccionamos Categoría Web
y dentro de proyectos Aplicación Web JSF

2. El área de trabajo que nos presenta
entre expectacular y agobiante ante la cantidad de posibilidades
que se nos ofrece; tenemos disponibles para nuestro proyecto, y
tan sólo arrastrando a nuestra área de trabajo clips
de código, componentes JSF…. Además, al contrario
que ocurría con Exadel el código fuente y la vista
si están sincronizados en ambos sentidos. Nos vamos a centrar
porque podemos perder mucho tiempo probando todo lo que ofrece el
entorno. Lo primero que hacemos es cambiar el nombre de la página
inicial de page1 a home para que el ejemplo sea análogo al
anterior. Para ello vamos a la pestaña de Explorador de Proyectos>Prueba3JSF
y con botón derecho sobre la página damos a cambiar
nombre. Decimos que sí a la advertencia de que va a refactorizar
la aplicación y vemos que efectivamente se ha cambiado el
nombre. Además, especificamos que dicha página es
la que arranca la aplicación

 

 

3. Seleccionamos la página home.jsp
y vamos arrastrando componentes desde la pestaña Paleta al
área de trabajo hasta conseguir el aspecto deseado. Vamos
completando las propiedades de dichos componentes en la ventana
de propiedades

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

4. Vemos el fuente java generado a partir de
la página home.jsp que estamos creando y observamos con horror
que el fuente generado está totalmente ligado a Sun:

import com.sun.rave.web.ui.appbase.AbstractPageBean;
import com.sun.rave.web.ui.component.Body;
import com.sun.rave.web.ui.component.Form;
import com.sun.rave.web.ui.component.Head;
import com.sun.rave.web.ui.component.Html;
import com.sun.rave.web.ui.component.Link;
import com.sun.rave.web.ui.component.Page;
....

 

Se nos quitan las ganas de seguir con el ejemplo,
pero continuamos. Intentamos establecer la navegabilidad de forma
que cuando el usuario introduzca un usuario y una password y pulse
el botón Validar la aplicación redirija a su
panel de control. Para ello vamos a la pestaña de proyectos
y hacemos doble click sobre Navegación de página.
Sobre el panel que se nos presenta, pulsamos con el botón derecho
y confirmamos que queremos crear la página del panel de control.

 

 

5. Arrastramos el ratón desde home.jsp
a panelControl.jsp para indicar que la navegabilidad va desde home
a panel de control. Además si se pulsa una vez sobre la página
home.jsp se muestra los componentes que existen en esta página
que pueden provocar submit (en este ejemplo sólo tenemos
el botón de validación)

 

6. Editamos el fichero home.java y completamos
el método botonValidar_action()

public String botonValidar_action() {
return "ir_panelcontrol";
}

 

Conclusión

Yo me quedo con Exadel Studio, no por potencia ni
robusted, sino porque lo que me ayuda a generar es código de libre
distribución hoy y en un futuro; además es muy sencilla
de utilizar (no he tenido que leer ningún tutorial para hacer el
ejemplo). La única deficiencia que he encontrado es que no se puede
crear la navegabilidad entre páginas gráficamente, pero
tampoco considero que esto sea tan importante
.
Java Studio parece muy potente pero la dependencia con Sun hace que por
miedo a lo que pueda pasar en un futuro (que deje de ser gratuíta)
no la utilice para desarrollar proyectos con JSF.

Dejar respuesta

Please enter your comment!
Please enter your name here