Este ejercicio nos ayudara a comprender mejor el funcionamiento de Dojo 1.7, como incluir la librería y algunos parámetros de configuración.
Primero indicamos donde tenemos nuestro dojo:
src="js/dojo/dojo/dojo.js" Luego configuramos la cosa, resulta que en Dojo 1.7 hay una nueva tecnología mejorada que le llaman AMD (Definición de módulos asíncrona) que al parecer mejora la forma de incluir los módulos y el debug para los desarrolladores. Para indicarle a Dojo 1.7 que trabajaremos con AMD ponemos: data-dojo-config="async: true"
Incluimos los módulos para este ejemplo: dojo/dom", "dojo/fx", "dojo/domReady! Podemos notar que ahora no es dojo.dom sino dojo/dom y lo mismo con los demás. También podemos notar que hay un signo de "!" en dojo/domReady!, es porque estamos definiendo un plugin que en este caso hace que el contenido de la función no se ejecute hasta que el DOM este listo. Bueno todo esto es debido justamente al nuevo cambio. Lo demas es un ejemplo bien sencillo usando las características del DOM y algo de efectos (fx). El código completo:
Primero indicamos donde tenemos nuestro dojo:
src="js/dojo/dojo/dojo.js" Luego configuramos la cosa, resulta que en Dojo 1.7 hay una nueva tecnología mejorada que le llaman AMD (Definición de módulos asíncrona) que al parecer mejora la forma de incluir los módulos y el debug para los desarrolladores. Para indicarle a Dojo 1.7 que trabajaremos con AMD ponemos: data-dojo-config="async: true"
Incluimos los módulos para este ejemplo: dojo/dom", "dojo/fx", "dojo/domReady! Podemos notar que ahora no es dojo.dom sino dojo/dom y lo mismo con los demás. También podemos notar que hay un signo de "!" en dojo/domReady!, es porque estamos definiendo un plugin que en este caso hace que el contenido de la función no se ejecute hasta que el DOM este listo. Bueno todo esto es debido justamente al nuevo cambio. Lo demas es un ejemplo bien sencillo usando las características del DOM y algo de efectos (fx). El código completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Saludo con Dojo!</title>
<script src="js/dojo/dojo/dojo.js"
data-dojo-config="async: true"></script>
</head>
<body>
<h1 id="saludo">Hola Mundo</h1>
<script>
require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){
// Obtenemos el objeto
var saludo = dom.byId("saludo");
saludo.innerHTML += " con Dojo 1.7";
// Una animacion divertida !
fx.slideTo({
top: 200,
left: 400,
node: saludo
}).play();
});
</script>
</body>
</html>
Al ejecutarlo se debería ver un saludo que se mueve en la pantalla al cargar la pagina.
Gracias !
ResponderEliminar