Bha galera, voltei hoje para falar do Tree, este menu que dá um trabalho fora do normal no HTML, porém aqui descrevo um exemplo completo e simples, com Drag and Drop, e uma funcionalidade de poder clicar sobre um ramo do Tree.

Veja como criei o Tree.

<mx:Tree x="10" y="59" width="292" height="332" id="tree"
         labelFunction="labelFunc"
         itemClick="itemClick(event)"
         dataProvider="{this.XMLTree}"
         dragComplete="{texto.text=this.XMLTree}"
         change="texto.text=this.XMLTree"
         labelField="@label"
         showRoot="false"
         dragEnabled="true"
         dropEnabled="true"
         dragMoveEnabled="true" />

O propriedade labelFunction, executa uma função para cada linha do dataProvider. Esta função é executada apenas para o item definido no labelField. Esta função adiciona o número de filhos que existente dentro de uma pasta.

private function labelFunc(item:XML):String
{
    var children:ICollectionView;
    var suffix:String = "";
    if (tree.dataDescriptor.isBranch(item))
    {
        children = tree.dataDescriptor.getChildren(item);
        suffix = " (" + children.length + ")";
    }
    return item[tree.labelField] + suffix;
}

A Evento itemClick, executa a função quando um click acontece sobre um item do Tree. A função executada faz com que ao clicar sobre o label de uma pasta, esta é expande ou retrai o item, sem precisar clicar na seta.

private function itemClick(evt:ListEvent):void
{
    var item:Object = Tree(evt.currentTarget).selectedItem;
    if (tree.dataDescriptor.isBranch(item))
    {
        tree.expandItem(item, !tree.isItemOpen(item), true);
    }
}

O Evento dragComplete, ataliza o Text enviando o XML do dataprovider.

A propriedade dragMoveEnabled, Indica se os itens podem ser movidos em vez de apenas copiado a partir da árvore em uma operação de drag-and-drop. No caso foi definido como true para ser movida.

Mais quem faz toda a mágica são as propriedades dragEnabled e dropEnabled. Estas duas propriedades habilitam a movimentação dos itens dentro do Tree.

A propriedade labelField, indica o nome do campo do XML que deverá ser apresentado no Label. já a propriedade showRoot, define se o primeiro item é visivel no Tree.

No Evento creationComplete do Application, é chamado a função init() que carrega o XML externo. Este XML poderá ser montado a partir de uma aplicação PHP, com consulta no Banco de Dados. Quando o XML é carregado, a função setXML() é executado e o conteudo do XML é colocada na variavel XMLTree. Esta variavel é do tipo Bindable, ou seja, quando for alterada, altera automáticamente todos os seus dependentes.

[Bindable]
private var XMLTree:XML;

private function init():void
{
    var request:URLLoader = new URLLoader();
    request.addEventListener(Event.COMPLETE, setXML);
    request.load(new URLRequest("/code/041/listaTree.xml"));
}

public function setXML(e:Event):void
{
    XMLTree = new XML(e.target.data);
}

Veja como ficou este exemplo.

Para baixar o código fonte, clique aqui.

Para retirar aquele icone de pasta nos nós, é só aplicar o estilo a seguir.

<mx:Style>
    Tree {
        folderClosedIcon: ClassReference(null);
        folderOpenIcon: ClassReference(null);
    }
</mx:Style>

veja o resultado.

Neste exemplo foi adicionado duas novas funções, uma que expande todos os itens e outra que fecha todas.

private function abrirTodos():void
{
    tree.openItems = XMLTree..pasta;
}

private function fecharTodos():void
{
    tree.openItems = [];
}

E denovo o link do código fonte, clique aqui e baixe.