En el ejemplo Ajax ActionLink de la aplicación demostración Jumpstart puede verse un ejemplo en funcionamiento de actualización de un fragmento de la página, tambien puede verse el código fuente de los elementos implicados.
Una de las cosas que hay que destacar es lo sencillo que es pasar de una aplicación no-ajax a una ajax si esto se ajusta a lo que necesitamos, para ello basta usar los parametros zone de los componentes y definir las zonas en la propia página, hay que notar que no es necesario separar ese contenido de la zonas en otro archivo para devolverlo únicamete cuando se haga la petición ajax todo está en un único archivo y Tapestry se encarga de devolver únicamente el contenido de la zona cuando esta vaya a a ser actualizada en una petición Ajax.
El actualizar fragmentos de una página con el contenido html generado por una zona cubre la mayoría de los casos en los que es necesario trabajar con Ajax, sin embargo, en alguna ocasión podenos necesitar trabajar a más bajo nivel haciendo nosotros mismos la petición Ajax y devolviendo datos en formato json en el servidor que luego procesaremos en el cliente para tratarlos, en el siguiente ejemplo se ve como es. El componente hace una petición ajax sobre el evento onGetColores del mismo al cabo de 5 segundos de cargarse la página en la que es incluido. En el cliente hace un alert para cada uno de los elementos devueltos en el evento.
//Colores.java
package com.blogspot.elblogdepicodev.tapestry.components;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.json.JSONArray;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;
@Import(library = { "Colores.js" })
public class Colores {
@Environmental
private JavaScriptSupport javaScriptSupport;
@Inject
private ComponentResources componentResources;
Object onGetColores() {
return new JSONArray("Rojo", "Verde", "Azul", "Negro");
}
protected void afterRender(MarkupWriter writer) {
String link = componentResources.createEventLink("getColores").toAbsoluteURI();
JSONObject spec = new JSONObject();
spec.put("link", link);
javaScriptSupport.addInitializerCall("colores", spec);
}
}
// Colores.js
function Colores(spec) {
this.link = spec.link;
var sthis = this;
setTimeout(function() { sthis.getColores(); }, 5000);
}
Colores.prototype.getColores = function() {
$j.ajax({
url: this.link,
success: function(data) {
$j.each(data, function(index, color) {
alert(color);
});
}
});
}
Tapestry.Initializer.colores = function(spec) {
new Colores(spec);
}
El javascript del ejemplo utiliza la librería jQuery para hacer la petición Ajax y la referencia a ella con la etiqueta script habría que incluirlo en la página, $j es una variable con una referencia a ella.
Todo realmente sencillo, en la mayoría de los casos no será necesario que trabajemos a bajo nivel con las peticiones Ajax. Otra cosa más que hace que trabajar con Tapestry sea muy agradable.
Referencia:
Documentación sobre Apache Tapestry
Peticiones Ajax en Tapestry (II)
http://tapestry.apache.org/ajax-and-zones.html
http://tapestry.apache.org/javascript.html
http://jumpstart.doublenegative.com.au/home.html
http://jumpstart.doublenegative.com.au/jumpstart/
