Introducción a una aplicación de JavaServer Faces

5 minutos

En esta unidad, se usará JavaServer Faces (JSF) como tecnología de "vista" para aprender el concepto básico de JSF.

¿Qué es JavaServer Faces?

JavaServer Faces se adoptó como especificación en la plataforma Java, Enterprise Edition (Java EE), como parte de Java EE 5 (2006). Inicialmente, JSF usaba Java Server Pages (JSP) para representar páginas HTML. Desde la versión 2.0, se ha usado Facelets, más similar a HTML estándar.

JSF es un marco de trabajo de la aplicación basado en componentes. El estado de cada componente se guarda según la interacción del cliente. El estado se guarda cuando se solicita una página nueva y se restaura cuando se devuelve.

Funcionalidad básica de JSF

Las aplicaciones de JSF se dividen aproximadamente en las dos funciones siguientes:

Facelets: un motor de plantillas basado en XHTML que describe los diseños de pantalla
BackingBean: una clase de Java que se enlaza a Facelets y establece los valores y los procesa

Facelets es un motor de plantillas basado en XHTML que describe los diseños de pantalla, escritos mediante XHTML. XHTML se ajusta a la definición de tipo de documento (DTD) definida en W3C y se describe como un archivo con una extensión xhtml.

BackingBean es una clase de Java vinculada a una página de JSF. Contiene métodos de acción, clientes de escucha de acción y clientes de escucha de cambio de valor. En Java EE 6, se implementaron beans de respaldo con beans administrados por JSF. Desde Java EE 7, los beans de contexto y de inserción de dependencias (CDI) se usan como implementación.

Creación de una página de JSF con PrimeFaces

PrimeFaces es una implementación de JSF de terceros que facilita la creación de componentes web de JSF. Es una biblioteca ligera con un archivo jar, sin configuración y sin dependencias necesarias. Solo tiene que descargar PrimeFaces, agregar primefaces-{versión}.jar a la ruta de clases e importar el espacio de nombres para empezar, como en xmlns:p="http://primefaces.org/ui".

Veamos un ejemplo. En la página de PrimeFaces siguiente, se utilizan las etiquetas p:outputLabel, p:inputText y p:commandButton para mostrar etiquetas, campos de entrada y botones.

<?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://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" >
    <h:head>
        <title>Input Value Counter Sample</title>
    </h:head>
    <h:body>
        <h:form>
            <p:outputLabel value="Basic"/><br/>
            <p:inputText value="#{indexcontroller.inputValue}"/><br/>
            <p:commandButton value="Submit" action="#{indexcontroller.submitButtonAction()}"/><br/>
        </h:form>
    </h:body>
</html>

Cuando escribe el código XHTML anterior, aparece la pantalla siguiente:

Screenshot that shows a JSF Facelets sample.

Compatibilidad de PrimeFaces con Ajax

JSF admite aplicaciones AJAX de forma predeterminada. Puede actualizar dinámicamente una parte de la pantalla sin actualizar la pantalla.

PrimeFaces usa el atributo update para facilitar la implementación de la compatibilidad de Ajax proporcionada por JSF. Especifique qué componente se debe actualizar con su identificador de destino. En el ejemplo siguiente, se agrega el atributo update ="ajaxUpdateText" a p:commandButton, por lo que se actualiza el elemento <div id ="ajaxUpdateText"> cuando se selecciona el botón. Puede especificar aquí id para cualquier componente HTML.

<div id="ajaxUpdateText">
...
</div>

<p:commandButton update="ajaxUpdateText" 
   value="Submit" action="#{indexcontroller.submitButtonAction()}"/>

Bean de respaldo de JSF

Los beans de respaldo son clases de Java que implementan el procesamiento de back-end asociado a una vista de JSF. En el ejemplo siguiente, se hará referencia a un bean de respaldo, IndexController, vinculado al código XHTML anterior. Se usarán las anotaciones @Named para configurar la aplicación JSF, de modo que se pueda hacer referencia a ella desde Facelets de JSF.

Si escribe <p: inputText value ="#{indexcontroller.inputValue}"/> en Facelets, el campo Texto de entrada se mostrará en la pantalla. El valor escrito se enlaza al elemento inputValue definido en la clase IndexController.

Además, si escribe <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/>, se mostrará el botón HTML. Cuando se selecciona el botón, invoca al método submitButtonAction() definido en la clase IndexController.

import java.io.Serializable;

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;

@Named("indexcontroller")
@ViewScoped
public class IndexController implements Serializable {

    private static final long serialVersionUID = 8485377386286855408L;

    @Setter @Getter
    private String inputValue;

    private int counter;

    public void submitButtonAction(){
        inputValue = inputValue + " : " + counter;
        counter++;
    }
}

De esta manera, JSF permite que la vista (Facelets) y el controlador (bean de respaldo) que conforman la pantalla se implementen por separado.