Usando el widget dojo ComboBox

Uno de los controles de interfaz que siempre he echado en falta en HTML ha sido el control ComboBox (o caja combinada), que une la funcionalidad de un campo de texto simple con una lista de elementos. El equipo de dojo ha desarrollado su equivalente usando javascript y el DOM y dándole funcionalidad AJAX. Además se han preocupado de que funcione en los principales navegadores (IE, Mozilla, KHTML/Safari y Opera).
A pesar de llevar ya un tiempo y disponer de una comunidad que va rápidamente en aumento, uno de los problemas del Toolkit Dojo es su carencia de buena documentación y ejemplos de uso. Ésta es la razón por la que me gustaría contribuir con este artículo a dar un ejemplo de uso real de este “widget”. En el ejemplo me voy a centrar exclusivamente en el lado cliente (XHTML + CSS + AJAX).

Durante el desarrollo de Casarus, estoy poniendo en práctica muchas de las novedades de la programación en lado cliente, ya que creo que contribuyen a mejorar la experiencia del usuario y ayudan a que consiga lo que quiere de forma más fácil y más rápida. En este caso, he usado el control ComboBox para ayudar en la introducción de la población en un formulario de búsqueda, de forma que una vez elegida la provincia, al ir escribiendo en el cuadro de la población se va autocompletando el nombre de la misma desde la lista de poblaciones de la provincia elegida. Una imagen vale más que mil palabras:

Dojo ComboBox

Lo que queremos conseguir es que cuando el usuario seleccione una provincia, el control comboBox se llene con las poblaciones de esa provincia, de forma que ayuden al usuario a autocompletar el nombre que busca.
Lo primero que tendríamos que tener es una base de datos donde se relaciona las poblaciones con su provincia correspondiente y un script que dada una provincia genere una respuesta JSON (es el único tipo de datos que acepta el dojo ComboBox por el momento). En nuestro caso ese script es http://www.casarus.es/ajax/poblaciones/json/29. Donde el 29 del final indica el código de la provincia elegida (en este caso Málaga). Esto generaría una salida como:

[
  ["Albaicin","24343"],
  ["Alcaucin","24344"],
  ["Alcorrin","24345"],
  ["Alfarnate","24346"],
  ["Alfarnatejo","24347"],
  ["Algarrobo","24348"],
  .
  .
  .
]

Como veis se trata de un array javascript que en cada posición contiene otro array con dos campos: el nombre que aparecerá en la lista, y el valor que tiene ese nombre para el sistema (seria el equivalente a lo que va entre las etiquetas “option” y lo que va dentro del “value” de la misma “option”).

Crear el control ComBoBox es bastante sencillo. Incluimos dojo:

<script type="text/javascript" src="public/js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require('dojo.widget.ComboBox');
</script>

Creamos el control en el lugar adecuado (dentro de nuestro form) como si se tratara de un control de tipo input normal:

<input dojoType="ComboBox"
  dataUrl="http://www.casarus.es/ajax/poblaciones/json/1" 
   style="width: 300px;" autoComplete="true" name="poblacion" id="comboPoblaciones" />

Esta sentencia, creará el control ComboBox y lo llenará con los valores obtenidos desde la dirección que hemos especificado en la propiedad “dataUrl” (las poblaciones de Ávila). Y automágicamente nuestro control ComboBox ya estará funcionando.

Lo siguiente es conseguir que cuando se cambie la provincia, el control combobox se actualice con las poblaciones de esta nueva provincia. Supongamos que la lista de provincias es:

<select name="provincia" id="provincia" onchange="actualizaPoblaciones (this.value);">
	<option value="1" selected>Alava</option>
	<option value="2">Albacete</option>
               .
               .
               .
<select>

Hemos capturado el evento “onchange” para que se llame a nuestra funcion javascript “actualizaPoblaciones” pasándole el valor de nuestra elección en la lista. El código de esta función sería:

function actualizaPoblaciones (prov)
{
	var url = 'http://www.casarus.es/ajax/poblaciones/json/' + prov;
        var combo = dojo.widget.byId('comboPoblaciones');
	dojo.io.bind({ 
			url: url, 
			load: function(type, data, evt) { 
				combo.dataProvider.setData(data)
			},
        		mimetype: "text/json"
    	});
}

En resumen, lo que hace la funcion es crear un evento AJAX que carga los datos de la nueva URL y se los pasa al ComboBox para que se actualice. Aquí se nos presenta un problema común a todas las aplicaciones AJAX que es el de las múltiples llamadas casi concurrentes, pero os dejo a vosotros el encontrar una solución.

Os dejo un ejemplo simple del uso del dojo ComboBox.

Otra interesante lista de ejemplos.

Publicado por

manuel

Me dedico al desarrollo de aplicaciones. Principalmente trabajo con XHTML, CSS, Javascript, XML, JSON, PHP, MySQL, Linux/MacOS X y Flash actionscript. Intento siempre trabajar con estándares y simplificar el desarrollo y las aplicaciones finales con el objetivo de orientarlas al usuario (que sean útiles y faciliten el trabajo).

22 comentarios sobre “Usando el widget dojo ComboBox”

  1. Muchas gracias por publicar el ejemplo… está muy claro, lo único que no me había dado cuenta, que luego descubrí, es que las listas del combo “child” son estáticas y no generadas por el server, sería más claro si pones un ZIP con los archivos que utilizas!

    Tengo algunas preguntas para hacerte:
    Estoy comenzando con DOJO para una WEB APP que tengo que hacer en mi trabajo, la haré sobre TOMCAT con MySQL como base de datos, me gustaría usar JSF en mis JSP, has trabajado con JSF + DOJO??
    Sabes si es posible mostrar una imagen de LOADING cuando estamos cargando alguna página o cuando hacemos submit de un form??

    Muchas gracias de antemano y ya me pasaré de nuevo por tu blog!

  2. Hola Amigo, lo que quisiera saber es como puedo manipular los valores que contiene el combobox, que metodos o propiedaes se utiliza.
    Gracias.

  3. Saludos me gustaria que alguien me dijera como puedo trabajar con el dojo.widget.SortableTable, es decir, ya yo lo tengo implementado pero no he conseguido documentacion que me hable de su uso como por Ej. poder sumar agrandar una celda especifica y en general quiero saber todo su potencial para poder utilizarlo en un 100%, agradezco me respondan al correo por favor…!! GRACIAS..!

  4. Hola Jose,

    la verdad es que existe muy poca documentación para ese widget. Sobre todo porque va a ser reemplazado por el FilteringTable. Yo no lo he usado ampliamente, sólo en un par de pruebas, por lo que no puedo decirte mucho más. Lo que si recuerdo es que tuve que estudiar el código javascript para averiguar cómo se hacían algunas cosas. Creo que lo mejor es que te apuntes a sus mailing lists (si dominas bien el inglés) y que te pases al nuevo widget filteringTable.

    Hola Huber,

    ¿algún ejemplo de lo que quieres conseguir?

  5. Hola, mi estimado amigo. Quisiera saber como puedo hacer para hacer que el dojocomobox aparezca con un valor por defecto. Tengo un formulario que contirene al combobox: lo que quiero es que al cargar el fomulario el combobox ya muestre un valor( si es una lista de paises, un pais, por ejemplo PERU).

    Gracias por tu atencion, a espero que sgas escribiendo acerca de dojo me parecio interesante tu articulo.

  6. Hola, estoy desarrollando un site y tengo una caja combo dojo con las Localidades de mi pais (arg). Cuando escribo se abre el despegable pero se amontona todo el texto y no se lee nada (como cuando la impresora no avanza y se imprime todo en un solo renglon).
    Tienes idea de por que puede suceder eso?? y alguna solucion??
    Muchisimas Gracias
    Bortol

  7. Gracias manuel, ya lo resolvimos. Era un problema con la hoja de estilos css. Sabes de algun tutorial de css para poder modificar las cajas combo de dojo. Ej: el tamaño de letra de los items que sugiere la caja combo Key Value ? Tambien necesitaria cambiar el color de fondo de unas solapas. ALguans cosas he podido retocar desde el css principal pero estas 2 no lo he logrado
    Mil gracias

  8. Me alegro de que lo solucionaras.

    En la carpeta src/widget/templates de dojo, tienes el html, imagenes y css que usa el framework para mostrar los distintos widgets. Simplemente tendrias que modificarlo. En este caso ComboBox.css.

    Otra cosa que puedes hacer es “extender” el widget y cambiar los valores de las variables templatePath y templateCssPath para que apunten a tu propio html/css.

    Algunos articulos que te pueden interesar:

    http://www.alexatnet.com/Blog/Index/2006-08-27/creating-new-dojo-widget

    http://dojotoolkit.org/fast_widget_authoring.html

    Saludos

  9. ola amigos nesesito su ayuda urgente
    pues el dojo combobox me manda un error

    could not load’dojo.widget.combobox’;last tried’_package_js’
    si alguien puede ayudarme lo nesesito hacer urgente para mi trabajo porque si no me botannnnnn

    diego_e_guerra@hotmail.com

  10. Hola! Como haga para cargar por medio de Ajax un control Dojo?. Cuando lo hago, me lo carga como un control normal, pierde la funcionalidad del Dojo. Tengo formularios que dependiendo de una accion ejecutada se debe cargar otra parte del form en la que tengo tambien controles Dojo. Example: dependiendo de la seleccion en un Dojo Combo, se cargue en una capa otro comboDojo o un datetextbox, pero los carga como simples controles html. Saludes y seria de mucha ayuda algune ejemplo de esos.

  11. Hola Edgar te he respondido en tu comentario anterior.

    una vez cargado el contenido Ajax, debes ejecutar el parser:
    dojo.parser.parse(dojo.byId(’idDelElementoQueContieneLosWidgets’));

  12. Hola Manuel, ahora tengo otro problema que me está matando. Tengo lo siguiente en php.

    fetchObject())
    {
    echo “tipo_mov).”‘>”.trim($registro->descripcion).””; }
    ?>

    pero cuando aplico.
    valorcombo=dojo.byId(‘cmbaporte’).value;
    alert(valorcombo)
    no me sale el tipo_mov sino que me muestra la descripcion. Y si le pongo
    valorcombo=dojo.byId(‘cmbaporte’).getValue(); me dice lo mismo. No he podido obener el value del combo (tipo_mov)

  13. codigo completo: no se porque lo otro llego en pedazos.

    fetchObject())
    {
    echo “tipo_mov).”‘>”.trim($registro->descripcion).””; }
    ?>

    gracias por tu ayuda.

  14. /* select id=”cmbaporte” name=”cmbaporte”dojoType=”dijit.form.FilteringSelect”>
    fetchObject())
    {
    echo “tipo_mov).”‘>”.trim($registro->descripcion).””; }
    ?>
    */

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *