Tutorial del componente List de Flash

Para este componente crearemos un XML con un listado de Blogs y Paginas que haran las funciones de un listado de favoritos, y combinado con una serie de RadioButtons podremos escoger que categoría de los favoritos queremos ver. Este será el XML que usaremos para los favoritos, no los ordeneis, ya nos encargaremos de eso luego con la API del dataProvider.

<direcURLs>
	<dia texto='Esto es el Blog' direcURL='http://www.elecash.org/blog' tipo='blog'/>
	<dia texto='Elecash.org' direcURL='http://www.elecash.org' tipo='web'/>
	<dia texto='Cristalab.com' direcURL='http://www.cristalab.com' tipo='web'/>
	<dia texto='After-hours' direcURL='http://www.after-hours.org' tipo='blog'/>
	<dia texto='KLR20mg' direcURL='http://klr20mg.com' tipo='blog'/>
	<dia texto='FlashLA' direcURL='http://www.flashla.com' tipo='web'/>
	<dia texto='Carlos Rovira' direcURL='http://www.carlosrovira.com' tipo='blog'/>
	<dia texto='Design Nation' direcURL='http://www.design-nation.net/es' tipo='blog'/>
	<dia texto='RobotUA' direcURL='http://www.robotua.com' tipo='blog'/>
	<dia texto='NoMaster' direcURL='http://www.nomaster.com' tipo='web'/>
	<dia texto='SubFlash' direcURL='http://www.subflash.com' tipo='web'/>
	<dia texto='ActionScript' direcURL='http://www.actionscript.org' tipo='web'/>
	<dia texto='Flash Kit' direcURL='http://www.flashkit.com' tipo='web'/>
	<dia texto='We are Here' direcURL='http://www.were-here.com' tipo='web'/>
	<dia texto='Funciton' direcURL='http://blog.funciton.com/es' tipo='blog'/>
	<dia texto='Oscar Trelles' direcURL='http://www.oscartrelles.com/es' tipo='blog'/>
	<dia texto='INNOCUO' direcURL='http://blog.innocuo.com' tipo='blog'/>
	<dia texto='Flash Guru' direcURL='http://www.flashguru.co.uk' tipo='web'/>
	<dia texto='Kirupa' direcURL='http://www.kirupa.com' tipo='web'/>
</direcURLs>

Ahora con el código de siempre cargaremos el XML...

//Cargamos el XML
favoritos = new XML();
favoritos.ignoreWhite = true;
favoritos.onLoad = function(success) {
	if (success) {
		//Creamos los arrays donde iran los datos
		largo = favoritos.firstChild.childnodos.length;
		textos = new Array(largo);
		urls = new Array(largo);
		tipo = new Array(largo);
		//Llenar los arrays
		for (i=0; i<largo; i++) {
			textos[i] = favoritos.firstChild.childNodes[i].attributes.texto;
			urls[i] = favoritos.firstChild.childNodes[i].attributes.direcURL;
			tipo[i] = favoritos.firstChild.childNodes[i].attributes.tipo;
		}
		llenarList();
	} else {
		trace("No se pudo cargar el XML");
	}
};
favoritos.load("List.xml");

Como en los anteriores ejemplos hemos creado arrays para llenar nuestro dataProvider, y así crearnos unos "shortcuts" para que sea mas legible y accesible el código. Vamos a llenar nuestro array con la función llenarList().

function llenarList() {
	//Atacheamos el componente
	attachMovie("List", "miLista", 1);
	//Propiedades
	miLista.setSize(200, 300);
	miLista.selectable = true;
	miLista.multipleSelection = false;
	miLista.hScrollPolicy = "auto";
	miLista.vScrollPolicy = "on";
	miLista.rowHeight = 18;
	//Le asignamos un proveedor de datos
	losDatos = new Array();
	miLista.dataProvider = losDatos;
	//Metemos los datos en el dataProvider
	for (i=0; i<textos.length; i++) {
		losDatos.addItem({label:textos[i], data:urls[i]});
	}
	//Ordenamos el dataProvider
	losDatos.sortItemsBy("label", "ASC");
	//Eventos
	miLista.addEventListener("change", alSeleccionar);
}

Como todos los componentes le hemos puesto unas cuantas propiedades para personalizarlo a nuestro gusto. Luego hemos asignado un proveedor de datos y lo hemos llenado, usando "label" para el texto que se mostrará y "data" para los datos que contendrá ese texto. Por último lo hemos ordenado con uno de los métodos de la API dataProvider, que es sortItemsBy(), ordenando los registros por el campo "label" en ordena ascendente ("ASC"), podemos ordenar también en orden descedente con "DESC".

Al final del todo hemos creado el evento de "miLista", veamos el listener a ver como es.

//Listener para cuando seleccionamos una opción
alSeleccionar = new Object();
alSeleccionar.change = function(evento) {
	getURL(losDatos.getItemAt(miLista.selectedIndex).data, "_blank");
};

Cuando clicamos en cualquier texto, lo que hacemos es un "getURL" a la dirección que tenemos almacenada en la selección. En este caso en concreto, también estamos usando otra vez un método de la API dataProvider, getItemAt(), que nos servirá para coger los datos que hay en el registro seleccionado (miLista.selectedIndex). Arriba hemos guardado en el "data" las direcciones URL, así haciendo getItemAt().data, accedemos a estas.

Ahora lo que haremos será añadir en nuestro lienzo los RadioButton, para seleccionar que es lo que queremos ver. Pon tres componentes RadioButton y llámalos como nombre de instancia, webs_radio, blogs_radio y todos_radio. En el nombre de grupo ponles de nombre a todos favsGroup, y en los campos "label", ponles "Webs", "Blogs" y "Todos" respectivamente. Te debería quedar algo así.

Ahora añade en eventos, esta línea de código para los eventos de selección de este grupo de botones.

favsGroup.addEventListener("click", alClicar);

Y por último, el listener para cuando clicamos en cualquiera de los RadioButton.

//Listener para seleccionar lo que queremos ver
alClicar = new Object();
alClicar.click = function(evento){
	//Si clicamos en WEBS
	if (evento.target.selection == webs_radio){
		//Borramos lo anterior
		losDatos.removeAll();
		//Metemos los datos en el dataProvider, SOLO LAS WEBS
		for (i=0; i<textos.length; i++){
			if (tipo[i] == "web"){
				losDatos.addItem({ label: textos[i], data: urls[i] });
			}
		}
		//Ordenamos el dataProvider
		losDatos.sortItemsBy("label", "ASC");
	}
	//Si clicamos en BLOGS
	else if (evento.target.selection == blogs_radio){
		//Borramos lo anterior
		losDatos.removeAll();
		//Metemos los datos en el dataProvider, SOLO LOS BLOGS
		for (i=0; i<textos.length; i++){
			if (tipo[i] == "blog"){
				losDatos.addItem({ label: textos[i], data: urls[i] });
			}
		}
		//Ordenamos el dataProvider
		losDatos.sortItemsBy("label", "ASC");
	}
	//Si clicamos en TODOS
	else if (evento.target.selection == todos_radio){
		//Borramos lo anterior
		losDatos.removeAll();
		//Metemos TODOS los datos en el dataProvider
		for (i=0; i<textos.length; i++){
			losDatos.addItem({ label: textos[i], data: urls[i] });
		}
		//Ordenamos el dataProvider
		losDatos.sortItemsBy("label", "ASC");
	}
}

Cada vez que clicamos en uno de los botones del grupo, miramos cual ha sido el botón clicado y hacemos unas cosas u otras. Básicamente en todos lo que hacemos es, eliminamos todo lo que hay, mediante otro método de la API del dataProvider, que es removeAll(), y luego volvemos a llenar el dataProvider con lo que nos interesa, si queremos solo las webs, o solo los blogs, o lo queremos todo.

Como volvemos a llenar el dataProvider, es necesario volverlo a ordenar, de ahí a que al final de cada if-else pongamos el sortItemsBy(), porque si no nos aparecerian los datos desordenados.

¿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

Tutorial del componente List de Flash

Publica tu comentario

o puedes...