Java Server Faces con Eclipse

5
121042

Java Server Faces con
Eclipse

 

Java Server
Faces con Eclipse.
1

Introducción
a la tecnología Java Server Faces.
1

Instalación
del plugin de JSF para Eclipse.
2

Registrando
las bibliotecas de Sun para JSF 1.1.
4

Creación de
un nuevo proyecto JSF.
6

Un vistazo
al plugin de Eclipse para JSF.
11

Creación de
la  página de inicio JSF.
13

Probando la
aplicación.
20

Añadiendo
navegación entre páginas.
25

Añadiendo
navegación entre formularios.
29

Acciones
inmediatas.
32

Añadiendo
una lista dinámica a un combo.
35

Resumiendo.
38

Y lo
siguiente.
38

Conclusión.
39

Sobre el
autor
39

 

Introducción
a la tecnología Java Server Faces

 

En nuestro trabajo diario en Autentia
realizamos la
construcción de portales para clientes utilizando las
tecnologías web más modernas.
Una de estas tecnologías es el estándar Java
Server Faces, que nos permite
desarrollar aplicaciones empresariales robustas, en tiempos de
desarrollo
cortos, con una interfaz web amigable.

 

Cuando queremos hacer aplicaciones
web empresariales,
normalmente utilizamos algún framework o marco de trabajo
que nos facilite la
tarea. En el mundo Java disponemos de varios frameworks para este tipo
de
aplicaciones. En este tutorial le vamos a echar un vistazo al framework
de Java
Server Faces, que es un framework para desarrollo de aplicaciones web
que
utiliza el patrón de arquitectura MVC de tipo 2
(Arquitectura
Modelo-Vista-Controlador con controlador monolítico).

No vamos  a extendernos en
este punto, pues no es el
objetivo del tutorial, sino que vamos a describir un framework Java de
este
tipo: Java Server Faces.

 

El framework JSF instala en nuestra
aplicación web un
controlador que se encarga de la gestión de los formularios
y de la navegación
entre páginas. Toda la definición de las
páginas y de la navegación entre las
mismas. Esta es la ventaja principal de un controlador
monolítico y con un
fichero de configuración central: toda la lógica
de la aplicación se define en
un único punto.

 

El modelo de funcionamiento de JSF es
sencillo, muy
semejante al usado en Struts. Básicamente, cada
página de nuestra aplicación
está compuesta de un formulario (se pueden usar varios pero
no es el modo
adecuado).Al igual que en Struts, JSF permite asociar funciones
lógicas,
llamadas acciones, para cada formulario, de manera que al enviar el
formulario
con el botón “submit” se procese la
acción correspondiente. En este momento el
controlador de la aplicación decidirá, en
función del valor retornado por la
función, cuál es la página que se debe
mostrar para el resultado de la función.
Este mecanismo es el que produce la navegación por las
páginas de la
aplicación.

 

Pero además JSF introduce
el procesamiento de los
formularios por etapas. Cuando el formulario es enviado, el controlador
realiza
el procesamiento de las acciones asociadas al formulario en diferentes
etapas.
Durante estas etapas:

 

1.    
Se
obtienen los valores de la página

2.    
Se
procesan los eventos

3.    
Se
realizan las validaciones de los valores

4.    
Se
procesan las acciones

5.    
Se realiza
el render (dibujado) de la nueva vista de la página

6.    
Se realiza
la navegación, si es necesario, a otras páginas.

 

Lo más interesante de este
modelo, como veremos al comentar
las acciones inmediatas, es que no se deben completar todas las fases,
y el
proceso se puede interrumpir antes de llegar a la etapa de
navegación, con lo
que obtendríamos la misma página, pero con una
vista actualizada. Este
mecanismo lo utilizaremos para completar datos en la página
(rellenar combos en
el formulario), para realizar validaciones de parámetros,
para reaccionar
frente a eventos en los elementos del formulario, etc.

 

Ahora que ya hemos dado un vistazo
por encima a JSF,
pongámosnos manos a la obra.

Instalación
del plugin de JSF para Eclipse

Para realizar los ejemplos vamos a
utilizar el entorno de
desarrollo Eclipse, al que le vamos a añadir los elementos
necesarios para
desarrollar una página JSF.

 

Descargamos el plugin de JSF de
Eclipse y lo instalamos

 

Descargando una
implementación de JSF

En la página de http://javaserverfaces.dev.java.net
podemos descargar una implementación de la biblioteca JSF de
Sun Microsystems.

 

 

Nos vamos a la página de
descargas.

 

 

Vamos a probar la versión
jsf-1_1_02.zip, por lo que nos
descargamos el fichero y lo descomprimimos a una carpeta.

 

En la página vemos que ya
está disponible la versión 1.2 de
JSF. Usaremos la versión 1.1 pues es la que soporta nuestro
plugin de Eclipse,
y además porque está más revisada.

 

Registrando las
bibliotecas de Sun para JSF 1.1

 

Antes de comenzar a utilizar las
bibliotecas en el entorno
Eclipse. Para ello nos vamos al menú del Eclipse
“Ventanas\preferencias” y
buscamos en el apartado “Web and XML\JSF libraries”

 

 

Pulsamos en el botón
“New…”

 

 

Hemos elegido un nombre para la
biblioteca “sunJSF1.1”,
hemos indicado que cumple la especificación JSF 1.1,
añadimos las dos
bibliotecas y marcamos la casilla “is JSF
implementation”, luego pulsamos “Finish”.

 

 

Con ello ya hemos registrado la
biblioteca JSF de Sun.

También vamos a
añadir otros archivos jar organizados en dos
bibliotecas adicionales: commons y jslt.

 

 

Creación de
un nuevo proyecto JSF

Pulsamos en nuevo proyecto y elegimos
“Dynamic Web”

 

 

Le he puesto de nombre al proyecto
EjemplCrisJSF. Como
Runtime tengo el Tomcat 5.5, para que el Eclipse haga
automáticamente el
despliegue en el Tomcat.  Además en

”Configuration” he elegido “Java Server
Faces 1.1” y pulsamos en “Next”

 

 

Como vemos, se ha añadido
la faceta de Eclipse para Java
Server Faces 1. Pulsamos en “Next”.

 

 

Las propiedades del Web Module las
dejamos por defecto.
Pulsamos en “Next”.

 

 

 

 

 

En el cuadro de diálogo
elegimos todas las bibliotecas .jar
que están en la carpeta lib de la implementación.
Además le tenemos que poner un
nombre, y pulsamos “Finish”.

 

 

Pulsamos “Next” y
finalizará el proceso de creación del
proyecto.

 

También vamos a copiar a
la carpeta de biblioteca, que está
en WebContent\WEB-INF\lib un par de bibliotecas del Tomcat, en concreto
las
bibliotecas jstl.jar y estandar.jar que encontraremos en la carpeta del
Tomcat 
webpps\jsp-samples\WEB-INF\lib. Lo podríamos haber hecho
también siguiendo el
método usado para las bibliotecas de JSF, pero en este caso
hemos optado por el
método simple.

 

Un vistazo al plugin de
Eclipse para JSF

Para ver en acción el
plugin de JSF abrimos desde Eclipse el
fichero feces-config.xml. Veremos que Eclipse abre una ventana de
edición
especial para este fichero.

 

 

Como vemos el plugin añade
el fichero faces-config.xml al
proyecto web, en la carpeta WEB-INF. Si pulsamos sobre el fichero se
abre un
editor visual para el fichero. También vemos que el plugin
ha modificado el
fichero web.xml.

 

 

Creación de
la  página de inicio JSF

Nuestra primera página
será una típica página principal, con
un texto de presentación y un formulario de inicio de
sesión. Para ello
necesitamos crear lo siguiente:

1.    
Un bean
que guarde la información que va a introducir el usuario en
el formulario.

2.    
Una página
de inicio JSP que pida usuario y contraseña y realice una
acción en el
formulario

3.    
Dar de
alta el bean dentro del módulo JSF

 

Para crear el bean vamos a crear una
clase que luego
llevaremos al WEB-INF\classes. Dentro de Eclipse lo hacemos creando la
clase
userLoggingBean en la carpeta src\formBeans, que hemos creado al
efecto.

 

 

 

Creamos un archivo inicio.jsp como
sigue:

 

 

El texto de la página es

 

 

 

El Eclipse se está
quejando de que el
formBean.userLogingBean no lo puede resolver. Hay que darlo de alta en
los
manager beans del plugin de Eclipse.

 

Para ello pulsamos sobre el fichero
faces-config.xml y nos
vamos a la pestaña “Managed Beans” que
nos mostrará el plugin JSF

 

 

Ahora ya podemos darlo de alta.
Pulsamos sobre request y
luego el botón de Add…

 

 

Ahora pulsamos
“Browse” para localizar la clase (somos vagos
o precavidos…).

 

 

En cuanto que escribimos formBeans.
(que es el paquete donde
está nuestra clase) el plugin la encuentra. La seleccionamos
y pulsamos OK.

 

 

Pulsamos “Next”

 

 

Pulsamos “Finish”

 

 

Como vemos, ha cambiado un poco la
cosa…

 

Probando la
aplicación

Para probar la aplicación
vamos a utilizar el servidor
Tomcat integrado en Eclipse. Si no lo tienes configurado, es sencillo.
Descomprime el Tomcat 5.5 en una carpeta, por ejemplo
“D:\apps\apache-tomcat-5.5.17”,
y luego abre el cuadro de diálogo de preferencias del
Eclipse, seleccionando
“Windows\Preferences…”

 

 

Si no lo tienes añadido,
tal y como aparece en la imagen,
pulsa en “Add…”

 

 

Como vemos, sólo hay que
añadir el nombre, la carpeta donde
está instalado y el JRE que va a utilizar.

 

 

Probamos la aplicación.
Para ello pulsamos en con el botón
derecho sobre el archivo inicio.jsp, y elegimos “Run
as…\Run on Server”

 

 

y elegimos el nuevo servidor para la
ejecución quen nos
aparece en el cuadro de diálogo  que nos ofrece el
Eclipse. Finalmente el
resultado lo vemos con el navegador integrado en el Eclipse.

 

 

Ahora vamos a añadir
interacción a la página. Para ello
editamos la función de validación del bean,
dejándola de este modo:

 

 

Y al ejecutar de nuevo la
página de inicio obtenemos:

 

 

Añadiendo
navegación entre páginas

 

Ahora vamos a modificar la
página y vamos a añadir una
página principal, en la que suponemos que ya se ha validado
el usuario. Para
ello copiamos y modificamos el archivo inicio.jsp en otro nuevo
testInicio.jsp
como sigue:

 

 

 

Es una pantalla de prueba muy sosa,
pues lo único que
queremos ver es que la aplicación navega. Ahora hay que
añadir la regla de
navegación. Una regla de navegación nos lleva
desde una página jsp a otra al
realizarse una determinada acción, y según un
cierto resultado de la acción. El
resultado de la acción es la cadena que devuelve la
acción al ejecutarse.
Nuestra función de validación del usuario
devuelve la cadena “OK” si el usuario
y la contraseña coinciden con los prefijados (la
validación más sencilla
posible).

 

El método de
navegación es muy simple. Cuando el usuario
pulsa el botón de inicio, se envía el formulario
y el servlet de JSF llama a la
función validarUsuaro del bean userLoginBean, que devuelve
la cadena “test” si
el usuario es “test”.

 

 

La regla de navegación la
vamos a añadir con el plugin de
Eclipse para modificar el faces-config.xml, en la pestaña
“Navigation rule”

 

 

En principio partimos de una rejilla
en blanco, ya que no
tenemos definidas reglas de navegación. Arrastramos a la
rejilla las dos
páginas.

 

 

Aparecen los iconos de las
páginas, y la barra de
herramientas está oculta a la derecha de la
cuadrícula, que se mostrará al pinchar
sobre la etiqueta “Palette”.  Pulsamos
sobre el botón “Link” de la paleta de
herramientas y pulsamos primero sobre el icono de la página
de inicio y luego
sobre el icono de la página de prueba de inicio.

 

 

Al añadir el enlace nos
sale la flecha. Para modificar las
propiedades del enlace pulsamos el botón
“Select” de la paleta. Luego pinchamos
en la línea del enlace y con el botón derecho
seleccionamos “Show
view…\properties”. Debajo nos aparece la ventana
de propiedades del enlace.
Añadimos el valor “OK” a la
propiedad  “From-outcome” y guardamos los
cambios. 
Ahora nos aparece la etiqueta “OK” sobre la flecha
del enlace.

 

Podemos ver cómo se ha
modificado el fichero de
configuración faces-config.xml en la pestaña
“Source” del plugin JSF. En
nuestro caso nos queda el siguiente fichero de configuración:

 

 

Vemos que la regla de
navegación nos lleva de la página de
inicio a la principal si el resultado de la acción (no hemos
especificado el
nombre de la acción pero se puede hacer en la propiedad
From-action) tiene el
valor “OK”.

 

Probamos la aplicación con
la nueva regla, poniendo el
usuario y contraseña correcto. Nos aparece la siguiente
página tras pulsar el
botón “Inicio”

 

 

Como vemos no nos muestra usuario.

 

Cambiamos en la pestaña
“Managed beans” el tipo de ámbito
del bean userLoginBean de “request” a
“session” y guardamos los cambios.
Ejecutamos de nuevo la aplicación y vemos el resultado:

 

Añadiendo
navegación entre formularios

Vamos a modificar un poco nuestras
páginas. Añadimos una
página principal como sigue:

 

 

Y  una regla de
navegación con nuestro editor visual:

 

 

Lo que nos deja un fichero de
configuración como sigue:

 

 

Modificamos la función de
validación:

 

 

 

Y lo ejecutamos, poniendo como
usuario “usuario” y
contraseña “sesamo”. El resultado es de
esperar…

 

 

El formulario que se muestra tiene
algo más de cosmética. Lo
más interesante es ver cómo accedemos a los
valores de los beans entre los
diferentes formularios.

 

 

Acciones inmediatas

Como hemos visto, el flujo de
navegación entre páginas JSF
se produce al enviar el formulario. En nuestra pantalla de login,
cuando el
usuario pulsa el botón “Iniciar”, se
produce la navegación a la página
principal o se muestra una página de error.

 

El mecanismo de navegación
por tanto se desencadena al
enviar el formulario. En ocasiones necesitaremos modificar el
formulario sin
enviarlo, ya que puede que esté incompleto. Algunos ejemplos
sencillos de esta
situación serían:

  • Habilitar partes ocultas del
    formulario. Por ejemplo, habilitar una caja de texto para introducir un
    dominio, si se necesitase además del nombre de usuario y
    contraseña.
  • Modificar el formulario, por
    ejemplo modificando las opciones disponibles ya visibles.
  • Realizar comprobaciones previas de
    alguno de los campos de texto introducidos. Por ejemplo, se
    podría comprobar si un cierto número de documento
    se ha introducido sin errores, ya que muchos documentos incluyen
    funciones de verificación en su numeración (el
    DNI español es un ejemplo).

 

Para verlo  mejor con un
ejemplo, vamos a añadir al
formulario un campo dominio en el que el usuario podrá
elegir tres posibles
dominios, miempresa.com, yahoo.com y msn.com. Este campo
estará oculto y se
mostrará al pulsar un botón de “otro
dominio…”

 

Modificamos nuestro bean de login:

 

 

 

 

 

Ahora ejecutamos la página
de inicio

 

 

Como vemos, cuando se ejecuta nuestra
página aparece el
campo dominio (el que está debajo de la
contraseña) deshabilitado, no se puede
escribir en él. Si pulsamos el botón
“usar dominio…” se activa el campo y
podremos escribir sobre él.

 

 

Añadiendo una
lista dinámica a un combo

Una de las tareas más
frecuentes en los formularios
dinámicos es rellenar de manera dinámica los
contenidos de las listas
desplegables. Un caso típico suele ser los nombres de los
países y ciudades.
También es muy frecuente usar listas para seleccionar
criterios en los campos
de búsqueda.

Ahora vamos a añadir a
nuestra página principal una lista
cuyos valores se obtendrán dinámicamente. Para
ello vamos a utilizar dos
etiquetas de JSF, que son <h:selectOneMenu> y
<f:selectItems>. La
etiqueta selectOneMenu se encarga de pintar en el formulario una caja
combo, es
decir, una lista desplegable en la que se puede elegir un elemento. Hay
más
opciones disponibles, como son las etiquetas selectOneListbox (para
crear
listas de elementos), selectManyMenu, que son cajas combo de
selección
múltiple, y selectManyListbox, que son listas de
selección múltiple.

Además, todos estos
elementos tenemos que rellenarlos con
elementos (algo hay que seleccionar). Para ello nos ayudaremos de la
etiqueta
f:selectItems. Esta etiqueta define un conjunto de elementos de tipo
selectItem, que los recogerá de un bean, y los introduce en
la etiqueta select
que la contiene.

Veamos esto con un ejemplo.
Modificamos el bean
formularioBusquedas.java:

 

 

Añadimos el bean a los
Managed Beans

 

 

 

Y ahora modificamos la
página del formulario de búsqueda

 

 

Al ejecutar la página
vemos como el combo de elección
aparece relleno;

 

 

 

Resumiendo

Según lo visto en este
tutorial, el framework de JSF nos
permite:

  • Crear formularios web
    dinámicos, en los que el contenido del formulario se inserta
    automáticamente en un bean.
  • Controlar el flujo de la
    aplicación de manera centralizada, mediante el uso de reglas
    de navegación, que se evalúan al enviar el
    formulario.
  • Realizar cálculos y
    modificar los elementos del formulario dinámicamente, antes
    de que el usuario envie el formulario.

Todo esto vemos que es sencillo ya
que el entorno JSF nos
proporciona un lenguaje de expresiones que facilita la
comunicación entre las
páginas JSP y los beans, y un fichero de
configuración que gestiona de forma
centralizada la definición de beans y las reglas de
navegación.

Y lo siguiente

Una vez que dominamos la
comunicación entre el formulario
y los bean, el control de la navegación y las acciones
inmediatas, lo siguiente
por lo que podemos avanzar es:

  • Explorar el resto de las etiquetas
    que nos proporciona la biblioteca JSF, como son las
  • Definir reglas de
    validación, mediante las etiquetas de validación
    que incluye JSF.
  • Podemos utilizar controles JSF
    HTML más complejos, como los que nos proporciona la
    biblioteca MyFaces, que incluye componentes avanzados, calendarios,
    etc. que nos simplificarán el desarrollo de vistosas
    páginas web.
  • Y si somos más
    atrevidos, podemos mezclas JSF con AJAX o con Struts. Pero eso ya es de
    nota.

 

Conclusión

El framework JSF nos
permitirá crear aplicaciones Web
siguiendo el patrón MVC de tipo 2 (modelo vista controlador
con servlet
controlador único), de manera sencilla y flexible. Podremos
dotar de manera
sencilla a nuestros formularios de capacidades dinámicas que
facilitarán la
usabilidad de nuestras páginas, dándole un
aspecto más profesional,  sin
complicar en exceso el código de nuestra
aplicación.

Además, con el plugin de
JSF para Eclipse, integraremos de
manera rápida el desarrollo de aplicaciones Web con JSF
dentro de nuestro
entorno de desarrollo favorito.

 

En Autentia
sabemos
que es complicado
poner en marcha un
proyecto Web. Por ello, si necesitas que te orientemos en la
creación de un
nuevo proyecto, o incluso si quieres que te lo pongamos en marcha en
poco
tiempo, aprovechando nuestra experiencia y tus recursos, no dudes en
contactar
con nosotros, y verás que tus desarrollos dejan de ser un
problema para ser una
herramienta de trabajo más.

 

 

5 Comentarios

  1. Amigos de Adictos Al Trabajo:

    Me gusto el tutorial de Java Server Faces, pero instale el plugin para Eclipse y no me funciono. Cuando creo el proyeto no me aparece la carpeta \\\»src\\\» y cuando le doy click al archivo faces-config.xml, me aparece el siguiente error:

    -Project \\\’Ejempl3CrisJSF\\\’ is not configured as a MyEclipse Web-JSF Project. Therefore the MyEclipse JSF Config Editor may not be used with faces-config.xml. The default XML Editor has been used to open the file instead.-

    Por favor si me pudieran ayudar con esto.
    Gracias.

  2. Excelente tutorial. muy instructivo.

    tengo una pequeña consulta, tengo la ultima version eclipse helios y en preferencias no aparece la opcion jsf librerias para adicionar nuevos plugins.
    Levanto el tomcat 6.0 despliego el archivo war hecho en eclipse y me arroja error 404 recurso no esta disponible.
    com puedo desplegar correctamente el war desde tomcat?? muchas gracias

  3. Hola Buen Dia: Me encuentro trabajando sobre Java Server faces 3.4, mojarra 2.1 y JBoss 7.1 y eclipse juno 4.1 y mi problema es que tengo y pues en la clase \\\»miclase\\\» tengo el metodo \\\»mi metodo\\\» pero al intentar llamar al metodo \\\»mimetodo\\\» desde el home.xhtml no puedo o eclipse no me permite verlo… no se si es por el tipo de bean que tengo o no es la etiqueta correcta para llamar o no es el atributo de la etiqueta… gracias por su colaboracion.

Dejar respuesta

Please enter your comment!
Please enter your name here