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.
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
Pongamos el tag
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
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 unoutputText 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
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
Después de sufrir horas con a4jsf sin obtener resultados, saber que jsf 2.0 soporta ajax nativamente me da nuevas esperanzas...
ردحذفGRACIAS!!!
como hacerlo el equivalente en JSF 1.2?
ردحذفEn los primeros párrafos se explica que no se puede de manera natural, se debería utilizar complementos al JSF.
ردحذف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
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
mmm... creo encontre la respuesta... glassfish 2.1 no soporta jsf 2...
ردحذفGracias Totales, Me sirvio perfecto, hoy sacaste a una persona de un apuro =]
ردحذف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
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
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.
Muy buen ejemplo, más claro imposible.
ردحذفBuen aporte.. muchas gracias
ردحذف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......
ردحذفGracias por el aporte jaja bueno por el plus del video
ردحذفMe has salvado de plano... Gracias.
ردحذف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?