Extraido de
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=jsf2Return
Índice de contenidos
3. “Instalando” JSF 2 en nuestro proyecto
El tutorial lo he planteado como un pequeño proyecto donde
veremos en funcionamiento varias de las nuevas funcionalidades de JSF
2. El código completo del proyecto lo podéis descargar
aquí
El proyecto básicamente tiene dos pantallas, una de login (más
falsa que un duro de madera) y otra donde podremos dar de alta
tutoriales y veremos el listado con lo que vamos añadiendo.
El proyecto está preparado con Maven, donde nos encontraremos la
siguiente jerarquía de proyectos:
- autentiaJsf2-parent: Es el proyecto padre que dirige la
compilación del resto de proyectos.
- autentiaJsf2-model: Tendremos las clases del modelo.
- autentiaJsf2-web: Tendremos las clases de la interfaz Web, y
por supuesto toda la chicha sobre JSF 2 que nos interesa en este
tutorial.
A lo largo del tutorial vamos a ir mostrando trozos de código y
comentando las nuevas funcionalidades.
Empezaremos por enseñar como declara las dependencias de Maven
para poder usar JSF 2. En el pom.xml del parent y el model no hay
nada destacable, lo interesante está en el proyecto web:
...
<dependencies>
<dependency>
<groupId>com.autentia.tutorial.jsf2</groupId>
<artifactId>autentiaJsf2-model</artifactId>
<version>${version}</version>
</dependency>
<!-- API e implementación de JSF 2. Del repo dev.java.net -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.0.2-b10</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.0.2-b10</version>
</dependency>
<!-- API e implementación de JSR-303 (validaciones). Del repo de jboss -->
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
<version>1.0.0.GA</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>4.0.2.GA</version>
</dependency>
</dependencies>
<repositories>
<repository>
<id>maven2-repository.dev.java.net</id>
<name>Java.net Repository for Maven</name>
<url>http://download.java.net/maven/2</url>
</repository>
<repository>
<id>maven2-repository.jboss.com</id>
<name>Jboss Repository for Maven</name>
<url>http://repository.jboss.com/maven2</url>
</repository>
</repositories>
...
Podemos ver en las líneas 34-45, como se declaran dos repositorios.
Esto es necesario porque los jar todavía no están disponibles en el
repositorio público de ibiblio. Más arriba vemos como se declaran
las dependencias: por un lado incluimos tanto el api (paquetes
javax.faces) como la implementación (paquetes
com.sun.faces); ambos son necesarios. También se puede
ver como se incluye el
validation-api e
hibernate-validator. El primero es la interfaz del
JSR-303 y el segundo es la implementación que da Hibernate a este
JSR. Este JSR-303 ya está dentro de JSF 2 y nos permite, mediante
anotaciones, especificar que validaciones queremos hacer sobre
nuestros beans (más adelante veremos ejemplos de esto).
3.1. web.xml
El web.xml es extremadamente sencillo:
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>Autentia JSF 2 Tutorial</display-name>
<context-param>
<description>
Define the value returned by Application.getProjectStage(). Allowed values: Production, Development,
UnitTest, SystemTest, Extension. Default value is Production.
</description>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<!-- Definir este parámetro es más cómodo y más visual que usar el <ui:remove> de Facelets. -->
<context-param>
<description>Do not render comments in facelets (xhtml) pages. Default is false.</description>
<param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<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>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
Lo único destacable es la línea 13 donde indicamos la variables
PROJECT_STAGE. Esto nos sirve para indicar si estamos en
desarrollo, en producción, ... Esto va ha hacer que determinadas
piezas o componentes se comporten de forma distinta. Por ejemplo hay
ciertos componentes que en producción darán una excepción ante un
error, mientras que en desarrollo sacarán un mensaje en el propio
HTML. Esta variable también se puede definir por JNDI, cosa que
sería casi más recomendable, para no tener que modificar el fichero
cada vez que queremos hacer una instalación en un entorno diferente.
También vemos en la línea 20 la variable
FACELETS_SKIP_COMMENTS. Esta nos permite indicar que los
comentarios de XML
<!-- --> no se interpreten. En
Facelets, por defecto, se interpreta todo, incluso los comentarios.
Si queremos que algo no se interprete por el motor de Facelets habría
que usar la etiqueta
<ui:remove>, pero a mi me
resulta más cómodo e intuitivo usar los comentarios de verdad, así
que prefiero activar este parámetro.
4. Creando nuestra plantilla para la aplicación
Una de las novedades es que Facelets ya está integrado dentro del
propio estándar (antes lo podíamos usar pero eramos nosotros los
que nos teníamos que encargar de la integración ya que era un JAR
“de terceros”).
Facelets es un sistema de plantillas que nos va a permitir tanto
crear plantillas o layouts de nuestra aplicación, como crear
nuestros propios componentes por composición de forma muy sencilla
(podemos hacer un componente como la suma/composición de otros
componentes más pequeños).
Otra de las ventajas de usar Facelets es que nos libramos de las
dichosas JSP, y no es que tenga nada en contra de ellas, pero su
ciclo de vida no casa con el del diseño en base a componentes de
JSF. Así, a partir de ahora, nos vamos a dedicar a escribir XHTML
(es decir ficheros XML bien formados y válidos). Además Facelets
procesan estos ficheros más rápido que las clásicas JSP, por lo
que todo son ventajas ;)
4.1.
defaultLayout.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="style.css" />
<title>Autentia JSF 2 Tutorial</title>
</h:head>
<h:body>
<div id="layout">
<div id="top" class="top">
<ui:insert name="top">
<span id="title">Autentia JSF 2 Tutorial</span>
<a href="http://www.adictosaltrabajo.com" target="_blank">
<h:graphicImage library="img" name="logoAdictosAlTrabajo.png" alt="Adictos Al Trabajo" height="31" />
</a>
</ui:insert>
</div>
<div id="content">
<h1><ui:insert name="title">??? View title ???</ui:insert></h1>
<ui:insert name="content">??? View content ???</ui:insert></div>
<div id="bottom">
<ui:insert name="bottom">
<span id="copyright">Esta aplicación se distribuye bajo licencia <a href="http://www.gnu.org/licenses/gpl-3.0-standalone.html">GPL</a></span>
<a href="http://www.autentia.com" target="_blank">
<h:graphicImage value="#{resource['img:poweredByAutentia_100x30x72dpi.png']}" />
</a>
</ui:insert>
</div>
</div>
</h:body>
</html>
4.2. Gestión de
recursos
No vamos a explicar como funciona el sistema de plantillas de
Facelets, porque eso no es nuevo, pero si vamos a destacar algunos
elementos:
Línea 09 h:outputStylesheet - Nos
permite indicar que CSS queremos añadir en nuestra página. Por
defecto esta CSS se añadirá en el HEAD del html pero con un
atributo podemos forzar que se incluya en el BODY. Aunque hemos
puesto la etiqueta dentro de
h:head, esto no quiere
decir nada, la propia etiqueta
h:outputStylesheet
determina donde se acabará pintando en el html final la inclusión
de la CSS. Las CSS por defecto se incluyen en el HEAD, pero tenemos
otra etiqueta para incluir JavaScript (
h:outputScript)
que por defecto lo incluyen en el BODY.
4.2.1. ¿Qué significa el atributo library y name?
JSF 2 va a servir los recursos de un directorio
resources
que puede estar situado en nuestro directorio
webapp
(donde tenemos las imágenes, html, ...) o dentro del directorio
META-INF (esto da pie a empaquetar recursos dentro de un
JAR).
El atributo
library indica un subdirectorio dentro de
este directorio
resources, y el atributo
name,
el nombre del recurso que se quiere servir. De esta forma
library="css" name="style.css"
buscará el fichero
resources/css/style.css
Línea 20 h:graphicImage - Es la misma
idea que antes, pero para mostrar imágenes. Vemos como sigue la
misma idea de
library y
name.
Línea 34
#{resource['img:poweredByAutentia_100x30x72dpi.png']}
- es otra forma de hacer referencia a un recurso, esta vez usando EL.
La idea es la misma, pondremos library:nombreDelRecuros
5. Creando
la página de login
5.1. loginView.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="./defaultLayout.xhtml">
<ui:define name="title">Login</ui:define>
<ui:define name="content">
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="name" value="Nombre" />
<h:inputText id="name" label="Nombre" value="#{loginView.name}">
<f:validateBean />
<f:ajax render="nameError" />
</h:inputText>
<h:message id="nameError" for="name" errorClass="error" />
<h:outputLabel for="password" value="Clave" />
<h:inputSecret id="password" label="Clave" value="#{loginView.password}">
<f:validateBean />
<f:ajax render="passwordError" />
</h:inputSecret>
<h:message id="passwordError" for="password" errorClass="error" />
</h:panelGrid>
<h:commandButton action="listTutorialsView" value="Entrar" />
</h:form>
</ui:define>
</ui:composition>
</html>
5.2.
Validaciones según la JSR-303
En la línea 15 nos encontramos con
<f:validateBean
/>. Con esta nueva etiqueta estamos indicando que
queremos usar una validación de Bean, es decir, que queremos usar
una validación basada en la JSR-303.
Estas validaciones se definen con anotaciones en el propio Bean,
por lo que habría que mirar el código de la clase
LoginView.java
para encontrarnos con:
...
@NotNull
@Size(min = 6, max = 128)
private String name;
@NotNull
@Size(min = 6, max = 128)
private String password;
...
Se ve como estamos validando los atributos para que no sean nulos
y para que tengan un tamaño entre 6 y 128 caracteres.
Ojo, porque existe una limitación y es que aunque indiquemos el
@NotNull, si queremos que JSF 2 nos haga esta
validación, tendremos que indicar en el componente el atributo
required=”true” como hacíamos con JSF 1.
5.3. Soporte para
AJAX
JSF 2 ya viene con soporte para AJAX (este está basado en el
soporte proporcionado por RichFaces). De esta forma tenemos una nueva
etiqueta
f:ajax que pondremos en el componente
donde queremos tener comportamiento AJAX; de forma que si la ponemos
en un
h:commandButton se disparará al pulsar el botón,
y si la ponemos en un
h:inputText se disparará al
cambiar de valor (cuando el input text pierde el foco).
Básicamente lo que vamos ha hacer con esta etiqueta es indicar
que otros componentes queremos que se repinten cuando se produzca el
evento (al pulsar el botón, al cambiar de valor, ...). Esto lo
haremos con el atributo
render.
En el ejemplo, en las líneas 16 y 23 se ve como estamos
indicando que queremos repintar el componente que presenta los
mensajes de error de la validación. Como el
f:ajax lo
hemos asociado a un
h:inputText, lo que va a ocurrir es
que cuando este campo de entrada pierda el foco, se lanzará un
evento de cambio de valor, se irá al servidor, se hará la
validación de bean según el JSR-303, y si se producen errores estos
se pintarán en el componente
h:message indicado (nótese
que con el atributo
render de
f:ajax se
indican los ids de los componentes que se quieren repintar).
5.4. Navegación
Con JSF 2 se simplifica enormemente la navegación. Podemos seguir
usando las reglas de navegación en el
faces-config.xml,
pero JSF 2 añade soporte para “Convención frente a
Configuración”.
En la línea 28 vemos como en el
h:commandButton, en
el atributo
action, indicamos una cadena. Esta no es EL,
por lo que no estamos haciendo referencia a un backbean. Esta cadena
correspondería con el “outcome” que serviría para determinar la
regla de navegación a disparar. Pero como no hemos escrito ninguna
regla de navegación ¿qué es lo que va ha hacer JSF 2? Sencillo,
simplemente se limitará a buscar una página con el mismo nombre y
la extensión
.xhtml. Es decir, si en nuestro ejemplo
hemos puesto
action=”listTutorialsView”, JSF 2
intentará saltar a la vista
listTutorialsView.xhtml
En el ejemplo la página se buscará a la misma altura, pero
podemos indicar rutas relativas. Por ejemplo, si la ruta empieza por
/ estaremos indicando que es relativa al dominio y nombre de
aplicación actual.
6.
Creando la página de alta y listado
6.1.
listTutorialsView.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="./defaultLayout.xhtml">
<ui:define name="title">Tutoriales</ui:define>
<ui:define name="content">
<h2>Añade un tutorial</h2>
<h:form>
<h:panelGrid columns="5">
<h:outputLabel for="title" value="Título" />
<h:outputLabel for="publicationDate" value="Fecha de publicación (dd/mm/aaaa)" />
<h:outputLabel for="category" value="Categoría" />
<h:outputLabel for="subCategory" value="Sub-categoría" />
<h:outputLabel for="subsubCategory" value="Sub-sub-categoría" />
<h:inputText id="title" label="Título" value="#{listTutorialsView.title}" required="true" />
<h:inputText id="publicationDate" label="Fecha de publicación" value="#{listTutorialsView.publicationDate}" required="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:inputText>
<h:selectOneMenu id="category" label="Categoría" value="#{listTutorialsView.category}" converter="selectItemsConverter">
<f:selectItems value="#{listTutorialsView.categories}" var="category" itemLabel="#{category.name}" />
<f:ajax render="subCategory subsubCategory" />
</h:selectOneMenu>
<h:selectOneMenu id="subCategory" label="Sub-categoría" value="#{listTutorialsView.subCategory}" converter="selectItemsConverter">
<f:selectItems value="#{listTutorialsView.subCategories}" var="subCategory" itemLabel="#{subCategory.name}" />
<f:ajax render="subsubCategory" />
</h:selectOneMenu>
<h:selectOneMenu id="subsubCategory" label="Sub-sub-categoría" value="#{listTutorialsView.subsubCategory}" converter="selectItemsConverter">
<f:selectItems value="#{listTutorialsView.subsubCategories}" var="subsubCategory" itemLabel="#{subsubCategory.name}" />
</h:selectOneMenu>
</h:panelGrid>
<h:commandButton action="#{listTutorialsView.add}" value="Añadir" />
<h:messages errorClass="error" />
</h:form>
<h2>Lista de tutoriales</h2>
<h:dataTable id="tutorials" value="#{listTutorialsView.tutorials}" var="tutorial" border="1">
<h:column>
<f:facet name="header">
<h:outputText value="Título" />
</f:facet>
<h:outputText value="#{tutorial.title}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Categoría" />
</f:facet>
<h:outputText value="#{tutorial.category.name}">
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Fecha de publicación" />
</f:facet>
<h:outputText value="#{tutorial.publicationDate}">
<f:convertDateTime dateStyle="full" />
</h:outputText>
</h:column>
</h:dataTable>
</ui:define>
</ui:composition>
</html>
6.2.
Haciendo nuestros propios conversores
En la línea 24 vemos como indicamos un conversor para el
h:selectOneMenu con el atributo
converter=”selectItemsConverter”. Pero ¿cómo hemos
declarado y registrado este conversor? Para contestar a esta pregunta
tenemos que ver el código de la clase
SelectItemsConverter.java,
donde nos encontraremos con:
...
@FacesConverter("selectItemsConverter")
public class SelectItemsConverter implements Converter {
...
De nuevo JSF 2 nos simplifica la vida, ya que gracias a la
anotación
@FacesConverter no tenemos que dar de alta el
conversor en el fichero de configuración
faces-config.xml.
El valor de la anotación será el id del conversor, por el cual
haremos referencia en el xhtml (línea 24)
Al igual que esta anotación tenemos otras que nos permiten
registrar validadores, componentes, ...
6.3. Listas desplegables relacionadas en cascada
No se si os ha pasado alguna vez, pero es bastante común tener
listas desplegables relacionadas entre si. Lo típico de selecciono
país, selecciono región, selecciono ciudad; o cosas por el estilo.
Dentro de que esta situación es bastante común, no era del todo
fácil de implementar, y nos podía dar más de un quebradero de
cabeza (que si pongo el immediate=”true”, que si cambio los
valores de las lisas, ...).
Con JSF 2 estos problemas son historia, y ahora gracias al soporte
para AJAX se convierte en algo trivial. En las líneas 26 y 30,
podéis ver como volvemos a hacer uso de
f:ajax para indicar a JSF
que cuando se produzca un evento de cambio de valor en la lista se
vaya al servidor y a la vuelta vuelva a repintar las otras listas. En
la línea 26 vemos como indicamos dos ids en el atributo render,
esto es perfectamente posible, de forma que si queremos repintar más
de un componente, basta con indicar la lista de ids separados por un
espacio en blanco.
6.4. Ámbito
de los BackBeans
Con JSF teníamos los ámbitos de request (el ámbito por
defecto), session y application. En JSF 2 tenemos un par más: view y
custom (el ámbito custom nos permite definir nuestros propios ciclos
de vida para los backbeans).
View es más que request y menos que session. Es decir la primera
vez que naveguemos a una vista (a una página) se creará el
backbean, y este se mantendrá hasta que saltemos a otra vista por
una regla de navegación. Esto quiere decir que todas las peticiones
AJAX, o incluso peticiones que no sean AJAX pero que no nos hagan
saltar de vista, compartirán la misma instancia del backbean.
Este comportamiento es especialmente indicado para situaciones
como la que hemos descrito en el punto 6.3. Si los valores de las
listas desplegables están relacionadas, al cambiar el valor de la
primera lista, se cambiará el valor de las otras dos. Si el backbean
está en request al hacer la siguietne petición hemos perdido el
estado, por lo que era causa de bastantes errores, y lo que se solía
hacer era guardar el backbean en session. Gracias al ámbito view, ya
no es necesario saturar la session de backbeans para solucionar estos
problemas.
Para ver como podemos indicar que el backbean es de ámbito view,
podemos ver el código de la clase ListTutorialsView.java:
...
@ManagedBean
@ViewScoped
public class ListTutorialsView implements Serializable {
...
@ManagedProperty("#{libraryOfAlexandria}")
private LibraryOfAlexandria libraryOfAlexandria;
...
En la línea 03 vemos como con la anotación @ViewScoped
indicamos que el backbean es de ámbito view. De nuevo no ha hecho
falta declarar nada en el faces-confg.xml. Por supuesto tenemos
anotaciones similares para el resto de ámbitos.
6.5. Declaración de los backbeans e Inyección de Dependencias
En JSF 1 teníamos que declara los backbeans en el fichero
faces-config.xml. En JSF 2, gracias a la anotaciones
@ManagedBean, ya no es necesario. Podemos ver un ejemplo
de esto en la línea 02 del código del apartado 6.4. Si no
indicamos nada en la anotación, el id que se le dará al backbean
será el de la clase poniendo la primera letra en minúscula.
Ademas con anotaciones también podemos hacer Inyección de
Dependencias. Por ejemplo, en la línea 08 podemos ver como con
@ManagedProperty estamos inyectando el resultado del EL
"
#{libraryOfAlexandria}", esto es, un backbean
cuyo id es “
libraryOfAlexandria”.
La Inyección de Dependencias de JSF 2 tiene algunos
inconvenientes o incomodidades. Por ejemplo, aunque anotamos el
atributo de la clase, estamos obligados a tener el método getter y
setter.
Y otra cosa más importante es que JSF 2 sólo es capaz de buscar
los
@ManagedBean que están en el directorio
classes
de nuestra aplicación web. Es decir, no nos podríamos inyectar un
bean que esté dentro de un JAR. Debido a esta limitación la clase
LibraryOfAlexandria la hemos metido dentro del proyecto
web, pero realmente tendría que estar en el proyecto del modelo, ya
que se trata de un servicio de negocio (en otro tutorial ya veremos
como solventar esta limitación combinando JSF 2 con Spring).
JSF 2, también admite otras anotaciones como el
@PostConstruct.
Esta anotación se pone en un método y le indica a JSF 2 que debe
llamar a ese método después de crear e inyectar los valores al
backbean. Esta anotación es especialmente útil para hacer tareas de
inicialización del backbean usando las dependencias que nos inyecta
JSF 2.
7. ¿Y dónde está el fichero de configuración faces-config.xml?
Eso es de las mejores cosas que tiene JSF 2, que no hace falta !!!
Con esto no quiero decir que no lo uses, simplemente usarlo cuando
os aporte valor, pero en este ejemplo hemos visto como podemos hacer
una aplicación perfectamente funcional, con soporte para AJAX, con
conversores propios, con navegación, ... sin que exista este
fichero.
