Ejercicio: Links Tree (Flash to Flex)

Ahora que me estoy formando y aprendiendo las curiosidades de Flex, me dio ayer por pasar, como ejercicio, mi links tree de Flash a MXML.

Mi linkstree de Flash a Flex

El resultado es exactamente el mismo, con toda la funcionalidad de la versión Flash. Para ello he separado la vista(MXML) del controlador(AS) en dos ficheros.

Podeis descargar el zip con todos los ficheros incluidos los gráficos:

El archivo MXML, es el siguiente (linkstree.mxml):

< ?xml version="1.0" encoding="utf-8"?>

Tree {
fontFamily: "Trebuchet MS";
fontSize: 10pt;
color: "0x0052A4";
borderStyle: none;
backgroundColor:"0xE7EEF4";
openEasing: "mx.transitions.easing.Back.easeInOut";
selectionColor: "0xffffff";
rollOverColor: "0xF2F6F9";
disclosureOpenIcon: "Dummy";
disclosureClosedIcon: "Dummy";
}

dataProvider="{xmlLinks}"
change="changeEvt(event)"
nodeOpen="nodeOpen(event)"
nodeClose="nodeClose(event)"
itemRollOver="itemRollOver(event)"
itemRollOut="itemRollOut(event)"
iconFunction="myIconFunction"
/>

El archivo donde está la lógica del controlador es el siguiente (linkstree.as):

var so:Object;
var openedNodes:Object;

// --- Inicio de la aplicacion
function initApp() {
so=SharedObject.getLocal("links_tree");

if (so == null) {
mx.controls.Alert.show("No puedo crear el SharedObject", "Error");
} else {
openedNodes = so.data.openedNodes;
if (openedNodes == undefined)
openedNodes = {};
else
openSavedNodes();
}
}

// --- Iconos embebidos (graficos gif)
[Embed("ksmilebig.gif")]
var amigosrune:String;
[Embed("flashrune.gif")]
var flashesrune:String;
[Embed("flashruneEN.gif")]
var flashenrune:String;
[Embed("fremotingrune.gif")]
var fremotingrune:String;
[Embed("flexrune.gif")]
var flexrune:String;
[Embed("javarune.gif")]
var javarune:String;
// --- Iconos embebidos (movieclips dentro de un swf)
[Embed("links.swf#Bullet")]
var Bullet:String;
[Embed("links.swf#Dummy")]
var Dummy:String;

// --- Asigna los iconos a los nodos del Tree
function myIconFunction(item) {
var nodeIcon:String = item.attributes.icon;

switch (nodeIcon) {
case "amigosrune":
return amigosrune;
case "flashesrune":
return flashesrune;
case "flashenrune":
return flashenrune;
case "fremotingrune":
return fremotingrune;
case "flexrune":
return flexrune;
case "javarune":
return javarune;
default:
return Bullet;
}
}

// --- Abre una ventana con la url determinada cuando se pincha en el nodo si no es una rama del Tree
function changeEvt(evtObj) {
var t = evtObj.target;
var s = t.selectedNode;
if (t.getIsBranch(s))
t.setIsOpen(s, !t.getIsOpen(s), true, true);
if (s.attributes.url!=undefined)
getURL(s.attributes.url, "from www.carlosrovira.com");
}

// --- Retoma la forma del arbol
function openSavedNodes() {
var categorias = links_tree.dataProvider.childNodes;
for (var i = 0; i < categorias.length; i++) {
var id = categorias[i].attributes.label;
if (openedNodes[id] != undefined)
links_tree.setIsOpen(categorias[i], true, false);
}
}

// --- Guarda la posicion aierta del nodo en un SharedObject
function nodeOpen(evt) {
openedNodes[evt.node.attributes.label] = true;
so.data.openedNodes = openedNodes;
}

// --- Borra del SharedObject el nodo cuando se cierra este
function nodeClose(evt) {
delete openedNodes[evt.node.attributes.label];
so.data.openedNodes = openedNodes;
}

// --- Coloca la url del nodo en la barra de estatus del navegador cuando hacemos rollOver
function itemRollOver(evt) {
var t = evt.target;
if(t.getItemAt(evt.index).attributes.url != undefined)
getURL("javascript:void(window.status='" + t.getItemAt(evt.index).attributes.url + "');");
}

// --- Deja en blanco la barra del navegador cuando hacemos rollOut
function itemRollOut(evt) {
var t = evt.target;
if(!t.getIsBranch(t.getItemAt(evt.index)))
getURL("javascript:void(window.status='');");
}

Fijaros en como se inicializa sola la aplicación con initialize=”initApp()”. Como se pueden importar gráficos embebiendolos con [Embed(“ksmilebig.gif”)] o clips de una libreria swf con [Embed(“links.swf#Bullet”)] entre otras cosas…

Como ejercicio…no esta mal ¿no? 🙂

8 Comentarios

  1. Hum!
    yo todaví­a no recibí­ mi CD, lo pedí­a poco despuás que tu, este ejercicio, me vendrá de bien para atajar un poco el camino hacia la sabidurí­a-flex 😉

  2. Pues si que es raro ¿no Toni?
    A mi me llegó el dí­a 12 (aunque la fecha señalada era el dí­a 7)…bueno seguro que está a punto de llegarte.
    Ya verás como cuando te llegue, te enganchas jejeje 😉

  3. Carlos! muy bueno tu blog!!! estoy aprendiendo mucho sobre el componente Tree! lamentablemente no puedo bajar el zip (flexlinkstree.zip) con los archivos de este ejemplo! que tan utiles me serian!!! podras reparar el link para q pueda bajarlo? o hacermelo llegar a mi mail?

    Gracias, elisa

  4. Carlos! he podido bajar los archivos! Muchas Gracias por subirlos! pero me encuentro con otro problema! no logro hacer andar el ejemplo ?! lo ejecuto y no pasa nada !!! el swf esta vacio! Que puede estar pasando?

    Gracias, elisa

  5. Hola Elisa, ¿Que estás usando Flex 1.x o Flex 2?, ten encuenta que estos ejemplos son de cuando salió Flex 1.0 con lo que incluso con la 1.5 y más aún con la 2.0 habrá que retocarlos para contemplar los cambios en la tecnologí­a.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *