Bipunto..

Estrategias de diseño con AJAX Ed Ort y Mark Basler nos deleitan desde el Sun Developer Network (SDN) con un documento fundamental para desenvolverse correctamente en el desengrasante mundo de AJAX.

En el artículo 'AJAX Design Strategies' nos desgranan las seis estrategias que uno debe de conocer para poderse desenvolver con AJAX para alcanzar el nirvana. Esta tecnología de 'machyembrado' cliente-servidor, cuyo mayor pecado fue el tener relaciones íntimas, en la parte cliente, con ECMAScript (conocido fuera de Europa como JavaScript) definitivamente se ha consolidado como la tecnología Flash-killer. Juas, todavía recuerdo sempiternas discursiones en donde se apostaban pierna y media por una www en donde el html era relegado a un mero contenedor de .swf's ¿Todavía piensas que hay ciertas cosas que sólo se pueden hacer con Flash? No, no contestes todavía, echa un vistazo a esta demo (Im-prezionante!), haz un 'ver código fuente' y elucubra el porque.

Bueno, el caso es que Sun se ha volcado en AJAX, puesto que es una crema revivificante facial de aplicación nocturna, y se molesta en dedicarle todo un portal exclusivo, le brinda unos pocos Blueprints con patterns y todo, y otros cuantos manualetes, sobre todo para hacer encajes de bolillos con su JSF, a la cual AJAX, le aporta el brillo y la fragancia a pino que de otro modo harían pasar a JSF tan desapercibida como la ostrácica xForms.

Pero sigamos adelante con el html.
Comienza el documento con una introducción a AJAX. Qué voy a decir yo ahora de nuevo sobre semejante palabro, que no haya dicho ya. Sigue con un repaso de qué es, de qué se compone y cómo funciona. Y continúa con la chicha interesante: Cómo embutir AJAX en nuestros html's.

1. Estrategia 'Juan Palomo': Yo me lo guiso, yo me lo como. Aunque crear y utilizar el objeto XMLHttpRequest() sea asequible, una vez comprendido el proceso asíncrono y la callback(), lidiar con el XML recibido y el DOM no es tarea baladí, bueno realmente es un auténtico coñazo que te quita las ganas de usar AJAX. En nuestra ayuda contamos con E4X que permite ahorrarnos unos cuantos quebraderos de cabeza. Opción poco válida porque el estándar Europeo de la ECMA no parece que haya interesado a micosoft incluirlo en su cretácico IExploter 6, a ver que chapuza de implementación hace en su versión 7. Eso sí, para hacer la pirula al ODF y a Java, micosoft no duda en recurrir al ECMA, qué cretinos.

var req = XMLHttpRequest();
req.onreadystatechange = getReadyStateHandler(req);
req.open("POST", "server/url/getName.jsp", true);
req.send(null);

function getReadyStateHandler(req) {
  return function () {
    if (req.readyState = 4) && (req.status = 200) {
      Window.alert("hello" + req.responseText);
    }
}

2. Estrategia 'alíate con terceros' usando sus librerías megachachis. Usando cualquiera de las librerías 'client-side' AJAX que hay (DoJo pega fuerte), podemos evitarnos muchos males inherentes del lado cliente, además podremos hacer ventanitas y otras florituras propias de otros mundos (léase LAMP), y como no, también animaciones 'flashions'.

dojo.require("dojo.io.*");
dojo.io.bind({ url: 'response.txt',
	   handler: helloCallback
            });
function helloCallback(type, data, evt) {
if (type != 'error')
  Window.alert("Hello " + data);
}

3. Estrategia 'juega en casa' y programa los widgets en el lado-servidor. Recurriendo a un framework que en el lado servidor te permita hacer la vista, y tú sólo tengas que hacer algún que otro include para el html final se conseguirá mejorar los sosos controles legacy de HTML, reducirás el EcmaScript pero no te va a quitar de lidiar con AJAX. El framework escogido es...JSF, pudiéndose vitaminar con Dinamic Faces, entre otros.

<%@ taglib prefix="jsfExt" uri="http://java.sun.com/jsf/extensions/dynafaces" %>
<f:view>
    <h:commandButton value="Hello" action="#{msg.getHello}" 
   onclick="DynaFaces.fireAjaxTransaction(this); return false;"/>
</f:view>

4. Estrategia 'encúbrelo todo' y sigue sólo con JSP y JSF. Con otro framework cliente-servidor, jMaki, se logra ocultar el AJAX y el EcmaScript de nuestras jsp's manejando inteligentes tags jsp.

<h:form id="thisForm" onsubmit="return false;">
 <a:ajax id="cb1" name="dojo.combobox" 
     service="ComboBoxBean-names.ajax" 
     value="#{ComboBoxBean.names}"/>
 <input type="button" value="Hello" 
  onclick="alert(jmaki.attributes.get('thisForm:cb1').getValue()); return false;" />
</h:form>

5. Estrategia 'pegar voces al servidor' invocando desde lejos. La aproximación de Direct Web Remoting, permite hacer llamadas RPC, o sea invocaciones remotas de métodos, a los objetos Java desde el EcmaScript y obtener y procesar el resultado en el propio navegador.

onLoad = function() {
  jsonrpc = new JSONRpcClient("/webapp/JSON-RPC");
  // Call a Java method on the server
  var sMsg = jsonrpc.myTestObject.myFunction("hello");
  Window.alert("Hello " + sMsg);
}

6. Estrategia 100% Java de Google. Se basa en utilizar el framework Google Web Toolkit (GWT) que usa un código 'espejo' en java con correspondencia con el EcmaScript, y donde lo único que vemos es Java.

   public class Hello implements EntryPoint {
     public void onModuleLoad() {
       Button b = new Button("Click me", new ClickListener() {
         public void onClick(Widget sender) {
           Window.alert("Hello, AJAX");
         }
       });
       RootPanel.get().add(b);
     }
   }

Revisando los pros y los contras, se puede ver que de conocer EcmaScript, aunque sólo sea mínimamente, no nos libra nadie. Pero a mí ya me está bien.
Larga vida al EcmaScript!..
Posted by Feliciano Borrego in Java at 20061026 Comentarios[1]