Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Tree – Peupler un Tree avec un dataProvider XML et Array (en MXML et ActionScript)

Comme les DataGrid, les composants Tree héritent des listes standard avec un comportement particulier. Dans le cas des Tree, cette spécialité est de pouvoir présenter un dataProvider de manière hiérarchique.

Bien que la plupart des listes affichent une liste linéaire d'éléments (verticalement, horizontalement ou en grille), les Tree Flex vous permettent d'afficher des éléments ayant des enfants. Ces types de data provider sont appelés "hierarchical data providers". Le XML suivant montre une relation hiérarchique dans laquelle les villes (city) sont des éléments enfant des états (states).

<state label="CA">
	<city label="Los Angeles"/>
	<city label="San Francisco"/>
</state>
<state label="MA">
	<city label="Boston"/>
</state>

Un arbre Tree peut représenter ce genre de données. Les Tree ont deux types d'éléments: les éléments branch (branches) et leaf (feuilles). Quand un dataProvider a des éléments enfant, ils sont automatiquement traités comme branches, ce que signifie qu'ils peuvent être étendus dans l'arbre.

Voici un exemple qui utilise un mx:Tree pour afficher la data:

<mx:Tree labelField="@label" width="200">
	<mx:XMLListCollection>
		<mx:XMLList>
			<state label="CA">
				<city label="Los Angeles"/>
				<city label="San Francisco"/>
			</state>
			<state label="MA">
				<city label="Boston"/>
			</state>
		</mx:XMLList>
	</mx:XMLListCollection>
</mx:Tree>

Vous pouvez voir que dans cet exemple, le Tree requiert une propriété labelField indiquant quoi utiliser comme label pour les éléments. La valeur @label utilise la syntaxe E4X pour indiquer que le Tree doit utiliser l'attribut label de chaque noeud XML pour le label de chaque élément du Tree.

Bien qu'il soit plus facile de visualiser les relations hiérarchiques avec du XML, on n'est pas restreint à l'utilisation du XML comme dataProvider pour les Tree. Vous pouvez utiliser n'importe quelle collection. Par exemple, vous pouvez utiliser un objet ArrayCollection comme data provider. Cependant, quand vous voulez établir une relation hiérarchique en utilisant des types de collections qui ne sont pas hiérarchiques par nature, vous devez connaître certaines règles. Pour ajouter des enfants à un élément, vous devez les ajouter en tant que Array avec une propriété nommée children.
L'exemple suivant illustre l'utilisation en utilisant l'exemple city/state précédent utilisant un ArrayCollection MXML:

<mx:Tree labelField="label" width="200">
	<mx:ArrayCollection>
		<mx:Array>
			<mx:Object label="CA">
				<mx:children>
					<mx:Object label="Los Angeles"/>
					<mx:Object label="San Francisco"/>
				</mx:children>
			</mx:Object>
			<mx:Object label="MA">
				<mx:children>
					<mx:Object label="Boston"/>
				</mx:children>
			</mx:Object>
		</mx:Array>
	</mx:ArrayCollection>
</mx:Tree>

Bien sur, vous pouvez arriver au même résultat en utilisant de l'ActionScript dans chaque cas. Voici par exemple, le code pour peupler un tree avec de la donnée XML en ActionScript:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler(event)">
	<mx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;

			private function creationCompleteHandler(event:Event):void{
				var xmlList:XMLList = XMLList('<item label="CA"><item label="Los Angeles" /><item label="San Francisco" /></item><item label="MA"><item label="Boston" /></item>');
				var collection:XMLListCollection = new XMLListCollection(xmlList);
				tree.dataProvider= collection;
			}
		]]>
	</mx:Script>
	<mx:Tree id="tree" labelField="@label" width="200"/>
</mx:Application>

Et voici l'exemple qui accomplit le même resultat en utilisant un Array AS3:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler(event)">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			private function creationCompleteHandler(event:Event):void{
				var array:Array = new Array(
				{label:"CA", children: new Array({label:"Los Angeles"},{label:"San Francisco"})},
				{label:"MA", children: new Array({label:"Boston"})});
				var collection:ArrayCollection = new ArrayCollection(array);
				tree.dataProvider= collection;
			}
		]]>
	</mx:Script>
	<mx:Tree id="tree" labelField="label" width="200"/>
</mx:Application>