Empezando con JSF 2.

0 (I) pajarokillo

http://pajarokillo.wordpress.com/2011/11/23/empezando-con-jsf-2-0-i/

pajarokillo Just another WordPress.com site

Inicio About Entradas Comentarios Frameworks Spring Spring Security Estndares J2EE JPA Uncategorized Java Core Java SE Otros Base de datos JPA 2.0 Mapeando relaciones one-to-one JPA 2.0 Mapeando relaciones many-to-one

Empezando con JSF 2.0 (I)

noviembre 23, 2011 Deja un comentario

Introduccin
JavaServer Faces (JSF) es una tecnologa y framework para aplicaciones Web basadas en el patrn MVC que simplifica el desarrollo de interfaces de usuario en aplicaciones Java EE. La interfaz de usuario se realiza mediante componentes y gestin de eventos. Los principales componentes de JSF son: Un API para representar componentes de interfaz de usuario (UI) y gestionar su estado, manejar eventos, validacin del lado servidor, conversin de datos, definir navegacin de pginas, soporte de internacionalizacin y accesibilidad. Dos Custom Tag Library para representar los componentes UI.

Ventajas de utilizar JSF

Una de las principales ventajas de utilizar JSF es que ofrece una separacin clara entre comportamiento y presentacin. Una aplicacin Web basada en JSF permite mapear peticiones HTTP a eventos y gestionar el estado de objetos. Con JSF tambin nos vemos liberados de la tecnologa que utilizamos en la presentacin. Generalmente, la presentacin en una aplicacin web se realiza con JSPs, mientras que JSF, adems de soportar esta tecnologa permite utilizar otras tecnologas de presentacin, como XML, de forma que la misma aplicacin pueda visualizarse en distintos dispositivos cliente. Y lo principal, JSF proporciona una arquitectura que permite gestionar el estado de los componentes, procesar los datos de los componentes, validar la entrada del usuario y gestionar eventos.

Qu es una aplicacin JSF

1 de 7

28/06/2012 11:37 a.m.

Empezando con JSF 2.0 (I) pajarokillo

http://pajarokillo.wordpress.com/2011/11/23/empezando-con-jsf-2-0-i/

En general, JSF es como cualquier otra aplicacin web. Se compone de lo siguiente: Una serie de JSPs (aunque como dije antes, no se limita a que la presentacin sea nicamente JSPs) Una serie de backing beans, que son JavaBeans con una serie de propiedades y funciones que definen un componente de la UI de una pgina. Un fichero de configuracin, que define las reglas de navegacin y configura los beans. El web.xml Opcionalmente, una serie de objetos que actan de validadores, conversores, listeners, Una serie de custom tags para representar los componentes sobre la pgina.

Cmo funciona JSF?

Una aplicacin JSF se encarga de procesar los eventos lanzados por componentes JSF. Estos eventos son provocados por acciones de usuario, por ejemplo, cuando el usuario pulsa un botn se produce un evento. El programador decide qu har la aplicacin JSF cuando se lanza el evento. Esto se har creando listener de eventos (managed beans). La siguiente imagen

ilustra lo comentado. Cuando se produce un evento se notifica con una peticin HTTP al servidor, donde existe un servlet, FacesServlet, que procesa la peticin. El siguiente diagrama de secuencia muestra cmo gestiona JSF una peticin.

Empezando con un ejemplo

Vamos a empezar a ponernos manos a la obra con un ejemplo sencillo utilizando JSF. Crearemos un ejemplo bsico que pone de manifiesto los elementos mnimos necesarios para crear una aplicacin web con JSF 2.0.

Configurando el proyecto
Utilizaremos Maven para crear y gestionar el proyecto. A continuacin, indico en el pom.xml las dependencias necesarias para trabajar con JSF. pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion>

2 de 7

28/06/2012 11:37 a.m.

Empezando con JSF 2.0 (I) pajarokillo

http://pajarokillo.wordpress.com/2011/11/23/empezando-con-jsf-2-0-i/

<groupId>org.icabanas.ejemplos</groupId> <artifactId>ejemplo-jsf</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> .......... <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!-- http://download.java.net/maven/2 --> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.1.0-b03</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.1.0-b03</version> </dependency> <!-- http://repo1.maven.org/maven --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.1</version> </dependency> <dependency> <groupId>com.sun.el</groupId> <artifactId>el-ri</artifactId> <version>1.0</version> </dependency> <dependency> <groupId>org.icabanas.ejemplos.jpa</groupId> <artifactId>ejemplo-jpa</artifactId> <version>0.0.1-SNAPSHOT</version> <type>jar</type> <scope>compile</scope> </dependency> </dependencies> .......... </project>

Actualizando el web.xml
Las aplicaciones desarrolladas con JSF deben declarar en su web.xml el servlet FacesServlet que se encargar de aceptar todas las peticiones que llegan al servidor, pasarlas al ciclo de vida para su proceso e inicializar recursos. Configuramos el web.xml de la siguiente forma web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"

3 de 7

28/06/2012 11:37 a.m.

Empezando con JSF 2.0 (I) pajarokillo

http://pajarokillo.wordpress.com/2011/11/23/empezando-con-jsf-2-0-i/

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>Aplicacin Web con JSF</display-name> <!-- Cambiar a "Production" cuando la aplicacin est lista para desplegarse en ese entorno --> <context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param> <!-- Definir este parmetro es ms cmodo y ms 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> <!-- Paginas de bienvenida --> <welcome-file-list> <welcome-file>faces/index.xhtml</welcome-file> </welcome-file-list> <!-- JSF mapping --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <!-- Mapeos con JSF --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> </web-app>

Como notas reseables, si nos fijamos en los parmetros de contexto definidos el parmetro javax.faces.PROJECT_STAGE nos sirve para indicar si estamos en desarrollo, produccin, Si estamos en desarrollo, si se producen errores en los componentes podemos obtener informacin valiosa a nivel de debug, mientras que si estamos en produccin, directamente se lanzaran excepciones. el parmetro javax.faces.FACELETS_SKIP_COMMENTS nos permite indicar que los comentarios XML (<! >) no se interpreten. En Facelets, por defecto, se interpreta todo, si queremos que algo no interprete el motor de Facelets deberamos usar la etiqueta <ui:remove>.

Creando el Managed Bean

Con JSF 2.0 un Managed Bean es simplemente un POJO con la anotacin @ManagedBean que indica que la clase es un managed bean. HolaMundo.java
package org.icabanas.ejemplos.jsf.managedbeans; import java.io.Serializable; import javax.faces.bean.ManagedBean;

4 de 7

28/06/2012 11:37 a.m.

Empezando con JSF 2.0 (I) pajarokillo

http://pajarokillo.wordpress.com/2011/11/23/empezando-con-jsf-2-0-i/

import javax.faces.bean.SessionScoped; @ManagedBean(name="holaBean") @SessionScoped public class HolaBean implements Serializable { private String nombre; public HolaMundo() { } public String getNombre() { return nombre; } public void setNombre(String nombre) { this.nombre = nombre; } }

En JSF 1.x era necesario declarar el managed bean en el fichero faces-config.xml, en JSF 2.0 no es necesario, con la anotacin es suficiente.

Creando la pgina JSF

En JSF 2.0 es recomendable crear las pginas JSF en formato .xhtml, fichero XML bien formado y vlido; esto es debido a que el ciclo de vida de una JSP no casa bien con el diseo de componentes basado en JSF. index.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:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>Aplicacin JSF 2.0</title> </h:head> <h:body> <h3>JSF 2.0 Ejemplo Hola Mundo</h3> <h:form> <h:inputText value="#{holaBean.nombre}"></h:inputText> <h:commandButton value="Entra" action="bienvenido"></h:commandButton> </h:form> </h:body> </html>

Esta pgina muestra un textbox de JSF que tiene asociado la propiedad nombre del bean HolaBean y un link a la pgina bienvenido.xhtml. En JSF 1.x se tena que declara las reglas de navegacin en el faces-config.xml, para indicar qu recursos se tena que visualizar al realizar una accin. En JSF 2.0, se puede indicar en el atributo action a la pgina a la que se quiere navegar. Esto es vlido para una navegacin simple, en algo ms complejo se siguen indicando las reglas de navegacin en el facesconfig.xml. bienvenido.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:h="http://java.sun.com/jsf/html"> <h:head> <title>Aplicacin JSF 2.0</title> </h:head> <h:body bgcolor="white"> <h3>JSF 2.0 Ejemplo Hola Mundo</h3>

5 de 7

28/06/2012 11:37 a.m.

Empezando con JSF 2.0 (I) pajarokillo

http://pajarokillo.wordpress.com/2011/11/23/empezando-con-jsf-2-0-i/

<h4>Bienvenido #{holaBean.nombre}</h4> </h:body> </html>

El #{} es una expresin del lenguaje JSF. En este caso #{holaBean.nombre}, cuando la pgina se enva se llama al mtodo setNombre() del bean HolaBean, y cuando la pgina bienvenido.xhtml se muestra se accede al mtodo getNombre().

Desplegando el proyecto
Ejecutamos el comando
mvn jetty:run-war

y comprobamos que la aplicacin arranca y se ejecuta correctamente.

Obteniendo el cdigo fuente

El cdigo fuente del ejemplo se puede descargar de la siguiente URL.

Referencias
http://www.devshed.com/c/a/Java/Introduction-to-JavaServer-Faces-1/ http://www.mkyong.com/tutorials/jsf-2-0-tutorials/ http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=jsf2Return http://en.wikipedia.org/wiki/XHTML http://www.laliluna.de/articles/posts/jsf-2-evaluation-test.html http://docs.oracle.com/javaee/5/tutorial/doc/bnaqq.html Una aplicacin JSF se encarga de procesar los eventos lanzados por componentes JSF. Estos eventos son provocados por acciones de usuario, por ejemplo, cuando el usuario pulsa un botn se produce un evento. El programador decide qu har la aplicacin JSF cuando se lanza el evento. Esto se har creando listener de eventos (managed beans). La siguiente imagen ilustra lo comentado. <a href=http://pajarokillo.files.wordpress.com/2011/11/figure1.gif><img class=aligncenter size-medium wp-image-406 title=figure1 src=http://pajarokillo.files.wordpress.com/2011/11/figure1.gif?w=300 alt=" width=300 height=168 /></a>
Share this: Me gusta: Be the first to like this.

Archivado en Frameworks, JSF Etiquetado con jsf

Deja un comentario

Categoras

Entradas recientes Geoposicionamiento con HTML5 y Google Maps JPA 2.0 Mapeando relaciones many-to-one

6 de 7

28/06/2012 11:37 a.m.

Empezando con JSF 2.0 (I) pajarokillo

http://pajarokillo.wordpress.com/2011/11/23/empezando-con-jsf-2-0-i/

Empezando con JSF 2.0 (I) JPA 2.0 Mapeando relaciones one-to-one JPA 2.0 Relaciones Archivos enero 2012 noviembre 2011 octubre 2011 septiembre 2011 Sitios de inters Discuss Get Inspired Get Polling Get Support Learn WordPress.com Theme Showcase WordPress Planet WordPress.com News Meta Registrarse Acceder WordPress XHTML Blog de WordPress.com. Tema: Enterprise por StudioPress.

7 de 7

28/06/2012 11:37 a.m.