Componente ComboBox

En este ejercicio aprenderemos a usar el componente ComboBox que viene incluido en Flash. Este componente nos permite mostrar una lista de opciones, de la cual el usuario podrá seleccionar solamente una opción.

Para este ejemplo usaremos Flash 8. El resultado final y el archivo para descargar los encontrarás al final de este post.

Un ComboBox pertenece a la clase mx.controls.ComboBox de ActionScript.

Tutorial

1. Crea un nuevo documento de Flash de 340 x 415 pixeles.

2. A la única capa que existe ponle de nombre Forma. Coloca en el escenario un texto que diga “¿De que país nos visitas?” (sin las comillas).

3. Abre el Panel Componentes (Ctrl. + F7 o bien en el menú Window -> Components). Dentro de este panel encontrarás una sección llamada User Interface (Interfaz de usuario). Abre esa sección y selecciona el componente ComboBox.

4. Arrastra al escenario cinco de estos componentes. Por el momento no importa cómo los coloques en el escenario, más adelante pondré una imagen de cómo de quedar aproximadamente.  Además, arrastra al escenario una instancia del componente Button.

5. Al botón cámbiale su propiedad label por Aceptar. Asígnale el nombre de instancia aceptar_btn.

6. A cada uno de los combos ponles los siguientes nombres de instancia (empezando por el combo que se encuentre más arriba y terminando por el que esté más abajo):

• cbo_paises0
• cbo_paises1
• cbo_paises2
• cbo_paises
• cbo_estados

En este ejemplo llenaremos cada uno de los combos por medio de ActionScript, por lo que no será necesario modificar las propiedades de estos combos que se encuentran en el panel Parámetros. Aún así, explicaremos qué es cada una de estas opciones:

• data: Son los valores que queremos que tome cada uno de los elementos de un combobox. Estos valores son almacenados en un arreglo. Un ejemplo claro podría ser cuando tienes una tabla países en tu base de datos. Por lo general esta tabla está formada por el nombre del país y un ID que hace referencia a su registro en la base datos. El ID de cada uno de estos registros lo podríamos poner en esta opción de data para que así podamos saber rápidamente el ID del país que el usuario seleccionó.
• editable: Si el valor de esta propiedad es true, entonces el usuario podrá escribir en él. En caso contrario si la propiedad tienen el valor de false, el combobox no será editable. Un combobox editable puede permitirle al usuario introducir un valor que no se encuentra dentro de la lista de opciones.
• labels: Se almacaenan en un arreglo y son las opciones que queremos que aparezca en el combobox. Siguiendo con nuestro ejemplo de los países y IDs, aquí irían cada uno de los nombres de los países.
• rowCount: Su valor es un número indicando la cantidad de renglones que queremos que se muestren de largo. Por ejemplo, si tenemos 8 opciones en el combo y en rowCount tenemos 6, entonces al abrir el combo se mostrarán los primeros seis y un scrollbar para ver los dos que faltan.

7. Acomoda tus componentes y agrega los textos necesarios para que tu documento quede similar a la siguiente imagen:

8. De la imagen anterior puedes darte una idea de qué haremos con cada combo.  En el primer combo mostraremos las opciones como las fuimos metiendo al arreglo. En el segundo combo las opciones aparecerán en orden alfabético de acuerdo a su propiedad etiqueta (label). En el tercer combo mostraremos las opciones en orden numérico de acuerdo al valor (value) de las opciones. Para este ejemplo, en las propiedades value de las opciones usamos números (simulando que fueran los IDs de los países en nuestra base de datos); sin embargo, podemos usar textos como valores. En el cuarto combo mostraremos los países ordenados alfabéticamente y habilitaremos el combo de Estado / Provincia cuando el usuario seleccione como país a México o Perú. Dicho lo anterior y una vez que tengas tu archivo de Flash igual a la imagen de arriba es momento de entrar en terreno pantanoso. Crea una nueva capa y ponle de nombre Acciones. A continuación explicaré el código paso a paso.

9. Primero vamos a crear cuatro arreglos donde almacenaremos las opciones de los combos de países y el combo de estado / provincia. Coloca el siguiente código en la capa de Acciones.

var paises:Array = new Array();
var paisesLabel:Array = new Array();
var paisesValue:Array = new Array();
var estados:Array = new Array();

10. Al inicio, el combo de Estado / Provincia deberá estar desactivado, por lo que debemos poner la siguiente línea de código:

cbo_estados.enabled = false;

11. El siguiente código muestra la función almacenaPaises, la cual se encargará de almacenar las etiquetas y los valores en un arreglo. A pesar de que en nuestro ejemplo se almacenan los datos de forma estática, hacerlo dinámicamente (extrayendo la información de una base de datos, ya sea por medio de un XML, usando AMFPHP, LoadVars, etc.) es muy fácil ya que bastará recorrer la información obtenida por medio de un ciclo for y añadirla al arreglo.

function almacenaPaises() {
	paises.push({label:"-- Selecciona --", 	data:0});
	paises.push({label:"México", 			data:15});
	paises.push({label:"Argentina", 		data:12});
	paises.push({label:"España", 			data:24});
	paises.push({label:"Venezuela", 		data:5});
	paises.push({label:"Colombia",		 	data:18});
	paises.push({label:"Perú",		 		data:10});
	paises.push({label:"Chile",		 		data:28});

	for(var i = 0; i < paises.length; i++) {
		paisesLabel.push({label:paises[i].label, data:paises[i].data});
		paisesValue.push({label:paises[i].label + " -- " + paises[i].data, data:paises[i].data});
	}
	paisesLabel.sortOn(["label", "data"]);
	paisesValue.sortOn("data", Array.NUMERIC);

	cbo_paises0.dataProvider = paises;
	cbo_paises1.dataProvider = paisesLabel;
	cbo_paises.dataProvider  = paisesLabel;
	cbo_paises2.dataProvider = paisesValue;
}

Analizando el código anterior te darás cuenta de que hicimos la inserción de los campos  para cada arreglo y NO se crearon los arreglos paisesLabel y paisesValue a partir del arreglo paises (es decir, de la forma paisesValue = paises y paisesLabel = paises). Esto se debe a que al hacer la asignación de la forma arregloA = arregloB el arregloB hace referencia a la localidad de memoria del arregloA, por lo tanto al modificar cualquiera de los dos arreglos (agregar/quitar/ordenar elementos, por ejemplo) estaríamos modificando la referencia de ambos (que es la misma) y claro que se estarían afectando los dos.

El método sortOn de un arreglo nos permite ordenarlo de acuerdo al criterio que señalemos. El primer parámetro de este método es el campo sobre el cual queremos ordenarlo (en nuestro caso es label o data). Para el caso del arreglo paisesLabel, estamos ordenando el arreglo primero por etiqueta (label) y después por su valor (data). En el caso del arreglo paisesValue, estamos ordenándolo por el valor de los registros (data). Como el valor de data es solamente numérico, debemos espercificarlo como segundo parámetro del método; ya que si no lo haces el programa primero mostrará los de valor 10 y después los de 5, por ejemplo.

Después de llenar los arreglos y ordenarlos conforme a nuestras necesidades, se los asignamos a los combos cbo_paises0, cbo_paises1, cbo_paises2 y cbo_paises por medio de la propiedad dataProvider.

12. Para poder anidar los combos de paises y Estado / Provincia debemos añadirle un listener al combo de paises. De esta forma, podremos detectar los eventos que se generan en un ComboBox. El evento que debemos detectar es el de change, el cual se produce cuando se cambia el valor del combobox cuando el usuario escoge una opción. El siguiente código añade el listener al combo cuyo nombre de instancia es cbo_paises (penúltimo combo).

cbo_paises.addEventListener("change", eventoComboBox);
function eventoComboBox(evento) {
	if(evento.target.selectedItem.data == 15 ||evento.target.selectedItem.data == 10)
		almacenaEstados(evento.target.selectedItem.data);
	else
		cbo_estados.enabled = false;
}

Observando el código encontrarás que la función eventoComboBox es llamada cuando se genera el evento; y que esta función recibe como parámetro la variable evento. De esta variable podemos conocer el objeto que lanzó el evento, por medio de la propiedad target (evento.target). Debido a que el target es el combobox cbo_paises podemos hacer uso de la propiedad selectedItem.data para conocer el valor de la opción seleccionada (toma nota de que también podrías usar selectedItem.label para conocer la etiqueta de la opción elegida). Debido a que necesitamos habilitar y llenar el combo de Estado / Provincia cuando el país elegido sea México o Perú, debemos verificar si el valor regresado por selectedItem.data es 15 (valor para México) ó 10 (valor para Perú). En caso de que se cumpla esta condición, llamaremos a la función almacenaEstados, que recibe como parámetro el valor del país elegido. El código de esta función es el siguiente:

function almacenaEstados(opc) {
	estados = new Array({label:"-- Selecciona --", data:0});
	if(opc == 15) {
		estados.push({label:"Aguascalientes", 	data:"AGS"});
		estados.push({label:"Nuevo León", 		data:"NL"});
		estados.push({label:"Yucatán", 			data:"YUC"});
		estados.push({label:"Jalisco", 			data:"JAL"});
		estados.push({label:"San Luis Potosí", 	data:"SLP"});
		estados.push({label:"Oaxaca", 			data:"Oaxaca"});
	}
	else {
		estados.push({label:"Huaraz", 			data:"HUA"});
		estados.push({label:"Casma", 			data:"CAS"});
		estados.push({label:"Ocros", 			data:"OCR"});
		estados.push({label:"Arequipa", 		data:"ARE"});
		estados.push({label:"Lucanas", 			data:"LUC"});
		estados.push({label:"Moho", 			data:"MOH"});
	}
	cbo_estados.dataProvider = estados.sortOn(["label"]);
	cbo_estados.addEventListener("load", estadosCargados);
	cbo_estados.enabled = true;
}

La primera línea de la función anterior es importante ya que estamos volviendo a llenar el arreglo estados; si no lo hiciéramos la segunda vez que entráramos a esta función  estaríamos añadiendo los datos al arreglo y por lo tanto aparecerían duplicados (si volvimos a seleccionar el mismo país) o bien revueltos los estados de México con las provincias de Perú.
Cuando la opción (variable opc) es igual a 15 (México), llenamos el combo con los estados de México; en caso contrario, llenamos el combo con las provincias de Perú. Vuelvo a señalar que dentro de esta función podríamos hacer una llamada a la base de datos para obtener los registros o bien la lectura de un XML.
Finalmente, después de llenar el arreglo se lo asignamos al combo cbo_estados. Además, le asignamos un listener del evento load (carga) para detectar cuando se terminen de cargar las opciones del ComboBox y así poner como seleccionado la primera opción del combo (cbo_estados.selectedIndex de la función estadosCargados). Posteriormente agregamos el código para habilitar el combo de estados (cbo_estados.enabled = true .

function estadosCargados() {
	cbo_estados.selectedIndex = 0;
}

El último código que falta por pegar es el del botón de Aceptar. Al hacer click en este botón verificamos que el usuario haya seleccionado algún país (del combo cbo_paises, o sea el penúltimo combo) y si no seleccionó alguno mostramos un mensaje de alerta. Si el usuario seleccionó los países de México o Perú, verificamos que haya seleccionado algún estado o provincia y si no fue así mostramos otro mensaje de alerta.

aceptar_btn.onRelease = function() {
	if(cbo_paises.selectedIndex == 0)
		Alert.show("Por favor selecciona un país", "Aviso");
	else if(cbo_paises.selectedItem.data == 15 || cbo_paises.selectedItem.data == 10) {
		if(cbo_estados.selectedIndex == 0)
			Alert.show("Por favor selecciona un estado", "Aviso");
	}
}

No olvides agregar la llamada a la función almacenaPaises para que se llenen los combos cuando se ejecute la película

almacenaPaises();

¿Mucho rollo y ya te perdiste? No te preocupes, aquí va el código completo:

import mx.controls.Alert;

var paises:Array = new Array();
var paisesLabel:Array = new Array();
var paisesValue:Array = new Array();
var estados:Array = new Array();

cbo_estados.enabled = false;

almacenaPaises();

cbo_paises.addEventListener("change", eventoComboBox);
function eventoComboBox(evento) {
	if(evento.target.selectedItem.data == 15 ||evento.target.selectedItem.data == 10)
		almacenaEstados(evento.target.selectedItem.data);
	else
		cbo_estados.enabled = false;
}

function almacenaPaises() {
	paises.push({label:"-- Selecciona --", 	data:0});
	paises.push({label:"México", 			data:15});
	paises.push({label:"Argentina", 		data:12});
	paises.push({label:"España", 			data:24});
	paises.push({label:"Venezuela", 		data:5});
	paises.push({label:"Colombia",		 	data:18});
	paises.push({label:"Perú",		 		data:10});
	paises.push({label:"Chile",		 		data:28});

	for(var i = 0; i < paises.length; i++) {
		paisesLabel.push({label:paises[i].label, data:paises[i].data});
		paisesValue.push({label:paises[i].label + " -- " + paises[i].data, data:paises[i].data});
	}
	paisesLabel.sortOn(["label", "data"]);
	paisesValue.sortOn("data", Array.NUMERIC);

	cbo_paises0.dataProvider = paises;
	cbo_paises1.dataProvider = paisesLabel;
	cbo_paises.dataProvider  = paisesLabel;
	cbo_paises2.dataProvider = paisesValue;
}
function almacenaEstados(opc) {
	estados = new Array({label:"-- Selecciona --", data:0});
	if(opc == 15) {
		estados.push({label:"Aguascalientes", 	data:"AGS"});
		estados.push({label:"Nuevo León", 		data:"NL"});
		estados.push({label:"Yucatán", 			data:"YUC"});
		estados.push({label:"Jalisco", 			data:"JAL"});
		estados.push({label:"San Luis Potosí", 	data:"SLP"});
		estados.push({label:"Oaxaca", 			data:"OAX"});
	}
	else {
		estados.push({label:"Huaraz", 			data:"HUA"});
		estados.push({label:"Casma", 			data:"CAS"});
		estados.push({label:"Ocros", 			data:"OCR"});
		estados.push({label:"Arequipa", 		data:"ARE"});
		estados.push({label:"Lucanas", 			data:"LUC"});
		estados.push({label:"Moho", 			data:"MOH"});
	}
	cbo_estados.dataProvider = estados.sortOn(["label"]);
	cbo_estados.addEventListener("load", estadosCargados);
	cbo_estados.enabled = true;
}

function estadosCargados() {
	cbo_estados.selectedIndex = 0;
}

aceptar_btn.onRelease = function() {
	if(cbo_paises.selectedIndex == 0)
		Alert.show("Por favor selecciona un país", "Aviso");
	else if(cbo_paises.selectedItem.data == 15 || cbo_paises.selectedItem.data == 10) {
		if(cbo_estados.selectedIndex == 0)
			Alert.show("Por favor selecciona un estado", "Aviso");
	}
}

Para ordenar los elementos de un ComboBox se pueden usar las funciones sortItems y sortItemsBy. Para este caso deberás tener, de todas formas, arreglos distintos para cada ComboBox.

Hemos llegado al final de este tutorial. Después de tanta explicación no olvides bajar los archivos y ver el archivo de ejemplo que está a continuación.