Comunidad de diseño web y desarrollo en internet

Tutorial del componente ComboBox de Flash

En este ejemplo vamos a utilizar XML para implementar un componente ComboBox, así que para realizar este tutorial es necesario tener conocimiento del uso de XML, podéis leer un tutorial sobre su uso aquí.

Primero montaremos nuestro XML, y lo grabaremos con el nombre ComboBox.xml como UTF-8 para poder leerlo bien desde Flash. El XML tendrá el siguiente aspecto:

<fechas>
<dia tarea='Conceptualización' fecha='01/07/04' />
<dia tarea='Bases de datos' fecha='02/07/04' />
<dia tarea='Imagen' fecha='05/07/04' />
<dia tarea='Bocetos' fecha='06/07/04' />
<dia tarea='Programación HTML' fecha='07/07/04' />
<dia tarea='Programación PHP' fecha='08/07/04' />
<dia tarea='Programación Flash' fecha='09/07/04' />
<dia tarea='Acabados en JavaScript' fecha='12/07/04' />
<dia tarea='Presentación proyecto' fecha='13/07/04' />
<dia tarea='Retoques' fecha='14/07/04' />
<dia tarea='Salida a internet' fecha='15/07/04' />
</fechas>
Ahora pondremos el típico código para cargar nuestros XML's...
//Cargamos el XML
calendario = new XML();
calendario.ignoreWhite = true;
calendario.onLoad = function(success) {
if (success) {
//Creamos los arrays donde iran los datos
largo = calendario.firstChild.childNodes.length;
tareas = new Array(largo);
dias = new Array(largo);
//Llenar los arrays
for (i=0; i<largo; i++) {
tareas[i] = calendario.firstChild.childNodes[i].attributes.tarea;
dias[i] = calendario.firstChild.childNodes[i].attributes.fecha;
}
llenarCombo();
} else {
trace("No se pudo cargar el XML");
}
};
calendario.load("ComboBox.xml");
Una vez cargado el XML, usamos dos arrays para guardar los datos y trabajar desde estos, así nos es mucho más fácil acceder a la información. Cuando hemos llenado nuestros arrays procedemos a llenar el Combo con los datos...
/************* FUNCIONES ****************/
function llenarCombo() {
//Atacheamos nuetro componente
attachMovie("ComboBox", "miDesplegable", 1);
//Propiedades
miDesplegable.setSize(170, 22);
miDesplegable.dropdownWidth = 200;
//Le asignamos un proveedor de datos
losDatos = new Array();
miDesplegable.dataProvider = losDatos;
//Metemos los datos en el ComboBox
for (i=0; i<tareas.length; i++) {
losDatos.addItem({label:tareas[i], data:dias[i]});
}
}

Lo más importante en este paso, y practicamente en todo el tutorial, es el uso de dataProvider. Gracias a dataProvider, los cambios que hagamos sobre nuestro array "losDatos" se produciran tambien en el componente, de modo que si nosotros borramos algo en el array, se borra tambien de la lista. Esto comporta una gran ventaja, al poder trabajar nuestra lista como un array facilitando la accesibilidad a los datos de una manera considerable.

Veamos como podríamos añadir datos a nuestro ComboBox mediante otros componentes. Pon en tu escena (seré benevolente y no te los haré atachear y posicionar) dos componentes TextInput y llamalos "tareas_input" y "dias_input", luego arrastra un componente Button a tu escena y llamalo "anadir_button".

Al final de la función llenarCombo(), crearemos los eventos para el botón...

anadir_button.addEventListener("click", alClickar);
...y fuera de la función pondremos su listener...
//Listener para cuando apretamos el boton anadir_button
alClickar = new Object();
alClickar.click = function(evento) {
losDatos.addItem({label:tareas_input.text, data:dias_input.text});
};

Si lo probáis ahora, veréis como al final de vuestro ComboBox se ha añadido la nueva entrada, y eso sólo tocando el array "losDatos", ya que es el que proporciona información a nuestro componente... de ahí el nombre de dataProvider ("proveedor de datos").

Veamos como son los diferentes eventos para el ComboBox. Todos los eventos los añadiremos encima del evento del boton "anadir_button" (al final de la función llenarCombo()), y los listeners para esos eventos irán fuera de la función, al final de todo el código. Empecemos por los más importantes:

//Eventos
miDesplegable.addEventListener("change", alSeleccionar);
//Listeners para cuando seleccionamos alguna opcion
alSeleccionar = new Object();
alSeleccionar.change = function(evento) {
trace("Has seleccionado "+evento.target.value);
};
Con "change" sabemos cuando se ha seleccionado algo en nuestro ComboBox, así podemos mostrar el datos escogido con "evento.target.value", que en este caso será la fecha de la tarea seleccionada. Value nos dirá que es lo que hay seleccionado en este momento en nuestro ComboBox.
//Eventos
miDesplegable.addEventListener("open", alAbrir);
miDesplegable.addEventListener("close", alCerrar);
//Listeners para cuando se abre el combo
alAbrir = new Object();
alAbrir.open = function(evento) {
trace("Has abierto el combo");
};
//Listeners para cuando se cierra el combo
alCerrar = new Object();
alCerrar.close = function(evento) {
trace("Has cerrado el combo");
};
Como resulta obvio, "open" y "close" los utilizaremos para saber cuando han abierto o cerrado el ComboBox. Lo cierto, es que estos eventos estan puestos por que son programables, porque realmente muy útiles no son, como ya veremos más adelante, hay algunos eventos que se utilizaran en contadas ocasiones.
//Eventos
miDesplegable.addEventListener("itemRollOut", alSubir);
miDesplegable.addEventListener("itemRollOver", alBajar);
//Listeners para cuando nos posicionamos encima de una opcion
alBajar = new Object();
alBajar.itemRollOver = function(evento) {
trace("Estas encima de "+miDesplegable.getItemAt(evento.index).label);
};
//Listeners para cuando nos posicionamos fuera de una opcion
alSubir = new Object();
alSubir.itemRollOut = function(evento) {
trace("Has salido de "+miDesplegable.getItemAt(evento.index).label);
};
Estos dos eventos se activan cuando nos posicionamos o salimos de las opciones del ComboBox, pueden llegar a ser útiles para saber por que opciones esta pasando el usuario, o de cuales ha salido, pero... no es que se utilicen demasiado creo yo. Sí que es interesante saber usar el método getItemAt(), con el cual podemos saber que valor hay en la posición actual del ComboBox.
//Eventos
miDesplegable.addEventListener("scroll", alScrollear);
//Listener para cuando se usa el scroll
alScrollear = new Object();
alScrollear.scroll = function(evento) {
trace("Estas usando el scroll!");
};
Por último, con este evento podemos saber cuando se esta usando la barra de desplazamiento.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate