Llenar árbol utilizando los datos de ArrayCollection

Question

Digamos que tenía una ArrayCollection así:

 public var ac:ArrayCollection= new ArrayCollection([ 
      {item:"dog", group:"Animals"}, 
      {item:"orange", group:"Fruits"}, 
      {item:"cat", group:"Animals"}, 
      {item:"apple", group:"Fruits"} 
      ]); 

¿Cómo iba a crear un componente de árbol en Flex 3, que utiliza los grupos como nodos, con los elementos apropiados que figuran en cada nodo ?

Answer 1

Puede usar la propiedad labelField del Árbol para determinar qué propiedad quiere que sea la etiqueta de cada nodo.

En el ejemplo, esto le daría a un solo nivel Tree:

<mx:Tree id="tree" dataProvider="{ac}" labelField="item" /> 

Estos enlaces pueden serle de ayuda:

• Array as a Data Provider in a Tree
• Filter a Tree with an ArrayCollection

---

Editar: el ArrayCollection que ha creado contiene objetos, cada uno de los cuales combina grupos con elementos. Si desea utilizar un Tree, debe pensar jerárquicamente, de arriba a abajo.

Los objetos que se encuentran en la parte superior serán sus "grupos", formados por objetos que representan los "elementos". En su ArrayCollection, cada índice deberá ser un Object que, a su vez, contiene los elementos secundarios anidados. Tenga en cuenta: cada objeto debe tener sus hijos anidados especificados en una propiedad llamada "hijos".

Por ejemplo:

{name: "Animals", children: new ArrayCollection([ {name: "Dog"}, {name: "Cat"} ])} 

Este objeto `se estructura de forma jerárquica:

objeto: Animales
|
| - los niños
          |
          perro
          |
          gato

Desde aquí, los Dog y Cat objetos también podría tener una propiedad children, señalando al otro ArrayCollection. ¿Esto tiene sentido?

Observe cómo cada objeto contiene el mismo identificador. En este caso, utilicé "nombre" para la etiqueta que se mostrará en el Tree. También puede usar la propiedad labelFunction para definir una función que devuelve String y así poder determinar cuál es la etiqueta de un nodo dado en tiempo de ejecución.

Tomé su ArrayCollection y lo incluí en una aplicación simple que lo muestra como Tree.

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
<mx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 
     [Bindable] public var ac:ArrayCollection= new ArrayCollection([ 
      { name: "Animals", children: new ArrayCollection([ {name: "dog"}, {name: "cat"}])}, 
      { name: "Fruits", children: new ArrayCollection([ {name: "orange"}, {name: "apple"} ])}]); 

    ]]> 
</mx:Script> 
<mx:Tree dataProvider="{ac}" labelField="name" /> 

Answer 2

he utilizado de esta manera y que funciona para mí: a link!

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
creationComplete="windowedapplication1_creationCompleteHandler(event)" xmlns:local="*" 
width="318" height="400"> 
<s:layout> 
    <s:VerticalLayout/> 
</s:layout> 
<fx:Script> 
    <![CDATA[ 
     import mx.events.CollectionEvent; 
     import mx.events.FlexEvent; 

     protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void 
     { 
      refreshTree();  
     } 

     private function refreshTree():void{ 
      gc.refresh(); 
      myTree.dataProvider = gc.getRoot(); 
     } 

    ]]> 
</fx:Script> 
<fx:Declarations> 

    <s:ArrayCollection id="arcData"> 
      <local:TestItem year="2009" month="Jan" label="Jan Report 1"/> 
      <local:TestItem year="2009" month="Jan" label="Jan Report 2"/> 
      <local:TestItem year="2009" month="July" label="July Report 1"/> 
      <local:TestItem year="2009" month="July" label="July Report 2"/> 
      <local:TestItem year="2010" month="Feb" label="Feb Report 1"/> 
      <local:TestItem year="2010" month="Feb" label="Feb Report 2"/> 
      <local:TestItem year="2010" month="Dec" label="Dec Report 1"/> 
      <local:TestItem year="2010" month="Dec" label="Dec Report 2"/> 
    </s:ArrayCollection> 

    <mx:GroupingCollection2 id="gc" source="{arcData}"> 
     <mx:grouping> 
      <mx:Grouping> 
       <mx:fields> 
        <mx:GroupingField name="year"/> 
        <mx:GroupingField name="month"/>  
       </mx:fields> 
      </mx:Grouping> 
     </mx:grouping> 
    </mx:GroupingCollection2> 
</fx:Declarations> 

<mx:Tree id="myTree" dataProvider="{gc.getRoot()}" labelField="GroupLabel" width="100%" height="100%"> 

</mx:Tree> 

</s:Application> 

Answer 3

Se puede crear un nodo jerárquico ArrayCollection con los niños en ella desde un piso ArrayCollection.

Here is a link on Adobes cookbooks.