sábado, 20 de febrero de 2010

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


17 comentarios:

  1. Hi, ur blog is really nice & informative, while reading through translation I truly like it. I just wanna suggest that u should submit your blog in this website which is offering very unique features at cheap prices there are expert advertising team who will not only provide the adspace but also promote ur blog & affiliate ads through all over the networks which will definitely boost ur traffic & readers. Finally I have bookmarked ur blog & also shared to my friends. hope u have a wonderful day & !!happy blogging!!.

    ResponderEliminar
  2. 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

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

    GRACIAS!!!

    ResponderEliminar
  4. como hacerlo el equivalente en JSF 1.2?

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

    ResponderEliminar
  6. 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

    ResponderEliminar
  7. 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

    ResponderEliminar
  8. mmm... creo encontre la respuesta... glassfish 2.1 no soporta jsf 2...

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

    ResponderEliminar
  10. 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

    ResponderEliminar
  11. 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

    ResponderEliminar
  12. 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.

    ResponderEliminar
  13. Muy buen ejemplo, más claro imposible.

    ResponderEliminar
  14. 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......

    ResponderEliminar
  15. Gracias por el aporte jaja bueno por el plus del video

    ResponderEliminar
  16. Me has salvado de plano... Gracias.

    ResponderEliminar

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/