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.mxmlprivate 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.mxmlprivate 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.mxmlprivate 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
Siga-me
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
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>
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..??
Cara legal mesmo.... Agora seria melhor se tivesse como criar e remover nós... é dificil isto??? valeu..
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
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 ?
@Christian veja http://www.mindtheflex.com/sven/winskin/demo.html
http://www.mindtheflex.com/?p=75
Download do Skin em http://sven.mindtheflex.com/winskin/download.php?get=winskin.zip
[...] http://blog.mxml.com.br/trabalhando-com-tree http://www.kalengibbons.com/blog/index.php/2009/01/filtering-a-flex-tree-using-an-arraycollection/ [...]