JavaServer Faces (JSF)

Curso Prctico

Desarrollo del esqueleto de la Aplicacin CaJsfWeb

manuel.aznar@neodoo.es

francisco.solans@neodoo.es

aitor.acedo@neodoo.es

Neodoo Microsystems S.L.

www.neodoo.es

Un poco de historia (I)

Java Server Faces es el resultado de muchos aos desarrollando aplicaciones Web utilizando la tecnologa Java

La idea que tenemos que dejar clara es que JSF es el resultado de la experiencia de muchos aos dentro del desarrollo de aplicaciones Web utilizando Java como lenguaje de programacin.

Un poco de historia (II)

Qu es JavaServer Faces ?

JavaServer Faces (JSF) es una framework para crear aplicaciones orientadas a la Web.

En cierto modo, JavaServer Faces es una combinacin de las frameworks Struts y Swing:

De forma similar a Struts, JSF proporciona la gestin del ciclo de vida de la aplicacin a travs de un servlet controlador.

Parecido a Swing, JSP proporciona un modelo de componentes con gestin de eventos y renderizado.

Una idea que tenemos que transmitir es que las acciones programadas con JSF son directamente utilizables con Swing por ejemplo.

La parte del controlador podr ser reutilizado en aplicaciones que utilicen la framework Swing

Aplicacin CaJsfWeb (I)

Lo primero que tenemos que hacer cuando vayamos a desarrollar una aplicacin es dibujar las pginas por las que estar compuesta.

El esqueleto de la aplicacin CaJsfWeb permite autenticar a un usuario y efectuar las siguientes tareas:

Modificar la contrasea.

Ver listado de clientes.

Aparecer un listado de clientes pudiendo conocer si se trata de una persona fsica o no.

Registrar Cliente.

Formulario para incluir dentro de nuestra BBDD la informacin de un cliente nuevo.

Aplicacin CaJsfWeb (II)

Autenticacin al sistema:

Peticin de login tras autenticacin errnea:

Aplicacin CaJsfWeb (III)

Men principal:

Aplicacin CaJsfWeb (IV)

Vista para el cambio de contrasea:

Aplicacin CaJsfWeb (V)

Ver listado de clientes:

Aplicacin CaJsfWeb (VI)

Registrar clientes nuevos en la BBDD

Configuracin de Eclipse (I)

Para desarrollar la aplicacin CaJsfWeb, utilizaremos el IDE Eclipse y los plugins de entorno web:

Eclipse SDK 3.2.2

Disponible en: www.eclipse.org/downloads/

Web Tools Platform (WTP).

Desde Eclipse accediendo a Help -> Software Updates > Find and Install... seleccionando Search for new features to install

Lista de mirrors: Callisto Discovery Site

Seleccionar Web and J2EE Development, presionar Select Required.

Web Tools Platform (WTP) Updates.

Comentar la posibilidad de realizar el proceso de la instalacin de WTP de un modo manual bajando los ficheros:emf-sdo-xsd-SDK-2.2.2.zipGEF-SDK-3.2.2.zipJEM-SDK-1.2.3_jem.zipwtp-jsf-R-1.5.3.zip

http://download.eclipse.org/webtools/downloads/drops/R1.5/R-1.5.3-200702082048/

Descomprimir y mover el contenido a las carpetas de eclipse correspondientes.

IMPORTANTE: Recordar que tenemos que presionar el botn Select Requiered para que todo funcione correctamente.

Configuracin de Eclipse (II)

Instalacin del plug-in Subclipse, utilizado para trabajar con Subversion dentro de Eclipse

Desde Eclipse accediendo a Help -> Software Updates > Find and Install... seleccionando Search for new features to install. Elegir New Remote Site...

Aceptamos la licencia y confirmamos la instalacin en nuestra versin de Eclipse

Las instrucciones para instalar el plugin Subclipse se han encontrado en la siguiente pgina:http://subclipse.tigris.org/install.html

Window->Preferences->Server->Installed Runtimes

Configuracin de Eclipse (III)

Los servidores ms comunes en las arquitecturas J2EE estn embebidos en el IDE Eclipse por lo que es posible tanto visualizar las trazas de log como controlar el servidor.

La configuracin de un servidor externo a Eclipse es la solucin ms adecuada para realizar depuraciones.

Proyectos Software Necesarios

Descargamos los siguientes proyectos para insertar las libreras necesarias en nuestro desarrollo web:

Aadir el driver JDBC de la base de datos (en nuestro caso MySQL) si no est ya en el servidor de aplicaciones, en el CLASSPATH del sistema o /jre/lib/ext. Nos podremos bajar el driver de http://dev.mysql.com/downloads/connector/j/5.0.html

Implementacin JavaServer Faces (Elegir una de las dos):

MyFaces (Apache): MyFaces Core 1.1.5 Distributions de http://myfaces.apache.org/download.html

JSF RI (Sun): Descargar de https://javaserverfaces.dev.java.net

Descargar las Jarkarta Taglibs http://www.apache.org/dist/jakarta/taglibs/standard/

Aadir al proyecto standard.jar (Es una implementacin Open Source de JSP Standard Tag Library (JSTL), version 1.1.2).

Nosotros trabajaremos con MyFaces

Es importante notar que la conexin a la BBDD funciona despus de haber configurado el conector.

Generacin Proyecto Nuevo (I)

Desde el IDE Eclipse, ir a File > New... > Project y en la ventana seleccionar Web > Dynamic Web Project.

Crear un proyecto denominado CaJsfWeb.

Seleccionar como Target Runtime Apache Tomcat v5.5

Seleccionar JavaServer Faces v1.1 Project en Configurations.

Posteriormente, seleccionar Dynamic Web Module, Java 5.0 o 6.0 (para uso de extensiones del lenguaje y anotaciones) y JavaServer Faces 1.1.

Context Root: CaJsfWeb, Content Directory: WebContent y Java Source Directory: src

En la ventana JSF capabilities, si no existe ningn Implementation Library, crearla importando las libreras del proyecto MyFaces o similar.

En nuestro caso, utilizamos MyFaces Core 1.1.5. agregamos tambin la librera standard.jar del proyecto Jakarta Taglibs.

Si por cualquier motivo se nos olvida introducir algn fichero .jar dentro de los jar's relacionados con la librera JSF podremos utilizar la siguiente opcin para poder introducir los jar que nos hayamos dejado:

Window->Preferences...->Web and XML-> JSF Libraries

Seleccionamos la que nos interese y presionamos Edit...

No es posible ejecutar un proyecto vaco: No puede encontrar un cliente capaz de lanzar la seleccion.

Generacin Proyecto Nuevo (II)

Hemos conseguido un esqueleto bsico para comenzar nuestra implementacin del proyecto CaJsfWeb.

Lo primero que vamos a desarrollar ser la vista utilizada para entrar en el sistema as como las pginas jsp, que pueden ser el resultado de introducir correctamente, o no, los datos dentro del formulario.

Existe un esqueleto ubicado en el servidor de Subversion.

Es necesario instalar el plugin Subclipse para tener soporte SVN (seguir las instrucciones de la ficha Configuracin de Eclipse (III))

Ir a File > New Project > SVN > Checkout Projects from SVN e introducir los datos del repositorio.

Nos podremos bajar las soluciones de los ejercicios propuestos.

web.xml (I)

El fichero web.xml contiene la configuracin inicial al arrancar el desarrollo web.

Si se indica solamente el contexto de la aplicacin, la pgina que se mostrar inicialmente ser una de las que se marquen en el bloque

En este caso, la primera pgina no puede pasar por ningn servlet por lo que la llamada es directamente al recurso.

El servlet de la implementacin JSF controla las URL's acabadas con una extensin determinada (en este caso *.faces):

Mediante las secciones y se configura el servlet.

Dado que el recurso indicado en la seccin no puede ser procesado por ningn servlet, es habitual dejarla con una simple redireccin.

Podemos explicar que hay diferentes posibilidades para el cdigo de la primera pgina (que no consta realmente de nuestra aplicacin)

Opcin 1:

Opcin 2: la que tenemos en nuestro desarrollo

web.xml (II)

Los ficheros de configuracin utilizados por el servlet que controla la implementacin JSF se indican gracias al parmetro javax.faces.CONFIG_FILES.

El nmero de ficheros depender de la complejidad de la aplicacin a desarrollar.

Otros parmetros de configuracin de JSF utilizados en la aplicacin CaJsfWeb:

En nuestro caso simplemente vamos a utilizar el primero, faces-config.xml

Explicar que si la aplicacin es complejo una buena idea es separar las reglas de navegacin en un fichero que se suele denominar navigation.xml y dejar el registro de los managed-bean dentro del fichero faces-config.xml.

El fichero de configuracin para el servlet utilizar el fichero que le hayamos indicado cuando hemos creado el proyecto dentro de Eclipse.

Creacin de un Formulario (I)

Creamos una pgina jsp que representar la vista del formulario de entrada a nuestra aplicacin:

Creacin de un Formulario (II)

Lo primero que nos encontramos dentro del la pgina jsp es:

Estamos indicando al motor de JSP's que queremos utilizar dos libreras de etiquetas, html y core, la primera contiene todas las etiquetas necesarias para trabajar con los elementos tpicos de HTML, como por ejemplo, formularios... La librera core contiene todas las etiquetas propias de JSF, por ejemplo, etiquetas de validacin, etiquetas del controlador...

Esta etiqueta es muy importante ya que informa al contenedor de que los componentes de esta pgina van a ser gestionados a travs de JSF, gracias a ella el rbol de componentes puede ser construdo o encontrado si la vista ya haba sido cargada con anterioridad.

Con la siguiente etiqueta le estamos diciendo a JSF que queremos representar un formulario en ese preciso lugar de la vista, a travs del atributo id JSF podr identificar cada uno de los componentes dentro del rbol que ha generado.

Introducir de manera muy superficial el inicio del ciclo de vida de JSF.

Introducir el concepto del rbol de componentes.

Creacin de un Formulario (III)

Esta etiqueta lo nico que har ser representar la cadena Login dentro de la pgina generada en nuestro navegador.

A parte de representar una caja de texto dentro de la vista, esta etiqueta es importante por el hecho de que vincula el contenido de la caja de texto con un campo nombre del bean que hemos denominado loginAction, que no viene a ser otra cosa que la clase LoginAction.

El contenido del atributo value, cuyo valor es #{loginAction.nombre}, es un ejemplo de uso de JSF EL, es decir, JavaServer Faces Expression Language, utilizado para establecer una asociacin entre la vista y el controlador de nuestra aplicacin.

Por ltimo, pero no menos importante, tenemos la etiqueta commandButton que gracias a su atributo action vincular el mtodo login de la clase LoginAction con el botn que estar representado en la pgina.

Hay que comentarles que el nombre del bean que aparece dentro del componente que hemos creado en la pgina TIENE QUE SER el mismo que aparece dentro del elemento

Tambin indicar la relacin entre la etiqueta inputText y el mtodo setXXX del bean que gestiona la vista.

Creacin del Managed Bean (I)

Creamos la clase LoginAction dentro del paquete es.neodoo.cajsfweb.controller

Atributos:

Crear los mtodos necesarios para poder acceder a los atributos:

Crear el mtodo para vincularlo con el botn de someter (submit) del formulario:

Los mtodos getters y setters sern utilizados por las vistas para poder trabajar con las properties del bean.

Creacin del Managed Bean (II)

El fichero faces-config.xml contiene la informacin relativa a la aplicacin que estamos desarrollando.

Al abrir el fichero faces-config.xml, desde la ventana Faces Configuration puede elegir la pestaa Overview para manipular de forma visual el fichero xml; en todo caso, siempre puede manipularse el fichero directamente desde el cdigo, seleccionando la pestaa Source. Aspecto inicial del fichero de configuracin:

Creacin del Managed Bean (III)

Registramos el managed bean que acabamos de crear dentro de faces-config.xml, seleccionando la pestaa ManagedBean:

El contenido del fichero faces-config.xml pero esta vez en modo texto:

Podemos aprovechar esta transparencia para contarles todo el rollo de los scopes!!!

requestsessionapplication

Reglas de Navegacin (I)

En el caso de CaJsfWeb, el fichero faces-config.xml contiene unas reglas que indican las secuencias de navegacin en la aplicacin web.

Desde el IDE Eclipse, pulse sobre el fichero WEB-INF/faces-config.xml y desde el panel Faces Configuration seleccione la pestaa 'Navigation'.

Desde el IDE Eclipse, pulse sobre el fichero WEB-INF/faces-config.xml y desde el panel Faces Configuration seleccione la ventana 'Overview'.

Explicar la relacin entre el elemento from-outcome y el String devuelto por el mtodo que hemos utilizado dentro del controlador con el botn.

Explicar la posibilidad, aunque a lo mejor cuando estn desarrollando algn ejemplo el tema de from-action para evitar alguna situacin problemtica

Avisar de que puede haber algun problema si queremos hacer modificaciones a travs del editor WYSIWYG de las reglas de navegacin, as que tienen que comprobar el fuente generado del fichero de configuracin.

Reglas de Navegacin (II)

Los elementos XML generados dentro de faces-config por las reglas de navegacin son:

Reglas de Navegacin (III)

Hablaremos de navegacin esttica cuando solamente existe una pgina destino que podemos alcanzar:

Diremos que la navegacin es dinmica cuando existe ms de una pgina destino a la que podemos ir desde la pgina origen:

Este tipo de navegacin estar implementado en la regla de navegacin que gestiona el desplazamiento entre la vista loginNak y la vista login.

Este caso es utilizado en la ventana de login, ya que no sabremos hasta que se est ejecutando la aplicacin que ventana tendremos que representar despus de entrar en la aplicacin.

Es importante recordar pero solamente si lo hacen mal que tienen que incluir los componentes dentro de una vista y de un formulario porque sino est mal compuesta la pgina!!!

META-INF/context.xml

Para acceder a travs de JNDI a la BBDD tenemos que aadir un elemento a la configuracin de nuestro desarrollo:

El fichero context.xml se encuentra ubicado dentro del directorio META-INF generado dentro de nuestro proyecto,

el elemento Context es una copia del generado automticamente por Eclipse dentro del fichero server.xml, que se

encuentra el servidor que hemos creado en la configuracin de nuestro entorno de desarrollo.

Una de las preguntas que me quedan por hacerle a Paco es que es lo que se modifica cuando ya hemos finalizado el proyecto dentro de la configuracin de pre-produccin y pasamos a la fase de produccin. Creo que me coment que docBase cambiaba y estara bien comentarlo dentro del curso.

Otra idea que tenemos que aportar es porque hemos creado este fichero dentro de META-INF y no hemos editado 'a mano' el fichero server.xml para aadir dicho elemento.

Estructura de directorios

El proyecto CaJsfWeb contiene un directorio WebContent con los recursos asociados a la web:

Los contenidos web como imgenes, css, html, pginas dinmicas, ...

Los ficheros de configuracin web.xml y faces-config.xml estn ubicados dentro de WEB-INF.

En el directorio Java Resources, se almacena:

El cdigo fuente de la aplicacin en src.

Inclusin de las libreras necesarias para soportar JSF y la Standard TagLib.

Ejecucin de CaJsfWeb (I)

Ejecucin de CaJsfWeb (II)

Ejecucin de CaJsfWeb (III)

Ejecucin de CaJsfWeb (IV)

Ciclo de vida de JSF (I)

JSF gestiona las llamadas HTTP mediante 7 fases tal como indica el diagrama:

Ciclo de vida de JSF (II)

Fase Reconstituir el rbol de llamada:

Crea un rbol de componentes para la pgina solicitada.

Fase Aplicar los valores de la llamada:

Se efecta una iteracin en el rbol de componentes y se ejecuta el mtodo decode() de cada componente. Este mtodo extrae informacin de la llamada y lo almacena en el componente.

Opcionalmente, los componentes pueden delegar la descodificacin a un renderizador.

Para descodificar la informacin de la llamada, los componentes o los renderizadores pueden crear eventos de llamada. Estas seales suelen indicar un cambio visual en uno o ms componentes.

Fase Gestionar los eventos de la llamada:

Los eventos de la llamada se gestionan llamando al mtodo processEvents() de cada componente que tiene una o ms llamadas.

Los componentes pueden gestionar los eventos directamente o delegando el evento a un gestor de eventos.

El mtodo processEvents() devuelve un valor booleano .Si es falso, el ciclo de vida salta a la fase Procesar Validaciones; de otro modo, el ciclo de vida avanza directamente a la fase Renderizar la Respuesta.

Ciclo de vida de JSF (III)

Fase Procesar validaciones:

La implementacin JSF invoca el mtodo validate() de cada validador.

Los validadores efectan los chequeos y devuelven un valor booleano del mtodo validate(). Si el mtodo devuelve true, el ciclo de vida procede normalmente; en otro caso, la implementacin JSF invoca directamente a la fase Renderizar Respuesta.

Fase Actualizar el modelo de valores:

Cada componente JSF puede ser asociado a un objeto Java (objeto modelo). El mtodo updateModel() de los componentes realiza esta transferencia y conversin. Los errores de conversin pueden ocurrir durante esta fase (paso de la request como String a objetos Java).

Si se produce un error de conversin, la implementacin JSF invoca directamente la fase Renderizar Respuesta.

Fase Invocar la aplicacin:

Los eventos de formulario y comandos (links, submit, ...) son gestionados en esta seccin por un gestor especfico de la aplicacn. Generalmente estos gestores indican una URL y la implementacin JSF redirige la llamada a este enlace.

Fase Renderizar la respuesta:

Se genera el rbol de componentes de respuesta y se enva la respuesta al cliente.

Ciclo de vida de JSF (IV)

Una idea interesante a tener en cuenta es que dicho ciclo de vida puede modificarse por parte del desarrollador utilizando la clase FacesContext.

Conversin (I)

Como el usuario de nuestra aplicacin web va a introducir los datos en formato texto en el formulario, en ocasiones los objetos que modelan nuestra lgica de negocio precisan objetos de otro tipo.

En este caso utilizamos un conversor estndar para poder trabajar con un tipo Date en la lgica aunque el dato sea introducido en nuestro componente como un String.

Podemos comentar cuales son todos los conversores estndar que nos proporciona la implementacin myfaces.

Aviso que se ha producido cuando he introducido el smbolo dentro de la vista para el ejemplo de la moneda. Utilizar la codificacin UTF-8 en vez de ISO-8859-1.

File->Properties

Conversin (II)

Para crear un conversor personalizado deberemos de seguir la siguientes instrucciones:

Implementar el interfaz Converter (javax.faces.convert.Converter)

Implementar el mtodo getAsObject, el cual convierte un campo de nuestro formulario (String) en un objeto del tipo que deseemos.

Implementar el mtodo getAsString, el cual convierte un objeto del tipo que nosotros necesitemos en un String.

Registrar nuestro conversor personalizado en el contexto Faces.

Insertar el conversor en las vistas que lo necesitemos utilizando la etiqueta

Conversin (III)

Validacin (I)

Algo que caracteriza a prcticamente todos los formularios que podamos desarrollar es el hecho de que los datos que introducimos tienen que cumplir una serie de requisitos, JSF proporciona un mecanismo muy sencillo de aadir reglas de validacin a nuestros campos.

Existen 4 tipos diferentes de validacin:

Validacin intrnseca de los componentes

Validacin a nivel de aplicacin

Componentes con validacin personalizada (los cuales implementan el interface Validator)

Mtodos de validacin implementados en los beans de la lgica de negocio

Validacin (II)

Para crear componentes que posean una validacin propia deberemos seguir los siguientes pasos:

Crear una clase que implemente el interfaz Validator (javax.faces.validator.Validator)

Implementar el mtodo validate.

Registrar el validador personalizado en el fichero faces-config.xml

Utilizar la etiqueta dentro de nuestras vistas

Validacin (III)

Arquitectura MVC de JSF

Para finalizar dar una panoramica general de como estara la arquitectura de JSF

Seguridad (I)

La seguridad se incluye en la aplicacin CaJsfWeb restringiendo unas zonas de acceso por usuario modificando los siguientes ficheros de configuracin:

web.xml

context.xml

Para completar la seguridad, sera recomendable incorporar un certificado SSL al servidor web Apache en vez de incluirlo en el contenedor / servidor J2EE.

Apache dispone de ms funcionalidades y mdulos para procesar las URL's.

Seguridad (II)

Configuracin del fichero web.xml para implementar el mecanismo de seguridad:

Configuracin del fichero tomcat-users.xml para implementar el mecanismo de seguridad:

Integracin JMS

Hay determinadas acciones asociadas a las pginas web que en caso de tardar excesivo tiempo, darn un time-out en el navegador del cliente.

Por regla general, suelen ser tareas que tardan ms tiempo que el time-out definido en el navegador por lo que la peticin de la Request es detenida.

En la aplicacin CaJsfWeb, existen 2 tareas que se pueden ejecutar en paralelo, es decir dejar la tarea en background para que el servidor la ejecute cuando pueda. El cliente recibir directamente la siguiente pgina y se le informar que en el menor tiempo posible se efectuar la labor solicitada:

Ejemplo aplicaciones:

Creacin del PDF del acta cerrada.

Envo de email para recordar password.

Arquitectura J2EE

En el caso de CaJsfWeb y por el hecho de usar servicios de mensajera asncrona, Apache Tomcat se queda 'limitado' puesto que no dispone de este servicio.

Es necesario utilizar de forma complementaria el sistema de mensajera JMS a travs de JBoss AS.

Segn la distribucin de los elementos de la arquitectura J2EE, podemos emplear Apache Tomcat de forma aislada o el que viene integrado en JBoss AS.

Comparativa Struts JSF (I)

Arquitectura de la framework Struts (Patrn MVC):

Comparativa Struts JSF (II)

Struts soporta redirecciones dinmicas a travs de forward:

El desarrollador ha de completar una clase que extiende de Action:

Comparativa Struts JSF (III)

Arquitectura de la framework JavaServer Faces (Patrn Page Controller Pattern):

Comparativa Struts JSF (IV)

JSF soporta la navegacin configurando el fichero de configuracin faces-config.xml:

Al contrario que Struts, la navegacin es aplicada a nivel de pgina y la accin puede ser independiente:

Navegacin esttica:

Navegacin dinmica:

Pgina JSP:

Clase con la accin:

Bibliografa

MySQL - http://dev.mysql.com/doc/refman/5.0/es/index.html

Data Access Object - http://es.wikipedia.org/wiki/Data_Access_Object

Etiquetas HTML en JSF - http://www.exadel.com/tutorial/jsf/jsftags-guide.html