Ajax en JSF 2.0 - Ejemplo 1: Combo cambia texto

La técnica Ajax es muy útil para hacer aplicaciones donde solo se actualiza una parte de la página y no toda.

Cuando salió JSF no tenía esta característica, pero otros frameworks (como ICEfaces) proporcionaban el Ajax como manera natural. También se podía utilizar otros complementos al JSF para que pueda funcionar.. pero ya no era el JSF natural.

Con JSF 2.0, el Ajax ya es natural. Mostraremos un conjunto de ejemplos de Ajax con JSf 2.0.

En este post haremos un ejemplo de cómo un combo puede cambiar el valor de un texto. Primero lo haremos sin Ajax, y luego con Ajax.

El ManagedBean

Primero haremos un ManagedBean llamado FormBean. Tendrá una propiedad que contiene las opciones del combo, y luego un atributo donde tendrá el valor seleccionado del combo.

package jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.model.SelectItem;
@ManagedBean(name = "FormBean")
@RequestScoped
public class FormBean {

    private SelectItem[] opciones = new SelectItem[]{new SelectItem("01", "Opción 1"),
        new SelectItem("02", "Opción 2"),
        new SelectItem("03", "Opción 3")};

    private String opcionActual;

    public FormBean() {
    }

    public SelectItem[] getOpciones() {
        return opciones;
    }

    public String getOpcionActual() {
        return opcionActual;
    }

    public void setOpcionActual(String opcionActual) {
        this.opcionActual = opcionActual;
    }       

}

El archivo .xhtml

Ahora, en nuestro .xhtml mostraremos el combo, ponemos un botón para ejecute el formulario y un outputText para que se muestre el valor seleccionado:

<?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"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Ejemplo Combo Cambia Texto</title>
    </h:head>
    <h:body>
        <h:form>
            Opciones: <h:selectOneMenu value="#{FormBean.opcionActual}">
                <f:selectItems value="#{FormBean.opciones}" />
            </h:selectOneMenu><br/>
            <h:commandButton value="Mostrar" />
            <br/>
            Opción seleccionada: <h:outputText id="opcionActual" value="#{FormBean.opcionActual}" />
        </h:form>
    </h:body>
</html>

Al ejecutarlo, veremos que se muestra el combo, cambiamos el valor de este, hacemos clic en el botón y se actualiza el valor de abajo. Muy simple :). Pero el problema es que tenemos que hacer clic en el botón para actualizar el texto inferior. Lo ideal es que se actualiza solo cuando se haga el cambio en el combo, si necesidad de hacer submit. Ahí es donde entra Ajax.

Implementado Ajax en JSF 2.0

En JSF 2.0 es tan fácil implementar Ajax como escribir un tag.
Pongamos el tag <f:ajax /> dentro del combo a mostrar. Pero como queremos que cambie solo el valor del outputText, le indicamos el id del tag en el atributo render. Así quedaría el .xhtml final.

<?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"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Ejemplo Combo Cambia Texto</title>
    </h:head>
    <h:body>
        <h:form>
            Opciones: <h:selectOneMenu value="#{FormBean.opcionActual}">
                <f:selectItems value="#{FormBean.opciones}" />
                <f:ajax render="opcionActual" />
            </h:selectOneMenu><br/>
            <h:commandButton value="Mostrar" />
            <br/>
            Opción seleccionada: <h:outputText id="opcionActual" value="#{FormBean.opcionActual}" />
        </h:form>
    </h:body>
</html>

Ahora, ejecutamos el proyecto y veremos qué pasa cuando cambiamos el combo.

El código fuente de este proyecto, está disponible aquí:
http://diesil-java.googlecode.com/files/JSF20AjaxComboCambiatexto.tar.gz

Y aquí un vídeo para que vean que no estoy mintiendo :P

Comentarios

  1. Excelente aporte,
    mi duda es: como puedo hacer lo mismo pero dinamicamente es decir en el archivo .xhtml unicamente hago esto:
    h:body>
    h:form binding=´#{FormBean.ifor_1}´ id=´form1´>
    /h:form>
    /h:body>

    (la llamada al backing bean en la etiqueta form)
    y en el backing bean programar el combobox y las etiquetas incluyendo el ayax

    hay alguna manera de hacer eso??
    salu2

    ResponderBorrar
  2. Después de sufrir horas con a4jsf sin obtener resultados, saber que jsf 2.0 soporta ajax nativamente me da nuevas esperanzas...

    GRACIAS!!!

    ResponderBorrar
  3. como hacerlo el equivalente en JSF 1.2?

    ResponderBorrar
  4. En los primeros párrafos se explica que no se puede de manera natural, se debería utilizar complementos al JSF.

    ResponderBorrar
  5. Muy buen el blog, pero kisiera saber como hacer esto usando un htmldatatable el cual esta conectado a una base propia del netbeans(SamplePool), les agradeceria muchooooo..
    Salu2

    ResponderBorrar
  6. Saludos... estoy trabajando con webSpace (glassfish 2.1)... quiero desarrollar un portlet que trabaje con jsf 2... alguna idea de como desarrollarlo?

    Nota: soy novato en el desarrollo... apenas me involucro con java

    ResponderBorrar
  7. mmm... creo encontre la respuesta... glassfish 2.1 no soporta jsf 2...

    ResponderBorrar
  8. Gracias Totales, Me sirvio perfecto, hoy sacaste a una persona de un apuro =]

    ResponderBorrar
  9. Muy bueno. Pero tengo una duda. ¿Al etiqueta de solo esta disponible en GlassFish v3 o también la encuentro para Tomcat v6?, si se puede para Tomcat, ¿Cómo le hago o que librerías necesito? yo utilizo las que descargue de http://javaserverfaces.java.net/ (2.1.1)[jsf-api.jar, jsf-impl.jar] y [standar.jar, jstl.jar].
    Yo utilizo Tomcat v6 y no me aparece la etiqueta.
    Gracias por ayudarme. ATTM: Ser Genis

    ResponderBorrar
  10. Hola
    El JSF 2.0 solo funciona con Java EE6. El Ajax mostrado es usando JSF 2.0. Por eso utilizo el GlassFish v3. Tomcat 6 no implementa Java EE6. El Tomcat 7 deberia soportar Java EE 6. No lo he probado, pero debería ser lo mismo. Podrías intentarlo y luego compartir con todos. saludos

    ResponderBorrar
  11. Hola, otra vez yopo.
    Confirmo la solución la utilizar la etiqueta [f:ajax].

    Me he descargado NetBeans IDE 7, Java EE 6 y Tomcat v7 y después de sufrirle un rato encontré la solución y efectivamente Tomcat v6 no implementa Java EE 6 hay que tener el Tomcat v7 y no hay que utilizar Java EE 6 WEB; cuando se crea el proyecto hay que que seleccionar J2EE 1.4 y con esto ya pueden utilizar [f:ajax].

    Que les sirva a los que utilizan Tomcat. Los veo en el grupo de google.

    --- Comento ---
    Me gustaría que publicaras un post sobre como utilizar Realms que me parece una buena opción para autentificar de usuario y seguridad.

    Sale, nos estamos leyendo.

    ResponderBorrar
  12. Gracias por el aporte, sumamente práctico, estoy aprendiendo JSF 2.0, habia revisado algunas cosas de JSF 1.2 pero veo que el 2.0 es mucho más potente, ojalá vaya resolviendo los problemas con los que me encuentre y espero poder aportar, en el futuro, algo de mi aprendizaje......

    ResponderBorrar
  13. Gracias por el aporte jaja bueno por el plus del video

    ResponderBorrar
  14. Hola qué tal!
    Disculpa vi su post hace unos cuantos minutos y estuve leyendo me parecen muy buenas perspectivas a la hora de actualizar con eje <p:ajax y si el uso de él.
    Estoy realizando un trabajo algo similar, sin embargo, me gustaría su opinión para actualizar el dato de una sola columna dentro de un datatable, probé con el ajax dentro de esta (columna) pero no lo ejecuta, mucho menos un update a través de una etiqueta de "id". ¿Sabe de qué manera podría mostrar un dato (del tipo date o fecha) de manera dinámica pero solamente en el column de una tabla temporal?

    ResponderBorrar

Publicar un comentario

Si quieres hacer una pregunta más específica, hazla en los foros que tenemos habilitados en Google Groups


Ah! solo se permiten comentarios de usuarios registrados. Si tienes OpenID, bienvenido! Puedes obtener su OpenID, aquí: http://openid.net/

Entradas más populares de este blog

Groovy: Un lenguaje dinámico y ágil para la Plataforma Java

Cambiar ícono a un JFrame

UML en NetBeans