DOJO » Hola Mundo en DOJO
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
Artículos relacionados:
Febrero 6, 2007 #
y como lo veo en el navegador, lo guardo con .js? y le doy F12xq no me hace nada
Febrero 7, 2007 #
El último código es una página HTML. Lo puedes llamar MiDOJO.html. Voy a intentar poner un enlace al ejemplo para que se vea.
Junio 7, 2007 #
como se utiliza dojo
Julio 27, 2007 #
Como integro DOJO con los tags de JSF ?? Y como integro las librerias de DOJO en el eclipse ??
Agosto 29, 2007 #
dojo, me kago en dojo, esto es la poya, xo no veas los pokos manuales que hay y lo mal explikado q estan todos
aver si enkuentran alguno y ponen el link gracias
Febrero 26, 2008 #
Hola, probe tu ejemplo y… no me hace nada cuando presiono el boton, incluso descargue el toolkit por si llegaras a pensar que pudo ser eso, pero aun asi sigui sin funcionar, te agradeceria me ayudaras ya que quiero aprender mas acerca de esto, y si no es mucho molestar pues tambien un link a un buen tutorial, gracias.
Saludos
Marzo 5, 2008 #
ke tranza javo solo tienes ke poner la propiedad onclick=”Saludos();”
en el boton
Abril 23, 2008 #
hola quisiera saber como unir un form de struts con dojo
Junio 17, 2008 #
Recuerden que para usar DOJO deben tener las ultimas versiones de los browser IE 7 – Firefox 3.0
Octubre 8, 2008 #
hola con todos
estoy empezando a usar dojo 1.1.1 y la version 1.2 quisiera saber como hacer lo siguiente: tengo dos combox el primero de los paises y el segundo de sus respectivas ciudades me gustaria q al escoger cierto pais automaticamente el segundo combo de las cuidades se cambie y me muestre las ciudades respectivas del pais q se escogio en el primer combo
necesito cargar los dos combos con archivos json