Programación en Java: Desarrollando una Aplicación Simple con Facelets (5.3)

Esta sección describe, de manera general, los pasos que deben seguirse en el desarrollo de una aplicación con JavaServer Faces. Las tareas usualmente requeridas son las siguientes:

Desarrollar los beans manejadores
Crear las páginas usando etiquetas
Se define la navegación entre páginas
Se mapea la instancia FacesServlet
Se agregan declaraciones en los bean manejadores

Crear una Aplicación Facelets

El ejemplo usado en este tutorial es la aplicación guestnumber. La aplicación se presenta con una página que pregunta a los visitantes un número entre 0 y 10, valida la entrada contra un número aleatorio generado y responde con otra página que informa si el visitante dio un número correcto o incorrecto.

Desarrollar un Bean Manejador

En una aplicación típica de JavaSever Faces, cada página de la aplicación esta vinculada a un bean manejador. El bean manejador define los métodos y propiedades que son asociadas a los componentes.

La siguiente clase manejadora, UserNumberBean.java, genera un número aleatorio entre 0 y 10:

package guessNumber;



import java.util.Random;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;



@ManagedBean

@SessionScoped

public class UserNumberBean {



  Integer randomInt = null;

  Integer userNumber = null;

  String response = null;

  private long maximum=10;

  private long minimum=0;



  public UserNumberBean() {

      Random randomGR = new Random();

      randomInt = new Integer(randomGR.nextInt(10));

      System.out.println("Duke's number: " + randomInt);

  }



  public void setUserNumber(Integer user_number) {

      userNumber = user_number;

  }



  public Integer getUserNumber() {

      return userNumber;

  }



  public String getResponse() {

      if ((userNumber != null) && (userNumber.compareTo(randomInt) == 0)) {

          return "Yay! You got it!";

      } else {

          return "Sorry, " + userNumber + " is incorrect.";

      }

  }



  public long getMaximum() {

      return (this.maximum);

  }



  public void setMaximum(long maximum) {

      this.maximum = maximum;

  }



  public long getMinimum() {

      return (this.minimum);

  }



  public void setMinimum(long minimum) {

      this.minimum = minimum;

  }

}

Note el uso de la anotación @ManagedBean, la cual registra al bean manejador como recurso en la implementación de JavaServer Faces. La anotación @SessionScoped registra el alcance del bean como session.

Crear Vistas Facelets

Crear un página o vista es parte de la responsabilidad del autor de la página. Esta tarea involucra agregar componentes en las páginas, vincular esos componentes con valores y propiedades del bean manejador y registrar convertidores, validadores o escuchadores sobre esos componentes.

Para la aplicación de ejemplo, las páginas XHTML sirven como vista. La primera página de la aplicación ejemplo es una página llamada greeting.xhtml. Una mirada mas de cerca a las distintas secciones de esta página nos da mas información.

La primera sección especifica el lenguaje de la página XHTML, se declaran los namespace XML para las librerías de etiquetas usadas en la página web:

<html lang="en"

    xmlns="http://www.w3.org/1999/xhtml"

    xmlns:h="http://java.sun.com/jsf/html"

    xmlns:f="http://java.sun.com/jsf/core">

La siguiente sección usa varias etiquetas para insertar componentes en la página:

<h:head>

      <title>Guess Number Facelets Application</title>

  </h:head>

  <h:body>

      <h:form>

          <h:graphicImage value="#{resource['images:wave.med.gif']}"

                          alt="Duke waving his hand"/>

          <h2>

              Hi, my name is Duke. I am thinking of a number from

              #{userNumberBean.minimum} to #{userNumberBean.maximum}.

              Can you guess it?

          </h2>

          <p><h:inputText

                  id="userNo"

                  title="Type a number from 0 to 10:"

                  value="#{userNumberBean.userNumber}">

                  <f:validateLongRange

                      minimum="#{userNumberBean.minimum}"

                      maximum="#{userNumberBean.maximum}"/>

              </h:inputText>

        

              <h:commandButton id="submit" value="Submit"

                              action="response.xhtml"/>

          </p>

          <h:message showSummary="true" showDetail="false"

                     style="color: #d20005;

                     font-family: 'New Century Schoolbook', serif;

                     font-style: oblique;

                     text-decoration: overline"

                     id="errors1"

                     for="userNo"/>

      </h:form>

  </h:body>

Note el uso de las siguientes etiquetas:

Etiquetas de Faceletes HTML (Algunas de las cuales comienzan con h:) para agregar componentes
La etiqueta de Facelets f:validateLongRance para validar la entrada del usuario.

Un componente inputText acepta la entrada del usuario y establece el valor de una propiedad de bean userNumber a través de la expresión EL #{userNumberBean.userNumber}. El valor de entrada es validado por el validador de rangos estándar f:validateLongRange de JavaServer Faces.

La imagen wave.med.gif, es agregada a la página como un recurso. Para mas detalle acerca de la accesibilidad a recursos, vea el tema Recursos.

Un componente commandButton con la ID submit comienza la validación de los datos de entrada cuando el usuario da click en el botón. Usando navegación implícita, el componente redirige al cliente a la página response.xhtml, la cual muestra la respuesta a la entrada.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html lang="en"

    xmlns="http://www.w3.org/1999/xhtml"

    xmlns:h="http://java.sun.com/jsf/html">



  <h:head>

      <title>Guess Number Facelets Application</title>

  </h:head>

  <h:body>

      <h:form>

          <h:graphicImage value="#{resource['images:wave.med.gif']}"

                          alt="Duke waving his hand"/>

          <h2>

              <h:outputText id="result" value="#{userNumberBean.response}"/>

          </h2>

          <h:commandButton id="back" value="Back" action="greeting.xhtml"/>

      </h:form>

  </h:body>

</html>

Configuración de la Aplicación

Configurar una aplicación JavaServer Faces involucra mapear al ServletFaces en el archivo descriptor de despliegue web.xml y la posibilidad de agregar declaraciones de beans manejadores, reglas de navegación y archivos de recursos en el archivo de configuración de la aplicación faces-config.xml.

Si esta usando la IDE NetBeans, un archivo descriptor de despliegue es creado automáticamente. En el archivo web.xml creado, debe cambiar la página de saludo index.xhtml, por greeting.xhtml. Aquí mostramos un ejemplo de archivo web.xml, detallando el cambio.

<?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/greeting.xhtml</welcome-file>

  </welcome-file-list>

</web-app>

Note el uso del parámetro de contexto PROJECT_STAGE. Este parámetro identifica el estatus de la aplicación JavaServer Faces en el ciclo de vida del software.

El escenario de una aplicación puede afectar el comportamiento de la aplicación. Por ejemplo, si el escenario del proyecto es definido como Development, la información de debug es generada automáticamente para el usuario. Si no se define por el usuario, el escenario por default es Production.

Construir, Empaquetar, Desplegar y Correr la Aplicación Facelets de Ejemplo

Se puede usar la IDE NetBeans o Ant para construir, empaquetar, desplegar y correr el ejemplo guessnumber. El código para este ejemplo esta disponible en el directorio tut-install/examples/web/guessnumber.

Para construir, empaquetar y desplegar el ejemplo usando NetBeans

Desde el menú File, elija Abrir Proyecto
En la ventana de dialogo, navegue hasta: tut-install/examples/web
Seleccione la carpeta guessnumber
De click en el checkbox “Abrir como proyecto principal”
Abra el proyecto
En el tab de proyectos, de click derecho al proyecto guessnumber y seleccione Deploy.

Esta opción construye y despliega el ejemplo sobre una instancia de GlassFish

Para construir, empaquetar y desplegar el ejemplo guessnumber usando Ant

En una ventana de consola, buscar la ruta: tut-install/examples/web/guessnumber
Escriba el siguiente comando: ant, este comando llama al target default, el cual construye y empaqueta la aplicación en un archivo WAR, guessnumber.war, que estará localizado en el directorio dist.
Asegúrese de tener GlassFish corriendo.
Para desplegar la aplicación, escriba el comando: ant deploy

Para correr el ejemplo

Abra el navegador
Escriba la siguiente URL en el navegador: http://localhost:8080/guessnumber, una página se abrirá
En el campo de texto escriba un numero entre 0 y 10 y de click en submit. Otra página aparecerá, reportando si el visitante escribió un valor correcto o incorrecto.
Si el visitante esta equivocado, puede dar click en el botón de regreso a la página principal

Podrá continuar hasta que obtenga la respuesta correcta.

Desarrollando una Aplicación Simple con Facelets (5.3)

2 comentarios: