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>
//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");
/************* 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);
//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);
};
//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");
};
//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);
};
//Eventos
miDesplegable.addEventListener("scroll", alScrollear);
//Listener para cuando se usa el scroll
alScrollear = new Object();
alScrollear.scroll = function(evento) {
trace("Estas usando el scroll!");
};
¿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.
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?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate