Pues ya no es un componente , tiene mas sentido q sea una clase ...
Requisitos para q funcione :
Teneis q tener en la libreria :
- 2 mc vinculados con el nombre "vacioOpen","vacioClose" , es para sustituir el triangulo , si dejas los mc vacios no aparecen !
- 1 mc vinculado con el nombre "default", en caso de no exista el atributo "icon" en el nodo xml se carga el mc "default" en mi caso un punto
- 1 mc vinculado con el nombre "TreeCell" y vinculado en clase de as2 con el nombre "TreeCell" , para configurar la celda
Extructura de el xml :
todos los nodos tienen q llamarse "node" y un atributo "label"
para q sea una carpeta (IsBranch) , tiene q tener el atributo "folderID"
para q se vea un icono , tiene q tener el atributo "icon"
ejemplo de xml :
Código :
<xml>
<node label="Flash" folderID="0" icon="flash">
<node label="Español" folderID="0" icon="es">
<node label="CristalLab" url="http://www.cristalab.com/" />
</node>
</xml>
clase a guardar con nombre "TreeIcon.as" y a poner al lao de el fla , esta clase es la q crea el tree
Código :
import mx.controls.*
class TreeIcon {
var xmlTree:XML ;
var $tree:Tree ;
var $cookie:SharedObject ;
var $openedNodes:Object ;
var $nivel:MovieClip ;
var $listener:Object;
function TreeIcon (nivel:MovieClip, ancho:Number,alto:Number,x:Number,y:Number) {
$nivel = nivel ;
$tree = $nivel.createClassObject(Tree,"tree",1);
// scrollBars
$tree.vScrollPolicy = "auto";
// altura de cada celda , eso depende de tus iconos
$tree.rowHeight = 22;
// tamaño
$tree.setSize(ancho,alto);
// posicion
$tree.move(x,y)
// aparencia general de el tree
$tree.setStyle("backgroundColor", 0xFFFFFF);
$tree.setStyle("borderStyle", "none");//"", "inset", "outset" o "solid".
$tree.setStyle("indentation", 20);
$tree.setStyle("selectionColor",0xFFFFFF);
$tree.setStyle("rollOverColor", 0xC2CFD5);
$tree.setStyle("fontFamily", "Verdana");
//sustituimos el triangulo por otro clip
$tree.setStyle("disclosureOpenIcon", "vacioOpen");
$tree.setStyle("disclosureClosedIcon", "vacioClose");
// si no hay atributo icono carga a "default"
$tree.iconFunction = function(node){
var nI = node.attributes.icon;
if (nI==undefined) nI = "default";
return nI ;
}
// registramos los eventos en la clase
$tree.addEventListener("nodeOpen", this);
$tree.addEventListener("nodeClose", this);
// movimiento de el tree
$tree.setStyle("openEasing", mx.transitions.easing.Back.easeInOut);
// cargamos la aparencia de cada celda
$tree.cellRenderer = "TreeCell";
// cookie , guarda la posiciones de las carpeta abiertas
$cookie = SharedObject.getLocal ("buhoTree");
$openedNodes = $cookie.data.openedNodes;
if ($openedNodes==undefined) $openedNodes = new Object();
}
function load (obj:Object,str:String){
// guardamos la referencia de donde esta la function "change"
$listener=obj ;
// Load the menu XML
xmlTree = new XML();
xmlTree.ignoreWhite = true;
xmlTree.load(str);
var aqui = this ;
xmlTree.onLoad = function() {
with(aqui){
$tree.dataProvider = xmlTree.firstChild ;
$tree.addEventListener("change",aqui) ;
openSavedNodes();
}
};
}
function get _tree (){return $tree}
private function openSavedNodes(){
var cN = $tree.dataProvider.childNodes;
for (var i=0; i<cN.length; i++) {
var id = cN[i].attributes.label;
if ($openedNodes[id]!=undefined) $tree.setIsOpen(cN[i], true, false);
}
}
private function change (event:Object) {
if ($tree == event.target) {
var t = event.target;
var s = $tree.selectedNode;
if ($tree.getIsBranch(s)) {
$tree.setIsOpen(s, !$tree.getIsOpen(s), true, true);
}
if (s.attributes.folderID == undefined) {
$listener.change (s);
}
}
}
private function nodeOpen (evt) {
$openedNodes[evt.node.attributes.label] = true;
$cookie.data.openedNodes = $openedNodes;
}
private function nodeClose(evt){
delete $openedNodes[evt.node.attributes.label];
$cookie.data.openedNodes = $openedNodes;
}
} clase a guardar con nombre "TreeCell.as" y a poner al lao de el fla , esta clase es la q configura la celdas si es una carpeta o no , en este caso solo se configura la fuente
Código :
class TreeCell extends mx.core.UIComponent
{
static var symbolName = "TreeCell";
var myCell : Object; // the new text label we'll use
var listOwner : Object; // reference to the tree - supplied by the tree
function TreeCell()
{
// nothing needed - we're extending v2;
}
function init()
{
// nothing needed - we don't have any instance variables to initialize
}
function createChildren(Void) : Void
{
var c = createLabel("myCell", 0);
c.styleName = listOwner;
c.selectable = false;
}
// pass all sizing from the tree to the cell
function size(Void) : Void
{
myCell.setSize(__width-2,__height-2);
}
// str is the suggested string to render from the tree (based on the node)
// node is the entire XMLNode for the row
// sel is the selected state (not usually used)
function setValue(str : String, node, sel)
{
myCell.setValue(str);
var isBranch = listOwner.getIsBranch(node);
if (isBranch) {
// cuando es una carpeta
setStyle("fontSize", 10);
setStyle("fontWeight", "bold");
setStyle("color", 0x4B6B7C);
} else if (!isBranch) {
// cuando no es una carpeta
setStyle("fontSize", 9);
setStyle("fontWeight", "normal");
setStyle("color", 0xCC3300);
}
}
// ensures the cell is centered vertically properly - luckily, the label also implements this method.
function getPreferredHeight()
{
return myCell.getPreferredHeight();
}
function getPreferredWidth()
{
return myCell.getPreferredWidth();
}
}Y ahora en nuestro fla :
Código :
// TreeIcon (nivel:MovieClip, ancho:Number,alto:Number,x:Number,y:Number)
var favoritos = new TreeIcon (this,200,300,0,0)
// evento change
var listener = new Object() ;
listener.change = function(event) {
// event es el nodo xml q se ha seleccionado
// se puede leer su contenidos y atributos
trace (event.attributes.url)
_root.getURL(event.attributes.url, "_blank");
}
// Si quereis personalizar el tree sin tocar la clase
// podeis acceder al tree usando la propiedad "_tree"
favoritos._tree.setStyle("backgroundColor", 0xFFFFFF);
favoritos.load (listener,"links.xml")listo !! , si hay dudas ya sabeis
Escrito el 07 Oct 2004 11:14 pm
pero ya estarde tengo que salir, me faltan ver muchos pero mañana los termino estan muy bueno 
