[TUTORIAL] Componente List

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.

Código:

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

Código:

//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().

Código:

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.

Código:

//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.

Código:

favsGroup.addEventListener("click", alClicar);

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

Código:

//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.

BY Elecash

------------------------------------------------------------

Perdon (otra vez xD) por el encoding

	Bienvenido(a), Visitante. Favor de ingresar o registrarse. ¿Perdiste tu email de activación? - Diciembre 02, 2008, 12:09:59