[Flex4] Echange données datagrid et XML [Résolu]

[Tan]

Bonjour,

Voici un deuxième problème (et dernier j'espère) que je traine depuis quelques jours.

Objectif:
Deux listes alimentés par deux dataprovider différents (mais de même structure).
Deux boutons pour permettre d'échanger les données entre ces listes.

Voici un code qui fonctionne:

Code :

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
<?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"
			   contentCreationComplete="init()">
 
	<fx:Declarations>
		<mx:ArrayCollection id="dataGauche">
			<fx:Object nom="Gauche1"/>
			<fx:Object nom="Gauche2"/>
			<fx:Object nom="Gauche3"/>
			<fx:Object nom="Gauche4"/>
		</mx:ArrayCollection>
 
		<mx:ArrayCollection id="dataDroite">
			<fx:Object nom="Droite1"/>
			<fx:Object nom="Droite2"/>
			<fx:Object nom="Droite3"/>
			<fx:Object nom="Droite4"/>
		</mx:ArrayCollection>
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			import spark.components.DataGrid;
 
			private function changeElement(datagrid1:DataGrid, datagrid2:DataGrid):void {
				var toRemove:Array=[];
				for (var i:int=0; i < datagrid2.selectedItems.length; i++)
				{
					toRemove.push(datagrid2.selectedItems[i]);
				}
				for (i=0; i < toRemove.length; i++)
				{
					datagrid1.dataProvider.addItem(toRemove[i]);
					datagrid2.dataProvider.removeItemAt(datagrid2.dataProvider.getItemIndex(toRemove[i]));
				}
			}
			// Supprime les éléments sélectionnés de la liste de droite
			private function deleteSelection():void
			{
				changeElement(datagridGauche, datagridDroite);
			}
			// Ajoute les éléments sélectionnés à la liste de droite
			private function addSelection():void
			{
				changeElement(datagridDroite, datagridGauche);
			}
		]]>
	</fx:Script>
 
	<s:HGroup>
		<!-- liste de gauche -->
		<s:DataGrid id="datagridGauche"	dataProvider="{dataGauche}">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="nom"/>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>
 
		<!-- bouton d'échange -->
		<s:VGroup verticalAlign="middle" height="100%">
			<s:Button id="btnAjout" label="&gt;" click="addSelection()"/>				
			<s:Button id="btnSuppr" label="&lt;" click="deleteSelection()"/>
		</s:VGroup>
 
		<!-- liste de droite -->
		<s:DataGrid id="datagridDroite" dataProvider="{dataDroite}">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="nom"/>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>
	</s:HGroup>
</s:Application>

Ce code fonctionne, par contre, si je change le dataprovider pour le mettre en XML (dans la partie fxeclarations), cela ne fonctionne plus:

Code :

1
2
3
4
<fx:XML id="xmlDataGauche" source="xml/xmlDataGauche.xml"/>
		<fx:XML id="xmlDataDroite" source="xml/xmlDataDroite.xml"/>
		<s:XMLListCollection id="dataGauche" source="{xmlDataGauche..element}"/>
		<s:XMLListCollection id="dataDroite" source="{xmlDataDroite..element}"/>

Voici les fichiers xml correspond:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<provider>
	<element>
		<nom>Gauche1</nom>
	</element>
	<element>
		<nom>Gauche2</nom>
	</element>
	<element>
		<nom>Gauche3</nom>
	</element>
	<element>
		<nom>Gauche4</nom>
	</element>
</provider>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<provider>
	<element>
		<nom>Droite1</nom>
	</element>
	<element>
		<nom>Droite2</nom>
	</element>
	<element>
		<nom>Droite3</nom>
	</element>
	<element>
		<nom>Droite4</nom>
	</element>
</provider>

Ici, l'élément disparaitre de la première liste, mais n'apparait dans la seconde, et lorsque, je fais l'échange inverse, les éléments supprimés précédemment réapparaissent.

Pourquoi ai-je ce comportement. Dans le principe, dans les deux cas on est sur des classes héritant de ListCollectionView, je fais des addItem sur des objects de même type.

[Krazymins]

Salut,

Qu'est-ce que ça te donne si tu fais un invalidateList() juste après les changements dans tes lists ? :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
// Supprime les éléments sélectionnés de la liste de droite
			private function deleteSelection():void
			{
				changeElement(datagridGauche, datagridDroite);
                                datagridDroite.invalidateList();
			}
			// Ajoute les éléments sélectionnés à la liste de droite
			private function addSelection():void
			{
				changeElement(datagridDroite, datagridGauche);
                                datagridDroite.invalidateList();
			}

[Tan]

Bonjour,

Le DataGrid que j'utilise est le suivant spark.components.DataGrid (celui de Spark), la méthode que tu m'indiques, ne semble exister que pour les composants mx.

Je ne peux donc pas tester ce que tu m'as demandé. Peut-être y a-t-il un équivalent (il faudrait que je regarde).

Mais, ce que je ne comprends pas c'est pourquoi cela marche dans le premier cas.

Merci, pour cette première piste.

[Madfrix]

Bonjour,

il faut que tu appliques un refresh() sur ton dataprovider

[Madfrix]

Après m'être penché un peu plus sur ton problème, tu peux faire ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
private function changeElement(datagrid1:DataGrid, datagrid2:DataGrid):void {
 
	var v:Vector.<Object> = datagrid2.selectedItems;
	var dp1:XMLListCollection = XMLListCollection(datagrid1.dataProvider);
	var dp2:XMLListCollection = XMLListCollection(datagrid2.dataProvider);
 
	for each(var o:Object in v)
	{
		dp2.removeItemAt(dp2.getItemIndex(o));
		dp1.addItem(new XMLList(o));
	}  
 
}

Par contre, si tu inverses les instructions removeItemAt et addItem cela ne marche pas et je ne m'explique pas pourquoi...

[Tan]

Merci, le code que tu m'as fourni fonctionne avec les XMLCollectionList, mais plus avec les ArrayList.

Je l'ai modifié pour qu'il soit plus général en utilisant les IList:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
private function changeElement(datagrid1:DataGrid, datagrid2:DataGrid):void {
	var v:Vector.<Object> = datagrid2.selectedItems;
	var dp1:IList = IList(datagrid1.dataProvider);
	var dp2:IList = IList(datagrid2.dataProvider);
 
	for each(var o:Object in v)
	{
		dp2.removeItemAt(dp2.getItemIndex(o));
		dp1.addItem(o);
	}  
}

Et la, ça semble fonctionner avec des XMLCollectionList, ArrayCollection, ArrayList, ce qui me va.

Par contre, j'ai essayé de comprendre pourquoi ton code fonctionnait, et pas le mien. Car mon code initial me paraissait pas trop mal.

Et en fait, j'ai le même problème que toi à la base, l'ordre entre le addItem et le removeItemAt change le fonctionnement.

Les deux méthodes sont bonnes, j'ai juste choisi le mauvais ordre.

Par contre, comme toi, je ne m'explique pas ce fonctionnement.

Je metterai ce signalement à résolu, plus tard dans la journée, des fois que quelqu'un aurait une explication (j'aime comprendre, et c'est vrai qu'avec flex, c'est le deuxième problème que je ne m'explique pas), avec celui d'hier).

En tant cas, merci pour ton aide, sur mes deux problèmes.

[Madfrix]

Il est vrai que j'avais commencé à écrire le addItem puis le removeItem dans cet ordre et cela ne fonctionnait pas. Sans le removeItem, le addItem fonctionne, avec lui mis après il ne fonctionne plus

Je ne m'explique pas du tout ce résultat mais j'ai pas le temps d'investiguer plus longtemps dessus car je risque de perdre pas mal de temps...

Dis moi si tu comprends pourquoi

++