Dataprovider issu de XML à plusieurs niveaux de noeuds

**Imadus** · 29/11/2010, 09h33

Bonjour, en un mot : je désespère

But de mon apllication : Je suis en train de réaliser une gallerie avec des sous gallerie et des sous-sous gallerie en flex.

Explication :

J'ai un fichier XML avec différents niveaux : des noueds (catégorie d'images) des sous noeuds (sous catégorie d'images) et des sous sous noeuds (sous-sous catégorie d'images).

Jusque ici je suis arrivé à récupérer mes données de mon XML et à afficher les données dans mon premier datagrid et en cliquant sur une image de mon premier datagrid à afficher les sous images correspondant à la sous catégorie de l'image cliquée.

Voilà, mon problème est pour répéter l'opération pour mon deuxième datagrid, cliquer sur la sous catégorie et avoir la sous-sous catégorie qui s'affiche dans le troisième datagrid. Ca ne marchait pas, normal car il n'y avait pas de "mémoire" de là où j'étais dans mon xml (enfin je crois).

J'ai changer mon code en créant donc une array et je push le "sous xml" correspondant à l'image cliqué à chaque pour faire apparaitre les sous-images dans le second datagrid et même opération pour le troisième datagrid. Mais ça ne marche pas !

SVP, Aidez moi, voilà déjà une semaine à fouiller partout sans résultat !

Voici mon code complet :

Ici l'application

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?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" minWidth="955" minHeight="600"
			   applicationComplete="application1_applicationCompleteHandler(event)"
			   creationComplete="xmlService.send()"
			   >
 
	<fx:Declarations>
		<mx:HTTPService id="xmlService" url="./articles.xml" />
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.CollectionEvent;
			import mx.events.FlexEvent;
 
			import spark.components.supportClasses.ItemRenderer;
 
			[Bindable]
			public var itemClique:Array = new Array();
 
			protected function application1_applicationCompleteHandler(event:FlexEvent):void
			{
 
			}
 
			protected function donnees_collectionChangeHandler(event:CollectionEvent):void
			{
			/* 	  if ( donnees.length > 0 ){   */
					deuxiemeDataGrid.dataProvider = donnees[0].article;
			/* 	}  */
				/* if ( donnees.length > 1 ){  */
					troisiemeDataGrid.dataProvider = donnees[1].article;
			/* 	} 	 */
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<mx:ArrayCollection id="donnees" collectionChange="donnees_collectionChangeHandler(event)"/>	
	</fx:Declarations>
 
 	<mx:DataGrid id="datagrid" x="0" y="0" dataProvider="{xmlService.lastResult.articles.article}" height="600" width="130">
		<mx:columns>			
			<mx:DataGridColumn headerText="Colonne*1" itemRenderer="Renderer"/>
		</mx:columns>
	</mx:DataGrid>
 
	<mx:DataGrid id="deuxiemeDataGrid" x="129" y="0" height="600" width="130">
		<mx:columns>
			<mx:DataGridColumn headerText="Colonne*2" itemRenderer="Renderer"/>
		</mx:columns>
	</mx:DataGrid>	
 
	<mx:DataGrid id="troisiemeDataGrid" x="258" y="0"  height="600" width="130">
		<mx:columns>
			<mx:DataGridColumn headerText="Colonne*3" itemRenderer="Renderer"/>
		</mx:columns>
	</mx:DataGrid>	
 
</s:Application>

Ici le rendu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
						  xmlns:s="library://ns.adobe.com/flex/spark" 
						  xmlns:mx="library://ns.adobe.com/flex/mx" 
						  focusEnabled="true"
						  height="182"
						  >
 
	<fx:Script>
		<![CDATA[
			import mx.controls.DataGrid;
			import mx.core.Application;
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;
 
 
			protected function lblData_clickHandler(event:MouseEvent):void
			{				
 
				var grille:DataGrid = dataGridListData.owner as DataGrid;
 
				 FlexGlobals.topLevelApplication.donnees.push(grille.selectedItems[0]); 
 
			}
 
 
		]]>
	</fx:Script>
 
	<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{data.nom.toString()}" click="lblData_clickHandler(event)"/>
	<mx:Image id="lblData2" top="20" left="0" right="0" bottom="0" source="{data.img.toString()}" click="lblData_clickHandler(event)"/>
</s:MXDataGridItemRenderer>

et ici mon XML de test

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<?xml version="1.0" encoding="utf-8"?>
<articles>
					<article id="1">
						<nom>Section animalerie</nom>
						<img>file:///C:/articles/animalerie/animalerie.jpg</img>					
						<description>Articles de la section animalerie</description>
 
						<article id="11">
							<nom>animalerie11</nom>
							<img>file:///C:/articles/animalerie/images/animalerie1.jpg</img>
							<description>Articles Animalerie 1</description>
 
								<article id="111">
									<nom>sous_animalerie111</nom>
									<img>file:///C:/articles/animalerie/images/animalerie1.jpg</img>
									<description>Articles Animalerie 1</description>
								</article>
 
								<article id="112">
									<nom>sous_animalerie112</nom>
									<img>file:///C:/articles/animalerie/images/animalerie1.jpg</img>
									<description>Articles Animalerie 1</description>
								</article>		
						</article>
 
						<article id="12">
							<nom>animalerie12</nom>
							<img>file:///C:/articles/animalerie/images/animalerie1.jpg</img>
							<description>Articles Animalerie 1</description>
 
								<article id="121">
									<nom>sous_animalerie121</nom>
									<img>file:///C:/articles/animalerie/images/animalerie1.jpg</img>
									<description>Articles Animalerie 1</description>
								</article>
 
								<article id="122">
									<nom>sous_animalerie122</nom>
									<img>file:///C:/articles/animalerie/images/animalerie1.jpg</img>
									<description>Articles Animalerie 1</description>
								</article>		
						</article>
					</article>
 
 
					<article id="2">
						<nom>Section bebe</nom>
						<img>file:///C:/articles/bebe/bebe.jpg</img>					
						<description>Articles de la section bebe</description>
 
						<article id="21">
							<nom>bebe21</nom>
							<img>file:///C:/articles/bebe/images/bebe1.jpg</img>
							<description>Articles bebe 1</description>
 
								<article id="211">
									<nom>sous_bebe211</nom>
									<img>file:///C:/articles/bebe/images/bebe1.jpg</img>
									<description>Articles bebe 1</description>
								</article>
 
								<article id="212">
									<nom>sous_bebe212</nom>
									<img>file:///C:/articles/bebe/images/bebe1.jpg</img>
									<description>Articles bebe 1</description>
								</article>		
						</article>
 
						<article id="22">
							<nom>bebe22</nom>
							<img>file:///C:/articles/bebe/images/bebe1.jpg</img>
							<description>Articles bebe 1</description>
 
								<article id="221">
									<nom>sous_bebe221</nom>
									<img>file:///C:/articles/bebe/images/bebe1.jpg</img>
									<description>Articles bebe 1</description>
								</article>
 
								<article id="222">
									<nom>sous_bebe222</nom>
									<img>file:///C:/articles/bebe/images/bebe1.jpg</img>
									<description>Articles bebe 1</description>
								</article>		
						</article>
					</article>
				</articles>

Merci infiniment pour toute aide ou même indication !

**Imadus** · 29/11/2010, 10h09

J'ai oublié de préciser que c'est mon premier programme sous Flex !

**Maskime** · 29/11/2010, 14h36

Hello,

Alors première chose, c'est pas la première fois que tu poste ici et je remarque un truc dans tes postes : Soit tu en met trop, soit tu en mets pas assez...
Dans ce cas précis tu en as trop mis... Il faut bien que tu comprennes que les gens qui aident sur ce forum prennent certainement sur leur temps professionnel pour répondre aux questions. Du coup quand on se retrouve face à ce genre de poste on se dit simplement qu'on a pas le temps de regarder un poste aussi long...
Ca c'était pour la partie présentation.

Pour ce qui concerne ton problème, je vois bien que tu as ajouter un event handler pour changer les dataprovider de tes 2 datagrids. Mais est ce que tu as essayer de mettre un point d'arrêt dans le debugger pour regarder si ton code était bien appelé quand tu le pensais ?
+ Normalement on fait pas comme ça, tu aurais du déclarer des ArrayCollection dans ton code en les rendant bindable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
[Bindable]
private var _sousItem:ArrayCollection;

Du coup dans ton MXML pour lier tes données contenu dans tes arraycollection avec tes datagrids tu fais comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<mx:DataGrid id="datagrid" x="0" y="0" dataProvider="{_sousItem}">...

De cette manière tu n'as pas gérer d'évènements de modification de données pour que tes datagrids se mettent à jour, elles le feront toutes seules quand la valeur sera changée.

Voilà j'espère que je t'ai apporté un bon axe de réflexion sur ton problème

**Imadus** · 29/11/2010, 15h58

Bonjour Maskime,

Merci pour ton conseil, je ferai attention à l'avenir quand à la longueur de mes messages

Je vais essayer ce que tu m'as dit et je te tiens au courant.

Mais à quelle moment je déclare quels sont mes sous_Items ?

Merci.

**Maskime** · 29/11/2010, 17h14

Hello,

je me rends compte en lisant mon poste que j'ai peut être été un peu violent dans mes remarques...

Bon sinon je me rends compte que tu ne fais pas de send() sur ton HTTP service.
Dans un monde idéal sur le creationComplete de ton application tu appelles une méthode qui va initialiser ton application. Dans ton cas l'initialisation consiste en appeler le HTTPService pour qu'il s'exécute. Ensuite dans ton HTTPService il faut que tu définisse 2 handlers, un pour le cas où une erreur survient et un dans le cas où le service réponds sans encombres et où il faut traiter le résultat qui t'ai donné par le service.
C'est normalement dans ce dernier que tu dois mettre en place ta mécanique de tri de données, c'est là que tu vas renseigner tes ArrayCollection. Et comme tu les auras "binder" avec les différentes datagrids tu devrais les voir se remplir comme par magie

Dataprovider issu de XML à plusieurs niveaux de noeuds

Flex

Vue hybride

Discussions similaires

Partager

Partager