Comunidad de diseño web y desarrollo en internet online

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

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