La siguiente demo que vamos a ver es la de JSF. Java Server Faces es una especificación basda en componente para la construcción de insterfaces en una aplicación web. Como las veces anteriores vamos a implementar como mostrar un pequeño mensaje. Para ello vamos de nuevo a utilizar Eclipse, Maven y como servidor yo seguiré usando GlashFish.

Lo primero, es crear nuestro nuevo projecto que será un proyecto maven con un arquetipo vacio. Tras esto añadiremos en el fichero pom.xml lo siguiente:

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>
    <groupId>com.wordpress.infow</groupId>
    <artifactId>jsf</artifactId>
    <version>1.0</version>
    <packaging>war</packaging>
    <name>jsf</name>
    <url>http://www.infow.wordpress.com</url>
    <dependencies>
        <dependency>
            <groupId>javax.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
</project>

Lo siguiente que haremos, al ser una aplicación web, es configurar el web.xml en la ruta habitual webapp/WEB-INF/web.xml. Para ello, el contenido de dicho fichero será el siguiente:

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"
    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>JavaServerFaces</display-name>

    <!-- Change to "Production" when you are ready to deploy -->
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <!-- Welcome page -->
    <welcome-file-list>
        <welcome-file>faces/hello.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>

    <!-- Map these files with 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>

En él hemos definido la página de bienvenida como habríamos hecho en otros casos, el mapping para JSF y hemos mapeado extensiones de ficheros que serán procesadas.

Lo siguiente que vamos a implementar es el pequeño Bean que contendrá nuestro mensaje:

MessageBean.java

@ManagedBean
@SessionScoped
public class MessageBean implements Serializable {
    private static final long serialVersionUID = 1L;

    private String name;

    public String getName() {
        return this.name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

A tener en cuenta serán las anotaciones que tenemos:

• @ManagedBean: Significa que es un Bean de Java manejado por el framework de JSF.
• @SessionScoped: Es el ámbito que tendrá este Bean, hay varios de ellos: RequestScoped, ViewScoped, SessionScoped, ApplcationScoped, NoneScoped y CustomScoped.

Por lo demás, como podéis ver es una clase normal y corriente.

Bueno, como último paso, vamos a crear las vistas que nos permitirán insertar nuestro nombre y hacer el envío del formulario (hello.xhtml) y visualizar el mensaje (message.xhtml):

hello.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>Hello - JSF 2.0 Example</title>
    </h:head>
    <h:body>
        <h:form>
            <h:inputText value="#{messageBean.name}"></h:inputText>
            <h:commandButton value="Show message" action="message"></h:commandButton>
        </h:form>
    </h:body>
</html>

En este fichero, vemos como se monta el formulario y como guardamos el texto que introduzca el usuario en nuestro Bean con la instrucción #{messageBean.name}.

message.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>Message - JSF 2.0 Example</title>
    </h:head>
    <h:body bgcolor="white">
        <h4>Hello #{messageBean.name}</h4>
    </h:body>
</html>

Aquí vemos como mostrar el nombre introducido, que como podemos observar, se hace de igual forma que para la asignación, esto es porque JSF se encarga de identificar si necesita utilizar el Getter o el Setter.

Bueno, hasta aquí todo. Como siempre os dejo el código completo para que podáis echarle un ojo.

Código JSF Hello World: JSF

Próximo día más. Nos vemos.