Populate arbre à l'aide des données de ArrayCollection

Question

Disons que j'avais un ArrayCollection comme ceci:

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

Comment puis-je créer un composant Tree dans Flex 3 qui utilise les groupes comme les noeuds, avec les éléments appropriés répertoriés sous chaque nœud ?

Answer 1

Vous pouvez utiliser la propriété labelField de l'arborescence pour définir la propriété que vous voulez attribuer à chaque nœud.

Dans votre exemple, cela vous donnerait un seul niveau Tree:

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

Ces liens devraient vous aider:

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

---

Modifier: le ArrayCollection que vous avez créé contient des objets, dont chacun correspond à des groupes avec des éléments. Si vous voulez utiliser un Tree, vous devez penser hiérarchiquement, de haut en bas.

Les objets les plus importants seront vos "groupes", constitués d'objets représentant les "éléments". Dans votre ArrayCollection, chaque index doit être un Object qui, à son tour, contient des enfants imbriqués. S'il vous plaît noter: chaque objet doit avoir leurs enfants imbriqués spécifiés dans une propriété nommée "enfants".

Par exemple:

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

Ce `objet est ainsi structuré hiérarchiquement:

objet: Animaux
|
| - enfants
          |
          Dog
          |
          Cat

A partir de là, les objets Dog et Cat pourrait également avoir une propriété children, montrant encore une autre ArrayCollection. Est-ce que ça a du sens?

Notez que chaque objet contient le même identificateur. Dans ce cas, j'ai utilisé "nom" pour l'étiquette qui sera affichée dans le Tree. Vous pouvez également utiliser la propriété labelFunction pour définir une fonction qui renvoie String et peut ainsi déterminer l'étiquette d'un noeud donné au moment de l'exécution.

J'ai pris votre ArrayCollection et l'ai regroupé dans une application simple qui l'affiche comme 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

Je l'ai utilisé de cette façon et fonctionne pour moi: 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

Vous pouvez créer un ArrayCollection hiérarchique avec les enfants nœud à partir d'un ArrayCollection plat.

Here is a link on Adobes cookbooks.