April 24th, 2012
Redescubriendo Dojo (sin mucha alegría)
En estas últimas semanas ha habido muchos cambios, excepto en la publicación de notas en mi blog 😀
Ya migramos de vuelta a Cuernavaca, y la estamos pasando muy bien :D, si fue un show, y va a seguir siendolo por un rato, el migrar en medio del ciclo escolar, y todo eso, pero la familia entera quería este cambio.
Entre las cosas nuevas de mi nuevo trabajo (en el CIE) está el ayudar a quien solicite ayuda en cuestiones de “cómputo”, y recientemente me preguntaron cómo hacer un script que haga una consulta asíncrona para determinar si un proceso ejecutado en “background” ya finalizó para posteriormente cargar la página de resultados.
La parte platicada fue fácil, todavía me acuerdo de los trucos de dojo, aunque y hace exactamente 2 años que no lo uso para nada.
Los conceptos son los mismos todavía, hay que ejecutar los siguientes pasos:
- hacer una consúlta asíncrona (AJAX)
- determinar por las respuesta si ya es posible o no ir a la página de resultados
- meter eso en un ciclo que mande la consulta cada X cantidad de tiempo
Para ello me puse a escribir un PoC que hiciera casi todo eso, lo que me falta es un “if” que discierna entre las respuestas posibles para hacer lo correcto, pero eso no tiene ciencia, realmente el chiste está en la consulta asíncrona que se ejecuta cada cierto tiempo.
al final quedó de esta manera:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<script>
dojoConfig= {
has: {
"dojo-firebug": true
},
parseOnLoad: false,
foo: "bar",
async: true
};
</script>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dojox/timing", "dojo/_base/xhr", "dojo/dom", "dojo/domReady!"], function(timing, xhr, dom){
function setText(){
// Execute a HTTP GET request
xhr.get({
handleAs: "text",
// The URL to request
url: "get-date.php",
// The method that handles the request's successful result
// Handle the response any way you'd like!
load: function(result) {
//alert("The message is: " + result);
dom.byId("somediv").innerText=result;
}
});
}
var t = new dojox.timing.Timer(10000);
t.onTick = function(){
console.info("Ten seconds elapsed");
// Call the asynchronous function
setText();
};
// start the timer
t.start();
});
</script>
</head>
<body>
<h1 id="test">test: <a href="#" id="somelink">click here</a></h1>
<div id="somediv">default</div>
</body>
</html>
Ahora, para llegar a esto me tomó como 4 horas en total, en gran medida por los cambios tan radicales que han hecho en la sintaxis de Dojo en la versión 1.7, ahora hay algo llamado AMD( asynchronous module definition ) que modifica mucho la forma en la que se cargan los módulos, y no es totalmente intuitiva la forma en la que se hace todo, estuve un buen rato experimentando con formas de cargar todo lo necesario, hasta que terminé con lo que se ve arriba, que se ejecuta automáticamente con el “dojo/domReady!”, creando el timer que ejecuta una función que hace la llamada asíncrona y actualiza un div con la respuesta.
A partir de ahí, todo debería ser miel y dulzura…
Es todo por el momento, ahi se ven
P.D. El get-date.php solo tiene 2 lineas:
<?php
echo date("D, d M Y H:i:s");