Hola Mundo en DOJO

01/Ene/2007 DOJO 25 Comentarios

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

25 comentarios en “Hola Mundo en DOJO”

Víctor Cuervo

JJPichonGM

naaa, no jala, disculpen amigos, si alguien gusta q les pase el ejemplo se los mando en un mail, solo pasen direccion, y al encargado de este post, si puede borrar lo q anterior mente escribi, estaria bien!! Gracias

Víctor Cuervo

JJPichonGM

aver por partes. PART1
Aki les dejo la respuesta amigos!!

dojo.require(“dojo.fx”);
dojo.ready(function(){
var alertButton = dojo.byId(“alertButton”);
dojo.connect(alertButton, “onclick”, function(evt){
dojo.publish(“alertUser”, [“Esta es una ALERTA!!”]);
});

Víctor Cuervo

JJPichonGM

mmm sale todo mocho XD

Víctor Cuervo

JJPichonGM

Aki les dejo la respuesta amigos!!

dojo.require(“dojo.fx”);
dojo.ready(function(){
var alertButton = dojo.byId(“alertButton”);
dojo.connect(alertButton, “onclick”, function(evt){
dojo.publish(“alertUser”, [“Esta es una ALERTA!!”]);
});
dojo.subscribe(“alertUser”, function(text){
alert(text);
});
});

Alerta para usuario

Víctor Cuervo

JJPichon

q paso con mi comentario??

Víctor Cuervo

Víctor Cuervo

@jose,

Gracias por el aviso. Ya está cambiado. Puedes decargarte el toolkit de DOJO desde
http://download.dojotoolkit.org/

Víctor Cuervo

jose

hola el lugar donde dice “descargarnos el toolkit DOJO. ” el link lleva a una pagina no encontrada, un error de tipo 404 porfa lo pueden revisar?

Víctor Cuervo

Lenadro

Hola, Saludos.
Alguien me puede facilitar un manual de Dojo Toolkin o una guía más clara.
evanportilla@gmail.com gracias

Víctor Cuervo

lineadecodigo

@Juan Ramon, @Julio M. Oliveira,

La verdad es que el ejemplo se ha quedado un poco anticuado. Me pongo manos a la obra y lo actualizo para que pueda funcionar.

Disculpad las molestias.

Víctor Cuervo

Julio M. Oliveira

Gente

Les recomiendo vayan a los cursos gratis de sun al respecto.

http://www.javapassion.com

Julio M. Oliveira

Víctor Cuervo

Juan Ramon

A mi tampoco me funciona el ejemplo. me da este error la consola de errores del navegador:

could not load ‘dojo.widget.*’; last tried’./widget/*.js’

Como si no encontrara la libreria. la linea de error que me da es el js de DOJO.js:

if(!ok&&!_4e){throw new Error(“Could not load ‘”+_4d+”‘; last tried ‘”+_50+”‘”);

Víctor Cuervo

lineadecodigo

@paco, la verdad que no conocía el artículo de roseindia.net.

La explicación de este artículo está basada en el manual de DOJO. Pero en ningún caso es una copia.

Víctor Cuervo

paco

esto tiene toda la pinta de copy/paste de http://www.roseindia.net/dojo/dojo-hello-world-example.shtml

Víctor Cuervo

Julio M. Oliviera

Tenes que combinarlo con JSON

Víctor Cuervo

yyo

Alguien ha conseguido que funcione este ejemplo?

Víctor Cuervo

Geova

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

Víctor Cuervo

Julio Oliveira

Recuerden que para usar DOJO deben tener las ultimas versiones de los browser IE 7 – Firefox 3.0

Víctor Cuervo

facu

hola quisiera saber como unir un form de struts con dojo

Víctor Cuervo

royo

ke tranza javo solo tienes ke poner la propiedad onclick=”Saludos();”
en el boton

Víctor Cuervo

javo

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

Víctor Cuervo

nesta

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

Víctor Cuervo

serlec

Como integro DOJO con los tags de JSF ?? Y como integro las librerias de DOJO en el eclipse ??

Víctor Cuervo

isabel

como se utiliza dojo

Víctor Cuervo

lineadecodigo

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.

Víctor Cuervo

tabita

y como lo veo en el navegador, lo guardo con .js? y le doy F12xq no me hace nada

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*