« Los favoritos de O'Reilly | Inicio | Extensiones para Flash MX 2004 »

Componente Tree (·rbol)

Estoy empezando a trabajar con los nuevos componentes de Flash MX 2004.

Hoy, un poco tambiÈn para probar su supuesta facilidad de uso, he hecho la pequeÒa "aplicaciÛn" de enlaces que podeis ver en la parte derecha.

Y efectivamente, ha sido r·pido y f·cil:

_global.style.setStyle("fontSize", 12); myTree.setStyle("color", 0x999966); myTree.setStyle("borderStyle","solid"); myTree.setStyle("themeColor", "haloBlue"); // carga y asignacion de contenido myTreeDataProvider = new XML(); myTreeDataProvider.ignoreWhite = true; myTreeDataProvider.onLoad = function(){ myTree.dataProvider = myTreeDataProvider; } myTreeDataProvider.load("/enlaces/tree.xml"); myTreeListener = new Object(); myTreeListener.tree = myTree; //Listener para el evento change del arbol //Quiero desplegar nodos al seleccionarlos myTreeListener.change = function(eventObject){ var theSelectedNode = eventObject.target.selectedNode; var theSelectedNodeLabel = theSelectedNode.attributes.label; var esLink = theSelectedNode.attributes.isLink; var esBranch = this.tree.getIsBranch(theSelectedNode) if (esBranch){ if (this.tree.getIsOpen(theSelectedNode)){ this.tree.setIsOpen(theSelectedNode, false, true); }else{ this.tree.setIsOpen(theSelectedNode, true, true); } }else{ if (esLink){ var theSelectedNodeURL = theSelectedNode.attributes.url; //trace("url " + theSelectedNodeURL); getURL(theSelectedNodeURL, "_blank"); } } } myTree.addEventListener("change", myTreeListener); stop();

Dos cosas a tener en cuenta: evidentemente, el nombre de instancia del componente es myTree; y podeis ver el formato que tiene el xml carg·ndolo desde el Internet Explorer

Comentarios

Es muy interesante lo que ha hecho, especialmente
estoy interasado en como puso el atributo URL a ciertos nodos de su ·rbol, pero viene mi pregunta, øcomo se puede crear varias carpetas al mismo nivel , y como puedo hacer para que el nodo tenga un label pero un url funcional distinto?

Saludos, Galo:

La estructura del ·rbol viene dada por el formato del XML del que carga los datos.

Si ejecutas en un navegador la siguiente direcciÛn:
http://www.design-nation.net/enlaces/tree.xml
y ves el cÛdigo fuente, ver·s cÛmo est· estructurado el ·rbol. Creo que lo entender·s enseguida.

como se muestran y ocultan las barras de desplazamiento del tree ?

La barra de scroll la maneja el propio componente.

Hay una propiedad del tree que se llama vScrollPolicy, que tiene tres posibles valores: "on", "off", o "auto". El valor "on" hace que siempre se reserve el espacio para la barra aunque no sea necesario, y "auto" hace que en principio no se muestre dicho espacio, pero la barra se mostrar· cuando sea necesario.