DOJO es un toolkit open source DHTML (Dynamic HTML) escrito en JavaScript. Este toolkit se compone de un conjunto de librerias al estilo Java. Su idea es la de abstraer al desarrollador de las complejidades del DHTML y de las discrepancias existentes entre navegadores, que hacen que el código JavaScript a utilizar sea diferente.
Algunas de las características que tiene son:
- Maneja incompatibilidades entre navegadores
- Soporte AJAX
- Oculta el manejo del XMLHttpRequest
- Soporte de backward, forward y soporte de bookmarks.
- Sistema de eventos orientado a aspectos
- …
Lo primero que tenemos que hacer es descargarnos el toolkit DOJO. Esto es un fichero ZIP que deberemos de descomprimir en nuestro directorio de trabajo.
Los ficheros del toolkit DOJO lo descomprimiremos en /HolaMundo/js/dojo.
Nuestro ejemplo Hola Mundo en DOJO es una página web. Es por ello que crearemos un fichero HolaMundoDOJO.html con la estructura de un documento HTML.
<HTML> <HEAD><TITLE>Hola mundo con DOJO</TITLE></HEAD> <BODY> <H1>Hola mundo con DOJO</H1> </BODY> </HTML>
Dentro del documento HTML, la primera línea a incluir es la que carga el toolkit DOJO. Esto lo haremos con la siguiente línea de código:
<script type="text/javascript" src="js/dojo/dojo.js"></script>
La cual carga el fichero dojo.js.
Una vez que tenemos inicializado el toolkit DOJO podemos empezar a añadir elementos. La idea es poner un botón el cual al pulsarle nos salude con la famosa frase de «Hola Mundo».
Los componentes de DOJO están modelizados con Widgets. Y a estos widgets les podemos asociar eventos. Todos estos comportamientos están en las librerias dojo.widget y dojo.event. Es por ello que deberemos de instanciarlas. Esto lo conseguimos con el método requiere del objeto dojo.
dojo.require("dojo.widget.*");
dojo.require("dojo.event.*");
Si solo tuviesemos pensado utilizar el widget button podríamos haber importado directamente la librería dojo.widget.button.
Ahora añadiremos el widget a nuestra página. Para añadir un widget de tipo botón bastará con añadir la siguiente línea de código:
<button dojoType="Button" widgetId="botonSaludo">Hola Mundo!</button>
Esto hará que nuestra página muestre un botón. Pero dicho botón todavía no tiene comportamiento. El comportamiento se lo daremos asociandole un evento a dicho botón.
Los eventos son controlados por la librería dojo.event. Para asociar un evento a un botón deberemos de usar el método dojo.event.conect(widget, evento, funcion). Este método recibe tres parámetros:
- widget, es el widget al que queremos asociar el evento.
- evento, evento que queremos controlar.
- función, función javascript asociada al comportamiento del evento
El asociar el comportamiento al botón lo haremos de la siguiente forma:
var botonSaludo = dojo.widget.byId('botonSaludo');
dojo.event.connect(botonSaludo, 'onClick', 'saludo');
Como podemos apreciar en este código, lo primero que se hace es obtener la referencia sobre el widget a controlar. Esto se hace mediante el widgetId. En nuestro ejemplo «botonSaludo».
Este código hay que ejecutarlo al incializarse la página. A si que deberemos de ejecutarlo en el onLoad del documento. Quedándonos el código de la siguiente forma:
function init() {
var botonSaludo = dojo.widget.byId('botonSaludo');
dojo.event.connect(botonSaludo, 'onClick', 'saludo')
}
dojo.addOnLoad(init);
Una cosa que dejabamos de lado es que le hemos asociado al onClick la función saludo. Es por ello que tiene que existir dicha función en nuestro documento.
function saludo() {
alert('Hola Mundo!!!');
}
Todo el código nos quedaría de la siguiente forma:
<html>
<head><title>Hola Mundo</title>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
dojo.require("dojo.event.*");
function saludo() {
alert('Hola Mundo!!!');
}
function init() {
var botonSaludo = dojo.widget.byId('botonSaludo');
dojo.event.connect(botonSaludo, 'onClick', 'saludo')
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<button dojoType="Button" widgetId="botonSaludo">Hola Mundo!</button>
</body>
</html>
Podéis encontrar más información, en ingles, en: http://dojo.jot.com/WikiHome/HelloWorld