El Davo: Introducción a DOJO

DOJO es un paquete de librerías de JavaScript, que nos ayudan a que el desarrollo de aplicaciones web dinámicas sea más sencillo. DOJO nos provee una serie de componentes para formularios, componentes para facilitar el intercambio de datos, manipular DOM y algunos efectos que si los desarrolláramos con JavaScript sería un poco tedioso, a demás "para que reinventar la rueda".

Esta entrada solo pretende ser una breve introducción a DOJO, como instalarlo, comenzar a usarlo y donde conseguir más información.

Manos a la obra:

¿Donde puedo conseguir las librerías de DOJO?
Las versiones más recientes de DOJO se pueden conseguir en DOJOToolKit. La versión más reciente al momento de escribir esto es la 1.6

Ya tengo las librerías de DOJO pero ¿en que consiste DOJO?
La arquitectura de DOJO es fácil de entender. DOJO consiste en tres paquetes principales:

dojo: Se encuentra la BASE de DOJO, o mejor conocido como el kernel.
dijit: Se encuentran los componentes o widgedts estables que podemos utilizar
dojox: Se encuentran componentes extras o extensiones a DOJO.

NOTA: Los componentes en dojox aun no son 100% estables, se podría decir que pueden ser utilizados bajo tu propia responsabilidad.

Fig. Arquitectura de DOJO

¿Y ahora como inicio?

Primero hay que comenzar incluyendo las librerías de DOJO en tu applicación, a esto se le conoce como bootstrapping.

Existen dos maneras de incluir DOJO en tus proyectos:

A través del servicio en la nube habilitando las librerías con la siguiente linea:

Pero como descargamos las librerías y las tenemos dentro de nuestro proyecto hay que incluirlas de similar manera a la anterior. Tenemos que hacer referencia a el archivo con nombre dojo.js que se enceuntra dentro del paquete de dojo. sería de la siguiente manera

Una ves que cargamos la base de DOJO, solo falta indicar que componentes o mejor dicho módulos de DOJO queremos utilizar, para configurar esto debe de ser en un bloque </script> como el que se muestra a continuación:

<script type="text/javascript">
// Agregamos el modulo para efectos
dojo.require("dojo.fx");
</script>

Como se puede observar utilizamos una función de DOJO, dojo.require() y como parametro le pasamos el paquete que queremos utilizar en forma de cadena, en este caso dojo.fx. Y ahora si esta todo listo para utilizar este paquete. Aqui les dejo un ejemplo muy sencillo de como utilizar DOJO el ejemplo completo esta aquí

<html>

<head>

    <meta charset="utf-8">

    <title>Tutorial: Hello Dojo!</title>

    <!-- load Dojo -->

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>

    <script>

        // New: Require in the dojo.fx module

dojo.require("dojo.fx");
// Remember, dojo.ready waits for both the DOM and all dependencies
dojo.ready(function(){
    // The piece we had before - change our innerHTML
    dojo.byId("greeting").innerHTML += ", from " + dojo.version;
    // Now, slide the greeting
    dojo.fx.slideTo({
        top: 100,
        left: 200,
        node: dojo.byId("greeting")
    }).play();
});
    </script>

</head>

<body>

    <h1 id="greeting">Hello</h1>

</body>

</html>

Del código anterior podemos remarcar lo siguiente:

dojo.ready() : Funciona como un alias para la función dojo.addOnLoad(). Nos permite ejecutar una función cuando el modelo de DOM termine de cargarse.
dojo.byId() : Obtiene el elemento con el identificador especificado.

Para conocer más acerca de DOJO podemos remitirnos a:

DOJOToolkit y a DOJO Campus

Como les comente esto solo es una pequeña introducción, hay que resaltar que esta tecnología esta creciendo muy rápidamente y debemos estar al pendiente de sus actualizaciones.

1 comment:

kevin martinez, a new eagle said...: gracias por el articulo, me gusto la forma sencilla en que lo haz explicado, ojala puedas seguir haciendo estos post para profundizar más en el tema.

Personalmente uso jquery, pero deseaba ver que otras librerias para ajax habia

chao :D; August 21, 2011

3.23.2011

Introducción a DOJO

1 comment: