¿Qué es JSF?
Cuando veáis en algún sitio las siglas JSF estás significan
JavaServer Faces. Se trata de un framework para el desarrollo de aplicaciones web basadas en Java. Su funcionalidad se encuentra orientada a la realización de las interfaces gráficas simplificando notablemente el desarrollo de las mismas.
¿Qué necesito para empezar?
Para empezar a trabajar necesitaras: tener instalado java, un entorno de desarrollo para Java como podría ser Eclipse o Netbeans, un servidor de aplicaciones como podrían ser JBoss o GlassFish y las librerías para JSF 2.
Una manera simple de obtener todo lo necesario es descargar la última versión Java EE de Netbeans la cual incluye todo lo que vas a necesitar. Puedes realizar la descarga de manera totalmente gratuita desde
aquí.
Instalando Netbeans.
Una vez descargado instalamos ejecutamos el archivo y comenzará la instalación.
Como vemos en la imagen se nos pregunta que servidor de aplicaciones instalar, en este caso sólo será necesario que nos instalemos el servidor GlassFish.
Una vez instalado ya es posible comenzar a desarrollar nuestro proyecto.
Creando el proyecto.
Arrancamos la aplicación NetBeans y creamos un nuevo proyecto para ello vamos a la opción de menú
File y seleccionamos
New Project. Nos aparecerá la siguiente pantalla:
donde seleccionaremos como categoría J
ava Web y como proyecto
Web Application. En las siguientes pantallas que aparecen seleccionaremos el nombre del proyecto, su ubicación y el servidor en el cual se va a ejecutar el proyecto, en nuestro caso será el servidor
GlassFish.
La siguiente pantalla que nos aparece en el asistente es la que nos va a permitir incluir las librerías JSF necesarias.
Marcaremos en la lista de frameworks a usar
JavaServer Faces. En la parte inferior nos aparecerán a configuración del framework debemos asegurarnos de que en
Server Library aparezca
JSF 2.0. Una vez hecho esto ya podemos pulsar sobre finalizar tendremos creado la base del proyecto, incluyendo todas las librerías y configuraciones básicas necesarias.
Modificando el proyecto base.
Inicialmente nos aparecerá una página 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:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Hello from Facelets
</h:body>
</html>
y un archivo de configuración web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</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>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Lo primeros que vamos a hacer es crear un
JavaBean. Para aquellos que no sepan lo que es decir que se trata de un modelo de componentes usados para la encapsulación de varios objetos en un sólo objeto. De una manera simple podemos digamos que es una clase la cual tendrá una sería de atributos existiendo para cada uno de ellos una función de recuperación con el nombre
getNombre_atributo y una función de actualización con el nombre
setNombre_atributo
Nuestro bean de ejemplo tendrá como atributo un String llamado
descripcion, tal y como vemos a continuación.
package com.losada.jsf.bean;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
/**
*
* @author luis
*/
@ManagedBean(name="testBean")
@SessionScoped
public class TestJSF implements Serializable {
private String descripcion;
public String getDescripcion() {
return descripcion;
}
public void setDescripcion(String descripcion) {
this.descripcion = descripcion;
}
}
Puede verse que se han añadido al bean dos etiquetas:
- @ManagedBean(name="testBean"). Esta etiqueta indica a la aplicación que se trata de un bean que será usado para comunicarse con las páginas web que creemos mediante las etiquetas JSF.
- @SessionScooped. Indica que la información se mantendrá durante toda la sesión de modo que mientras está se encuentre abierta los valores de los atributos del bean se mantendrán.
Como siguiente paso vamos a modificar
index.xhtml. Como vemos se añaden varias etiquetas:
- h:form. Esta generará posteriormente el código html para un formulario.
- h:inputText. Esta etiqueta generará un campo de entrada de datos que estará asociado al atributo descripción de nuestro bean.
- h:commandButton. Generará un botón, al pulsarlo se hará un setDescripcion sobre nuestro bean y tras esto se cargará la página indicada en la propiedad action (en nuestro caso testJSF).
<?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>Mi primer proyecto JSF 2.0</title>
</h:head>
<h:body>
<!-- Creamos un formulario -->
<h:form>
<h:inputText value="#{testBean.descripcion}"></h:inputText>
<h:commandButton value="Enviar Formulario" action="testJSF"></h:commandButton>
</h:form>
</h:body>
</html>
Finalmente creamos un nuevo archivo
testJSF.xhtml. Tal y como se muestra a continuación.
<?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>Mi primer proyecto JSF 2.0</title>
</h:head>
<h:body>
<!-- Creamos un formulario -->
Tu texto: #{testBean.descripcion}
</h:body>
</html>
Con esto ya tenemos nuestro proyecto finalizado. Para probarlo ir al menú contextual que aparece sobre nuestro proyecto y seleccionamos
Deploy. Esto arrancará el servidor de aplicaciones si este no se encuentra arrancado ya y realizará el despliegue de la aplicación en el mismo.
Finalmente abriremos un navegador y cargaremos la misma:
Como vemos nos aparece un formulario en el cual podemos introducir un texto y una vez que pulsemos sobre el botón se enviará el formulario.
Así hemos creado nuestra primera aplicación JSF 2.0. Este es un ejemplo muy sencillo pero es posible complicarlo mucha mas realizando aplicaciones complejas.
Por ejemplo en el atributo
action del botón es posible no poner directamente una página de destino sino decirle que ejecute una función dentro del bean y en función del resultado de la misma ir a distintas páginas que tengamos definidas.
Por otro lado existen frameworks de componentes visuales como es el caso de
richfaces (que veremos mas adelante en otro artículo). De modo que tendremos componentes mucho más complejos que nos facilitarán el trabajo de manera notable.
