Se esta querendo aprender ou iniciar novos projetos em Flex, clique aqui

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.

Arquivo main.mxml
<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.

Arquivo main.mxml
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.

Arquivo main.mxml
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.

Arquivo main.mxml
[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.

Arquivo main2.mxml
<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.

Arquivo main2.mxml
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.

Gostou? Não esqueça de curtir!

Ou compartilhe o link com seus amigos

8 comentários

Deixe uma resposta

  1. Muito bom seu exemplo, Kraus!!! Parabéns!!!
    Mas, teria como customizar os icones expand e collapse para utilizar, por exemplo, + e - respectivamente, como no windows explorer ?

     
  2. muito massa mesmo....  eu so estou como uma duvida. como é que eu faço para alterar os ícones, ao invés de pastas transforma-los em botões????????  vc poderia me tirar essa duvida

     
  3. Cara legal mesmo.... Agora seria melhor se tivesse como criar e remover nós... é dificil isto??? valeu..

     
  4. Como eu faço para clicar com o botão direito em um item da árvore, e aparece um menuzinho, como fazendo atualmente em vários programas..??

     
  5. Ola Celso

    Isso é possível

    <pre>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);
        }
        else
        {
            navigateToURL(new URLRequest("pagina.html"), "_blank");
        }
    }</pre>

     
  6. Boa.

    Legal sua dica estava mesmo precisando disso.

    Teria como você mostrar o seguinte. Quando o usuário clicar no menu como fazer para abrir uma outra página em HTML.?

    Obrigado