Discussion :

[WinNew]

Bonjour à tous,

Aidez-moi, je vais "criser". Je désire ajouter un élément à un composant de type "List".

Mon "dataProvider" est défini en XML.

Code :

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

private var __selectionXML:XML = <themes><theme name="toto"/></themes>;

Je crée le composant de type "List" de cette façon :

Code :

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

1
2
3
4
5
6
7
private var __listSlector:List               = new List();
private var __selectionXML:XML = <themes><theme name="toto"/></themes>;
...
// Construction du composant de tye "List".
__listSlector.dataProvider = __selectionXML.theme;
__listSlector.width        = 100;
__listSlector.labelField   = "@name";

Et, pour ajouter un élément, j'ai essayé plein de choses... Par exemple :

Code :

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

1
2
3
4
5
6
// On ajoute la sélection à la liste de sélections.
// "item" ressemble à "<theme name="Theme B1" interested="no"/>"
item.@categorie = XML(__treeSelector.selectedItem).parent().@name;
trace("Add: " + item.@name + "   " + item.@interested);
__selectionXML.appendChild(item);
trace(__selectionXML.toString());

Mais, rien ne marche. Je ne maîtrise pas bien les XMLList et XMLListCollection... Cela doit venir de mon ignorance sur le sujet. Mais cela fait deux jours que je bloque sur ce problème... J'ai relu la documentation des dizaines de fois.

Voici une application complète pour illustrer le problème :

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
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
 
	<mx:Script>
		<![CDATA[
 
			private var __themesXML:XML = 
		  	<themes>
		  		<categorie name="Catégorie A">
		 			<theme name="Theme A1" interested="yes"/>
		 			<theme name="Theme A2" interested="no"/> 
		  		</categorie>
		  		<categorie name="Catégorie B">
		 			<theme name="Theme B1" interested="no"/>
		 			<theme name="Theme B2" interested="yes"/> 
		 		</categorie>
 		  	</themes>;	
 
			private function init():void
			{ this.addChild(new ThemesSelector(__themesXML)); }
 
		]]>
	</mx:Script>
</mx:Application>

et

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
package
{
				import flash.events.Event;
				import flash.events.MouseEvent;
 
				import mx.collections.XMLListCollection;
				import mx.collections.ICollectionView;
				import mx.containers.Box;
				import mx.containers.HBox;
				import mx.containers.VBox;
				import mx.controls.Button;
				import mx.controls.List;
				import mx.controls.Spacer;
				import mx.controls.Tree;
 
 
				public class ThemesSelector extends Box
				{
					private var __treeSelector:Tree              = new Tree();
					private var __listSlector:List               = new List();
					private var __addButton:Button               = new Button();
					private var __removeButton:Button            = new Button();
					private var __themesXML:XMLListCollection;
					private var __selectionXML:XML = <themes><theme name="toto"/></themes>;
 
					/** Construit le sélectionneur de thèmes.
					 * 
					 * @param themesXML Document XML qui représente la liste de thèmes, organisés par catégories.
					 *  Le format du document XML qui représente la liste des thèmes est le suivant :
					 * 	<themes>
					 * 		<categorie name="Catégorie A">
					 *			<theme name="Theme A1" interested="yes"/>
					 *			<theme name="Theme A2" interested="no"/> 
					 * 		</categorie>
					 * 		<categorie name="Catégorie B">
					 *			<theme name="Theme B1" interested="no"/>
					 *			<theme name="Theme B2" interested="yes"/> 
					 *		</categorie>
			 		 * 	</themes>
					 * @param allowMultipleSelection Cet indicateur permet d'indiquer si le composant accepte des sélections multiples.
					 */
 
					public function ThemesSelector(themesXML:XML)
					{
						super();
						__themesXML = new XMLListCollection(themesXML.categorie);
						__createFormular();
 
						__addButton.addEventListener(MouseEvent.CLICK,     __addThemeToList);
						__removeButton.addEventListener(MouseEvent.CLICK,  __removeThemeFromList);
					}
 
					/** Ce gestionnaire d'évènement est exécuté lorsque l'utilisateur décide d'ajouter un centre d'intérêt à sa liste.
					 * 
					 * @param event Évènement envoyé lorsque l'utilisateur clique sur le bouton.
					 */
 
					private function __addThemeToList(event:Event):void
					{
						var item:XML;
 
						// Si aucun thème n'est sélectionné, on ne fait rien.
						if (__treeSelector.selectedItem == null) { return; }
 
						// Il est interdit de sélectionner une catégorie.
						item = new XML(__treeSelector.selectedItem);
						if (item.localName() == "categorie") { return; }
 
						// On ajoute la sélection à la liste de sélections.
						// "item" ressemble à "<theme name="Theme B1" interested="no"/>"
						item.@categorie = XML(__treeSelector.selectedItem).parent().@name;
						trace("Add: " + item.@name + "   " + item.@interested);
						__selectionXML.appendChild(item);
						trace(__selectionXML.toString());
 
						// Et on retire la sélection du sélecteur.
 
					}
 
					/** Ce gestionnaire d'évènement est exécuté lorsque l'utilisateur décide d'ajouter un centre d'intérêt de sa liste.
					 * 
					 * @param event Évènement envoyé lorsque l'utilisateur clique sur le bouton.
					 */
 
					private function __removeThemeFromList(event:Event):void
					{
 
					}
 
					/** Cette fonction est utilisée pour déterminer le label à afficher en fonction du type de noeud.
					 * 
					 * @param item Noeud XML courant.
					 * @param La fonction retourne une chaîne de caractères qui représente la catégorie ou le thème à afficher.
					 */
 
					private function __treeLabel(item:Object):String
					{
						var node:XML = XML(item);
 
						switch (node.localName())
						{
							case 'categorie': return node.@name;
							case 'theme':     return node.@name;
						}
						return null;
					}
 
					/** Cette fonction construit le formulaire.
					 */
 
					private function __createFormular():void
					{
						var mainHbox:HBox                = new HBox();
						var treeToListSpacerLeft:Spacer  = new Spacer();
						var treeToListSpacerRight:Spacer = new Spacer();
						var vbox:VBox                    = new VBox();
 
						// Construction du composant de type "Tree".
						__treeSelector.dataProvider           = __themesXML;
						__treeSelector.allowMultipleSelection = false;
						__treeSelector.labelFunction          = __treeLabel;
 
						// Construction de la zone centrale.
						treeToListSpacerLeft.width          = 15;
						treeToListSpacerLeft.percentHeight  = 100;
						treeToListSpacerRight.width         = 15;
						treeToListSpacerRight.percentHeight = 100;
						__addButton.label                   = "+";
						__removeButton.label                = "-";
						vbox.addChild(__addButton);
						vbox.addChild(__removeButton);
 
						// Construction du composant de type "List".
						__listSlector.dataProvider = __selectionXML.theme;
						__listSlector.width        = 100;
						__listSlector.labelField   = "@name";
 
						// Construction du composant.
						mainHbox.addChild(__treeSelector);
						mainHbox.addChild(treeToListSpacerLeft);
						mainHbox.addChild(vbox);
						mainHbox.addChild(treeToListSpacerRight);
						mainHbox.addChild(__listSlector);
 
 
						this.addChild(mainHbox);
					}
 
					/** Cette fonction rend le composant éligible au traitement par le "garbage colector".
					 */
 
					public function destroy():void
					{
						__addButton.removeEventListener(MouseEvent.CLICK,     __addThemeToList);
						__removeButton.removeEventListener(MouseEvent.CLICK,  __removeThemeFromList);
}

Une très grand merci à qui pourra me débloquer sur ce coup!

Merci,

Denis

[WinNew]

Salut à tous :

La nuit porte conseille. J'ai trouvé une solution pour rafraîchir le composant de type "List" :

J'écrase la propriété "dataProvider" :

Code :

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

1
2
3
4
5
6
// On ajoute la sélection à la liste de sélections.
// "item" ressemble à "<theme name="Theme B1" interested="no"/>"
item.@categorie = XML(__treeSelector.selectedItem).parent().@name;
__selectionXML.appendChild(item);
__listSlector.dataProvider = __selectionXML.theme;
trace(__selectionXML.toString());

Mais cette solution ne me satisfait pas. Une modification de la structure (XML) associée au composant devrait se répercuter sur l'affichage du composant...

Dans la documentation, on peut lire :

As a consequence of the conversions, when you get the dataProvider property, it will always be an ICollectionView, and therefore not necessarily be the type of object you used to you set the property. This behavior is important to understand if you want to modify the data in the data provider: changes to the original data may not be detected, but changes to the ICollectionView object that you get back from the dataProvider property will be detected.

OK, mais comment ajouter un élément à un objet de type "ICollectionView"?

Je sèche...

Qui pourrait m'aider?

Merci

Denis

[WinNew]

Salut à tous,

Finalement, le déjeuner aussi porte conseil... Je crois surtout que, face à un blocage informatique, il faut surtout se changer les idées pour ne pas tourner en rond ;-)

J'ai trouvé la technique la plus appropriée pour modifier la structure de donnée associée au conteneur :

As a consequence of the conversions, when you get the dataProvider property, it will always be an ICollectionView, and therefore not necessarily be the type of object you used to you set the property. This behavior is important to understand if you want to modify the data in the data provider: changes to the original data may not be detected, but changes to the ICollectionView object that you get back from the dataProvider property will be detected.

et:

ICollectionView Implementors ListCollectionView

et:

ListCollectionView Implements ICollectionView, IList, IMXMLObject

et:

Collection classes in Flex implement the IList interface which provides methods for modifying (adding, removing, updating) items in a collection. You can use the IList interface methods and properties directly on any of the following classes or properties: ArrayCollection class, XMLList class, and the dataProvider property of standard Flex controls. The most important methods in the IList interface are addItem(), removeItem(), and setItemAt() for adding, removing, and updating data items, respectively. There are also addItemAt() and removeItemAt() methods, which, like the setItemAt() method, take a second parameter that corresponds to the index in the collection that you want to affect. The length property exposed by the IList interface returns the number of items in a collection.

Conclusion:

Code :

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

1
2
3
4
// On ajoute la sélection à la liste de sélections.
// "item" ressemble à "<theme name="Theme B1" interested="no"/>"
item.@categorie = XML(__treeSelector.selectedItem).parent().@name;
(__listSlector.dataProvider as IList).addItem(item);

A+