Categorías del Tutorial

icono_twiter
Alejandro Pérez García

Alejandro es socio fundador de Autentia y nuestro experto en J2EE, Linux y optimización de aplicaciones empresariales.

Ingeniero en Informática y Certified ScrumMaster

Si te gusta lo que ves, puedes contratarle para darte ayuda con soporte experto, impartir cursos presenciales en tu empresa o para que realicemos tus proyectos como factoría (Madrid).
Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-03-09

Tutorial visitado 76.620 veces Descargar en PDF
JSF 2 ya está aquí. The JSF Return, ahora más sencillo que nunca

JSF 2 ya está aquí !!!
The JSF Return, ahora más sencillo que nunca !!!

Creación: 28-02-2010

Quiero agradecer a mi compañero Germán (http://www.adictosaltrabajo.com/tutoriales-autor.php?autor=17) su ayuda para resolver varias de las cuestiones que aquí se tratan.



Índice de contenidos

1. Introducción
2. Entorno
3. “Instalando” JSF 2 en nuestro proyecto
3.1. web.xml
4. Creando nuestra plantilla para la aplicación
4.1. defaultLayout.xhtml
4.2. Gestión de recursos
4.2.1. ¿Qué significa el atributo library y name?
5. Creando la página de login
5.1. loginView.xhtml
5.2. Validaciones según la JSR-303
5.3. Soporte para AJAX
5.4. Navegación
6. Creando la página de alta y listado
6.1. listTutorialsView.xhtml
6.2. Haciendo nuestros propios conversores
6.3. Listas desplegables relacionadas en cascada
6.4. Ámbito de los BackBeans
6.5. Declaración de los backbeans e Inyección de Dependencias
7. ¿Y dónde está el fichero de configuración faces-config.xml?
8. Conclusiones
9. Sobre el autor
10. Recursos de interes



1. Introducción

He titulado este tutorial como “JSF 2 ya está aquí !!!” aunque realmente lleva ya cierto tiempo entre nosotros. Lo que si es verdad es que es nuestro primer tutorial al respecto, y esto es porque parece que tiene madurez suficiente como para plantearse usar JSF2 en proyectos reales (actualmente están con la 2.0.2 y ya están pensando en la 2.1)

Dicen que segundas partes nunca fueron buenas. Pues en este caso no aplica, ya que JSF 2 viene con más fuerza que nunca, simplificando mucho el desarrollo y añadiendo funcionalidades nuevas. En este tutorial veremos algunas de las principales novedades, así que agarraos bien a vuestros asientos y disfrutar del viaje ;)



2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17' (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM, 128GB Solid State Drive).

  • NVIDIA GeForce 9400M + 9600M GT with 512MB

  • Sistema Operativo: Mac OS X Snow Leopard 10.6.1

  • JDK 1.6.0_17

  • Maven 2.2.1

  • JSF 2 (2.0.2)

  • Tomcat 6.0.24



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.



8. Conclusiones

Sólo hemos empezado a rascar y ya nos gusta lo que encontramos.

Se dice que JSF 1 es un Ivory Tower, es decir, que está pensado desde un punto de vista intelectual, pero desconectado del mundo práctico. El papel lo agunta todo, pero cuando lo llevamos a la práctica hay cosas que no resultan tan útiles o tan sencilla. De hecho por eso nos animamos a crear Wuija (http://sourceforge.net/projects/wuijaframework/), para solventar todas estas deficiencias.

Ahora JSF 2 se construye bajo la experiencia práctica de librerías como ICEfaces (http://www.icefaces.org), RichFaces (http://www.jboss.org/richfaces), PrimerFaces (http://www.primefaces.org/), MyFaces (http://myfaces.apache.org/tomahawk/index.html), y casi podríamos decir que es un compendio de buenas ideas de todas ellas. Consiguiendo de esta manera simplificar el desarrollo y afianzar el estándar como una opción de futuro.

En próximos tutoriales, desde Autentia (http://www.autentia.com), intentaremos enseñaros a hacer componentes por composición (nueva característica de JSF 2 que tampoco estaba anteriormente en Facelets), a integrar con Spring 3, a integrar con otras librerías de componentes, y espero que a muchas cosas más ... ;)



9. Sobre el autor

Alejandro Pérez García, Ingeniero en Informática (especialidad de Ingeniería del Software) y Certified ScrumMaster

Socio fundador de Autentia (Formación, Consultoría, Desarrollo de sistemas transaccionales)

mailto:alejandropg@autentia.com

Autentia Real Business Solutions S.L. - "Soporte a Desarrollo"

http://www.autentia.com



10. Recursos de interes



A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2014-06-18-21:23:41

Autor: solterotkd

Buenas tardes:

Apenas estoy aprendiendo JSF me gustaria saber si me puedes dar la idea con este mismo ejemplo de como puedo ponerle una contrasena por favor al inicio, es decir que me la valide gracias

Fecha publicación: 2012-09-06-22:38:36

Autor: Majo

Hola, me parece muy bueno el tutorial, mira yo estoy trabajando con una pantalla que tiene anotacion @SessionScoped la llamaré BeanA y al interactuar con otra va bien, pero en un punto necesito que BeanA vuelva a reiniciar los valores osea que entre al metodo @PostConstruct, como puedo hacerlo? me ayudarias de mucho con este dato :)

Fecha publicación: 2012-02-16-13:56:49

Autor: jlopez

Hola, muchas gracias, me ha sido de mucha utilidad!!!

Fecha publicación: 2011-04-13-03:36:19

Autor: ivan2car

Saludos Alejandro; tengo una pequeña duda, va en cuestión de como trabajar la aplicación correctamente.
Programando MVC, tenemos el siguiente árbol así de paquetes por ejemplo

Vista
-->Tabla1
---->List.xhtml
---->Editar.xhtml
-->Tabla2
---->List.xhtml
---->Editar.xhtml
Controlador
--Tabla1
---->Tabla1Controlador.java
-->Tabla2
---->Tabla2Controlador.java
Logica
--Tabla1
---->Tabla1logica.java
-->Tabla2
---->Tabla2logica.java

Donde Tabla1 es maestro y Tabla2 es detalle, asi pues en List.xhtml tengo ya la lista de maestros. pero si quiero editar el detalle de un maestro, donde debería hacerlo? en Vista.Tabla1.Editar.xhtml o en Vista.Tabla2.Editar.xhtml

Sabiendo que si trabajo en Vista.Tabla1.Editar.html debería usar el Tabla1Controlador y agregar los detalles a la lista de este objeto. (algo así Tabla1logica.listTabla2logica().add(Tabla2logica), y mandar a guardar solamente el objeto Tabla1logica.

o por el contrario al momento de agregar un detalle al maestro, llamar a Vista.Tabla2.Editar.xhtml y asociarle el objeto maestro al detalle. Algo así
Tabla2logica.settabla1logica(Tabla1logica)

Algo con esa pequeña duda, no se que tendrá mas performance, o si ya hay algo escrito que me pueda dar luz. Gracias.

Fecha publicación: 2011-03-28-22:58:13

Autor: Lola

Hola, necesito saber si existe una herramienta que permita que mi

aplicación JSF en eclipse tenga un diseño bonito y agradable, que

solamente me permita despues copiar el código de dicha

herramienta en el eclipse con las mismas cosas que hice en la

herramienta. Por ejemplo en Blend para VS 2008.
Se los voy a agradecer, Gracias.

Fecha publicación: 2010-11-21-23:53:26

Autor: jcarmonaloeches

http://www.mkyong.com/jsf2/jsf-2-0-hello-world-example/

Fecha publicación: 2010-10-19-02:21:26

Autor: axlos

Muchas gracias por el material esta exelente. Ojala desarrollen el de JSF 2 con Spring 3.

Saludos desde Colombia,

Fecha publicación: 2010-03-24-13:21:38

Autor: jcarmonaloeches

Cada vez que necesito info, me fio más de esta menda.

¡Disfrute del viaje man! ;)