Comunidad de diseño web y desarrollo en internet

Tutorial del componente Tree de Flash

Gracias a este componente podremos hacer árboles desplegables como por ejemplo el que nosotros haremos, un típico listado de favoritos. Para este tutorial tendrás que tener el siguiente XML y llamarlo Tree.xml:
<?xml version="1.0"?>
<nodo label = "Blogs" >
<nodo label = "ASFusion" dirurl="http://www.asfusion.com/blog/index.cfm?setlan=es" />
<nodo label = "After-hours" dirurl="http://www.e-tonilopez.com/after-hours/" />
<nodo label = "Carlos Roviar" dirurl="http://www.carlosrovira.com/" />
<nodo label = "design-nation" dirurl="http://www.design-nation.net" />
<nodo label = "Esto es el blog" dirurl="http://www.elecash.org/blog" />
<nodo label = "Funciton">
<nodo label = "Español" dirurl="http://blog.funciton.com/es/index.php" />
<nodo label = "English" dirurl="http://blog.funciton.com/en/index.php" />
</nodo>
<nodo label = "Innocuo" dirurl="http://blog.innocuo.com/index.php" />
<nodo label = "Oscar Trelles">
<nodo label = "Español" dirurl="http://www.oscartrelles.com/es/" />
<nodo label = "English" dirurl="http://www.oscartrelles.com/blog/" />
</nodo>
</nodo>
<nodo label = "Flash">
<nodo label = "CristaLab">
<nodo label = "Pagina" dirurl="http://www.cristalab.com/" />
<nodo label = "Foros" dirurl="http://www.cristalab.com/foros" />
<nodo label = "Web Comic" dirurl="http://www.cristalab.com/comic.php" />
</nodo>
<nodo label = "ElecAsh" dirurl="http://www.elecash.org" />
<nodo label = "Flash Kit" dirurl="http://www.flashkit.com" />
<nodo label = "FlashLA">
<nodo label = "Pagina" dirurl="http://www.flashla.com" />
<nodo label = "Foros" dirurl="http://www.flashla.com/forums" />
</nodo>
<nodo label = "Sub-Flash">
<nodo label = "Pagina" dirurl="http://www.subflash.com" />
<nodo label = "Foros" dirurl="http://www.subflash.com/foro" />
</nodo>
<nodo label = "We are here" dirurl="http://www.were-here.com/" />
</nodo>
<nodo label = "Otras cosas" >
<nodo label = "----N-A-I-L-S----" dirurl="http://www.hoogerbrugge.net" />
<nodo label = "KartOO" dirurl="http://www.kartoo.com/" />
<nodo label = "Lorem Ipsum" dirurl="http://lipsum.com/" />
<nodo label = "RobotUA" dirurl="http://www.robotua.com/" />
</nodo>
No olvidéis que todos nuestros XML se tienen que guardar como UTF-8, podéis hacerlo con el Bloc de Notas. Bien, una vez creado y guardado vuestro XML, podemos proceder a hacer la carga.
//Cargamos el XML
xmlTree = new XML();
xmlTree.ignoreWhite = true;
xmlTree.onLoad = function(success) {
if (success) {
llenarTree();
} else {
trace("No se pudo cargar el XML");
}
};
xmlTree.load("Tree.xml");
Tal y como está montado nuestro XML, solamente tenemos que asignar nuestro objeto "xmlTree" para que el componente Tree se monte solo. Veamos como seguiría el código de la función llenarTree().
function llenarTree() {
//Atacheamos el componente
attachMovie("Tree", "miArbol", 1);
//Propiedades
miArbol.setSize(200, 300);
miArbol.setStyle("openEasing", mx.transitions.easing.Back.easeOut);
//Llenamos el menu
miArbol.dataProvider = xmlTree;
//Eventos
miArbol.addEventListener("change", alSeleccionar);
}

Como cosas nuevas podemos apreciar una propiedad del setStyle nueva, que anteriormente no habíamos visto. Se trata de openEasing, y sirve para abrir los menus con efectos de deslizamiento, estos efectos los podemos coger directamente de las clases que utiliza Flash para realizar las transiciones. Poniendo al final easeOut, easeIn, o easeInOut, tendremos un efecto diferente.

Ahora mismo, si probamos esto veremos que nos ha creado las carpetas, pero no se abren, para ello tendremos que utilizar el evento "change", el cual ya hemos creado en la función, pero nos falta crear el listener.

alSeleccionar = new Object();
alSeleccionar.change = function(evento) {
var seleccion = evento.target.selectedNode;
//Si es una carpeta...
if (miArbol.getIsBranch(seleccion)){
//La cerramos si esta abierta
if (miArbol.getIsOpen(seleccion)){
miArbol.setIsOpen(seleccion, false, true);
}
//La abrimos si esta cerrada
else{
miArbol.setIsOpen(seleccion, true, true);
}
}
//Si es un vínculo...
else{
getURL(seleccion.attributes.dirurl, "_blank");
}
}

Para empezar creamos una variable llamada "seleccion" a la cual le asignamos que nodo hemos seleccionado. Luego creamos unos if-else para comprobar si el nodo seleccionado es una carpeta. Gracias a getIsBranch(), podemos saber si el nodo seleccionado es (true) o no (false) una carpeta, o nodo que alberga nodos.

En caso de que getIsBranch devuelva true, significara que hay una carpeta, entonces, lo que tenemos que hacer es abrirla o cerrarla, teniendo en cuenta que si getIsOpen() devuelve true, es que está abierta, y entonces tenemos que cerrarla, y lo mismo pero al revés.

Para abrir y cerrar las carpetas utilizamos setIsOpen(), al cual le pasamos tres parámetros. El nodo a cerrar, si queremos abrir (true) o cerrar (false) y si queremos hacerlo con un movimiento deslizante (true) o no (false).

Con este primer if tendremos programado cuando son carpetas, y luego con el else, solo tendremos que hacer un getURL que nos envíe al contenido del atributo dirurl, para tener programado cuando son vinculos normales.

¿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