PRIMERA APLICACIÓN CON JSF (JAVA SERVER FACES). Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Lenguajes orientados a objeto Java

¡votar!

PRIMERA APLICACIÓN CON JSF (JAVA SERVER FACES)

Java Server Faces es un Framework incluido dentro de Java EE que tiene como misión facilitar la construcción y mantenimiento de aplicaciones web den Java, siguiendo una arquitectura MVC (Modelo-Vista-Controlador)

COMPONENTES DE UNA APLICACIÓN JSF

JSF está orientado a prestar el soporte necesario para la construcción de las capas controlador y vista, dejando para las clases normales la capa del modelo.

Toda aplicación JSF tendrá un archivo de configuración Faces-config.xml, donde definiremos varios elementos claves para el funcionamiento de la aplicación. Es aquí donde definiremos las reglas de navegación por la web, según el resultado que obtengamos en cada operación.

Otro de los componentes que utilizaremos en las aplicaciones serán los Beans Gestionados, que no son más que simples JavaBeans, que además de ser utilizados para encapsular los datos de la capa cliente, disponen de métodos que responden a los eventos producidos en la capa cliente.

Todo Beans utilizado en la aplicación deberá de ser registrado en el archivo faces-config.xml. La apariencia que tendrás será la siguiente:

<managed-bean>
<managed-bean-name>credencialesBean</managed-bean-name>
<managed-bean-class>javabeans.CredencialesBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Expliquemos a continuación cada campo lo que significa:

managed-bean. Es el elemento principal en el que se incluyen los datos de registro del bean. Será necesario añadir un bloque <managed-bean> por cada bean que se quiera sea gestionado por el framework.
managed-bean-name. Es el nombre que permite referirse a la instancia del bean. Este nombre es utilizado mediante el lenguaje EL desde los componentes de la interfaz para acceder a las propiedades y métodos del objeto.
managed-bean-class. Nombre cualificado de la clase a la que pertenece el bean.
managed-bean.scope. Ámbito en el que será mantenida la instancia, siendo sus posibles valores: request, session y application.

Por último tendremos las vistas, que será la parte visible a los usuarios y que podrá estar creadas utilizando JSP. Si es así, deberemos de utilizar una serie de librerías de acciones que pasamos a detallar a continuación:

Librería html: proporciona los controles básicos html y una serie de componentes gráficos complejos. Todos los controles permiten integrar el modelo JavaBean, vinculando de manera automática las propiedades de un objeto a las de un control. Para su uso hay que poner la siguiente línea al principio del archivo JSP:

<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

Librería core: Incluyen elementos básicos para la generación de una vista JSF. También incluyen elementos especiales conocidos como validadores y conversores que permiten realizar validaciones y conversiones de datos. Para poder utilizar esta librería hay que incluir la siguiente línea:

<%@ taglib prefix="h" uri="http://java.sun.com/jsf/core" %>

Vamos a ver un ejemplo donde tendremos un formulario para registrar personas y meterlos en un array. Luego tendremos otro botón que nos permitirá sacar por pantalla los datos introducidos.

Lo primero que haremos será crear la clase JavaBean referente al formulario del cliente. El código es el siguiente:

package javabeans;
import java.util.*;
import javax.faces.context.*;
import javax.faces.event.*;
import javax.faces.component.*;
import javax.servlet.http.*;
public class PersonaBean {
private String nombre;
private long telefono;
private int edad;
public PersonaBean() {
}
public String getNombre(){
return this.nombre;
}
public void setNombre(String nombre){
this.nombre=nombre;
}
public long getTelefono(){
return this.telefono;
}
public void setTelefono(long telefono){
this.telefono=telefono;
}
public int getEdad(){
return this.edad;
}
public void setEdad(int edad){
this.edad=edad;
}
public String doGuardar(){
FacesContext context = FacesContext.getCurrentInstance();
HttpSession sesion = (HttpSession)context.getExternalContext().getSession(true);
ArrayList listapersonas = (ArrayList)sesion.getAttribute("listapersonas");

        //comprueba si ya existe la coleccion de personas en la sesion y si no es así la crea
        if(listapersonas==null){
            listapersonas = new ArrayList();
            sesion.setAttribute("listapersonas", listapersonas);
        }
        listapersonas.add(this);
        return null;
    }

Como vemos es una clase JavaBean normal con sus métodos SET y GET para las propiedades y un método doGuardar que se ejecutará cuando se pulse el botón de Guardar del formulario.

En este método doGuardar, lo que hacemos es obtener del ámbito sesión la lista de personas. Si esta lista es nula, entonces la creamos nueva, si no es nula, lo que hacemos es añadir a la lista el nuevo objeto persona.

El archivo faces-config.xml será el siguiente que os ponemos a continuación:

<?xml version=\'1.0\' encoding=\'UTF-8\'?>
<!-- =========== FULL CONFIGURATION FILE ================================== -->
<faces-config version="1.2" 
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-facesconfig_1_2.xsd">
<managed-bean>
<managed-bean-name>PersonaBean</managed-bean-name>
<managed-bean-class>javabeans.PersonaBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/grabadatos.jsp</from-view-id>
<navigation-case>
<from-outcome>ver</from-outcome>
<to-view-id>/ver.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

En este archivo, lo que hacemos es declarar el JavaBean utilizado y las reglas de navegación. En estas reglas, hemos indicado que cuando se dé de alta un usuario, la aplicación vuelva al formulario y cuando se pulse el botón de ver, este llamará a una url ver, que nos llevará al archivo ver.jsp.

Pasemos ahora a la vista del formulario de alta de personas.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insertar personas</title>
</head>
<body>
<center>
<h1>Formulario de datos</h1>
</center>
<f:view>
<h:form>
<table width="50%" align="center" border="0">
<tr>
<td>Nombre:</td>
<td>
<h:inputText value="#{PersonaBean.nombre}"/>
</td>
</tr>
<tr>
<td>Telefono:</td>
<td>
<h:inputText value="#{PersonaBean.telefono}"/>
</td>
</tr>
<tr>
<td>Edad:</td>
<td>
<h:inputText value="#{PersonaBean.edad}"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<h:commandButton value="Guardar" action="#{PersonaBean.doGuardar}"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<h:commandButton id="vertodos" rendered="false" value="Ver Todos" action="ver"/>
</td>
</tr>
</table>
</h:form>
</f:view>
</body>
</html>

De este código debemos destacar la utilización de las librería core y html comentadas anteriormente, y como se le asigna una propiedad del JavaBean a los distintos campos. Por ejemplo al campo edad, el código es:

<h:inputText value="#{PersonaBean.edad}"/>

InputText es el control referente al tipo text de html y le asociamos la propiedad edad del javabean.

En los botones le indicamos las acciones que deben de realizar, así cuando se pulsa en guardar ejecutará el método doGuardar del javabean. Mientras que cuando se pulse al botón de ver, lo que hace es mandarlo a la url ver, que corresponde a la vista ver.jsp, tal y como le hemos indicado en el archivo faces-config.xml.

Por último, la vista ver.jsp, lo que hará será recorrer la lista de clientes y mostrarla en una tabla. Para ello utilizaremos la librería core de JSTL (librería utilizada para crear páginas en JSP para no utilizar código java en los archivos)

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ver registros</title>
</head>
<body>
<center>
<h1>Listado de personas</h1>
<table border="1" align="center">
<tr>
<th>Nombre</th>
<th>Teléfono</th>
<th>Edad</th>
</tr>
<c:forEach var="per" items="${listapersonas}">
<tr>
<td><c:out value="${per.nombre}"/></td>
<td><c:out value="${per.telefono}"/></td>
<td><c:out value="${per.edad}"/></td>
</tr>
</c:forEach>
</table>
<br/><br/>
<a href="grabadatos.jsp">Volver</a>
</center>
</body>
</html>