Adobe Flex Tutorial - Adobe Flex Tutorial

20août/098

Flex AdvancedDataGrid – Utiliser childrenField dans un ArrayCollection pour définir la hiérarchie

Une donnée dite "hierarchical" (hiérarchique) est une donnée déjà structurée, arrangée en hiérarchie. Pour afficher cette donnée hiérarchique dans un composant AdvancedDataGrid, vous devez fixer le dataProvider du composant à une instance de la classe HierarchicalData. La structure de cette donnée dans le dataProvider définit l'affichage de la donnée dans l'ADG.

Un ArrayCollection est un moyen pratique de créer une donnée hiérarchique. Voici un exemple avec trois niveaux (un niveau root et 2 niveaux enfant):

[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
	{Region:"Southwest", children: [
		{Region:"Arizona", children: [
			{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
			{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
		{Region:"Central California", children: [
			{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
		{Region:"Nevada", children: [
			{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
		{Region:"Northern California", children: [
			{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
			{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
		{Region:"Southern California", children: [
			{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
			{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}
]);

Cet exemple utilise le mot-clé "children" pour définir la hiérarchie.

Le mot-clé "children" est le mot-clé par défaut utilisé par la classe HierarchicalData pour définit la hiérarchie.

Vous pouvez utiliser un mot-clé différent pour définir la hiérarchie. Dans ce cas, vous devez préciser ce mot-clé (nom de field) grâce à la propriété "childrenField" (HierarchicalData.childrenField) de l'objet HierarchicalData. L'exemple suivant utilise le champ "categories" pour définir sa hiérarchie:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var dpHierarchy:ArrayCollection = new ArrayCollection([
			{Region:"Southwest", categories: [
			{Region:"Arizona", categories: [
			{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
			{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
			{Region:"Central California", categories: [
			{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
			{Region:"Nevada", categories: [
			{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
			{Region:"Northern California", categories: [
			{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
			{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
			{Region:"Southern California", categories: [
			{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
			{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
			]}
		]);
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid width="100%" height="100%">
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"
			childrenField="categories"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
			headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

Remplis sous: AdvancedDataGrid, Exemple, MXML || Taggé comme: AdvancedDataGrid, ArrayCollection, childrenField Laisser un commentaire

Articles similaires

Commentaires (8) Trackbacks (0) (Souscrire aux commentaires de cet article)

loop
18 décembre 2009

j'ai la hierarchie d'objets suivant :

COPIER-COLLER
Actionscript:
Client {

var nom:String;

var comptes:ArrayCollection; //collection d'objet Compte

}

Compte {

var numeroCompte:String;

var mouvements:ArrayCollection; //collection d'objet Mouvement

}

Mouvement {

var numeroMouvement:String;

}
je voudrai afficher dans une AdvancedDataGrid
dans la première colonne un tree avec comme label le client.nom
dans la deuxième colonne le compte.numeroCompte
et dans la troisième le mouvement.numeroMouvement

comment puis-je faire ? j'ai essayer en utilisant une HierachicalData, mais je ne peux spécifier que les enfants du client, pas les enfants du comptes.
une idée ?
fnicollet
18 décembre 2009

Bonjour,
Si vous devez garder cette structure avec ces noms, ce que je ferai, c'est que je donnerai un nom générique au childrenField (children par exemple) et dans chaque classe ayant des enfants, 'ajouterai un getter sur children qui renverrai les enfants.
Par exemple pour la classe Client:

COPIER-COLLER
Actionscript:
public function get children():ArrayCollection{

return _comptes;

}
et dans Compte:

COPIER-COLLER
Actionscript:
public function get children():ArrayCollection{

return _mouvements;

}
Ici le getter sert en quelque sorte de "proxy"
Je n'ai pas eu le temps de tester mais cela fonctionne à mon avis

Fabien
loop
21 décembre 2009

non, je ne peux pas faire de proxy de donnée comme tu m'indiques.
existe-t-il une autre solution ?
fnicollet
21 décembre 2009

Je ne pense pas non. C'est quoi qui gène la mise en place d'un getter au juste ?

Fabien
loop
21 décembre 2009

la hierarchie est donnée à titre d'exemple,
je souhaite faire ce type de manip sur tout une palanquée d'objets, et en tout état de cause, je risque d'avoir sur l'objet Client une seconde collection d'objets Action qui contient elle-même une collection d'objet Trucmuche
que je souhaiterais afficher de la même manière.

donc, je me vois mal spécifier sur mon objet un getter children1, un getter children2, etc.

de plus, ce n'est pas moi qui gére la structure de l'objet Client.
loop
21 décembre 2009

j'ai trouvé une parade.
j'etend HierarchicalData et j'y rajoute deux attributs String : childrenLevel1 et childrenLevel2

je surcharge la méthode getChildren pour renvoyer le bon children suivant si c'est le level1 (comptes) ou le level2 (mouvement)

COPIER-COLLER
Actionscript:
override public function getChildren(node:Object):Object {

var children:* = null;

if (node != null && node is Object) {

if ( node.hasOwnProperty(childrenLevel1) )

children = node[childrenLevel1];

else if ( node.hasOwnProperty(childrenLevel2) )

children = node[childrenLevel2];

}

}

return children;

}
et dans mon dataprovider de mon advancedDatagrid, je mets donc :

[mxml][/mxml]

et cela marche !
bon dans la cas présent, je me limite à deux niveaux, mais on pourrait très bien gerer une liste de children pour gerer un plus grand nombre de niveau.
loop
21 décembre 2009

oups, mon mxml a été mangé...

ext:HierarchicalDataExtended source="{clients}" childrenLevel1="comptes" childrenLevel2="mouvements"
fnicollet
21 décembre 2009

Merci pour l'info, ça peut servir

Fabien