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:
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.
 