Drag and Drop via as3

Version imprimable

16/11/2009, 12h11
supernova

Drag and Drop via as3

Bonjour le forum,

Alors voilà mon soucis.. j'ai un TabNavigator avec deux Tab, chacun d'eux contient un composant Tree : tree1 et tree2. Ce que j'aimerai c'est à la sélection d'un élément de Tree1, une opération de drag and drop soit réaliser par le code AS3, pour alimenter Tree2 qui est vide à l'origine.

Pouvez vous m'aider?;)
16/11/2009, 13h03
Jim_Nastiq

Salut,

pour l'utilisation du drag & drop en Flex il y a disons 2 façons de le faire, une très simple mais aussi limitée et une autre plus complexe mais bcp plus flexible. J'ai écrit 2 tutos sur le sujet:

Exemple simple d'utilisation du drag & drop

Gestion du drag & drop complexe avec le dragmanager

de mémoire la façon simple devrait pouvoir fonctionner pour toi, à moins que tu es des spécificités fonctionnelles.
17/11/2009, 13h44
supernova

Merci Jim_Nastiq,

Tu fais bcp pour ce forum et je t'en remercie.. j'ai lu tes tuto mais ils réalisent complètement le drag and drop..

moi ce que je voudrais c'est que lorsque on clique sur un item de tree1 (qui est alimenté par XMLListCollection) cela créer un item dans Tree2 qui est vide à l'origine..mon xml est bien formé (balise root, valide) mais rien ne s'affiche..

Ce que je comprends c'est que tu ne veux pas un drag & drop mais tu veux que les données soient transférées dans un autre composant!!!

Le drag & drop est un effet visuel qui illustre un déplacement de données par un utilisateur ; toi, tu veux que ton composant récupère les données "comme dans un drag & drop" ; c'est donc très différent. ;)

En fait il faut que tu transfère ton Modèle de données (ton item) d'une Vue (ton Tree1) à une autre Vue (ton Tree2).
Tu peux le faire depuis ton composant père (ou mère, tout dépend de ton modèle de société, mais là n'est pas la question :mouarf:) qui peut être ton Tab Navigator (le conteneur de tes 2 Tree).

à l'écoute d'un événement "change", tu peux récupérer des données de ton Tree1 pour les données à ton Tree2.

Je ne sais pas comment tu as architecturé ton applications mais tu auras à mon avis besoin de séparer tes composants en plusieurs fichiers mxml distants.
Tu peux par exemple créer un MonTree.mxml qui contient une propriété publique "mesDonnées" contenant tes données puis faire quelque chose du genre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <mx:Script> <![CDATA[ public function swapModels(event:Event):void { // C'est un exemple à toi de faire le traitement qui te convient ;) monTree2.mesDonnées = monTree1.mesDonnées } ]]> </mx:Script> <mx:TabNavigator id="monTab" change="swapModels(event)"> <Montree id="monTree1"/> <Montree id="monTree2" /> </mx:TabNavigator>
N'hésite pas à essayer de comprendre le modèle Modèle-Vue-Controlleur, cela t'aidera à progresser

Kantizbak,

merci pour avoir pris le temps de me répondre.. j'utilise Cairngorm comme MVC. En ce qui concerne la simulation du Drag and Drop, ca me paraissait une solution de façilité dans la mesure ou le Drag And Drop simple fonctionne, je compter me servir de cet artifice car je n'arrive pas à copier un item de mon tree source vers le tree destination .. voici mon code :

mxml:

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
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
<mx:Tree id="tree"
			 top="30"
			 width="280"
			 height="530"
			 cornerRadius="10"
			 borderStyle="solid"
			 labelField="@nom"
			 color="#006699"
			 selectionDisabledColor="#006699"
			 showRoot="false"
			 showScrollTips="true"
		 	 alternatingItemColors="[#FFFFFF,#cfe2f1]"
		     allowMultipleSelection="true"
		     labelFunction="treeLabel"
		     iconFunction="tree_iconFunc"
		     dataProvider="{companyConcept}"
		     itemClick="itemClick(event)"
		     itemOpen="closeOpenItems(event)"
		     textAlign="left"
			 dragEnabled="true"
			 dragStart="{tree.dragMoveEnabled = false}"
			 dragEnter="{tree.dragMoveEnabled = false}"  
		     itemRenderer="fr.cnamts.sand.flex.view.MyTreeItemRenderer"
		     />
 
	<mx:TabNavigator id="tabNav" styleName="monTabNavigator"
			   top="30"
			   left="290"
			   width="690"
			   tabEnabled="false"
			   selectedTabTextStyleName="MySelectedTab"
			   historyManagementEnabled="true"
			   >
 
 
 
                <mx:VBox id="detailCan"
                		   label="Détail"
                		   icon="{ICOdetail}"
                		   cornerRadius="10"
                		   backgroundColor="#cfe2f1"
                		   backgroundDisabledColor="#82a6b9"
                		   height="460"
                		   enabled="false"
 
                		   >
                		   <mx:DataGrid id="grilleProprietes"
                		   				width="650"
                		   				height="430"
                		   				>
                		   </mx:DataGrid>
 
                </mx:VBox>
 
                <mx:VBox id="navigationCan"
                		   label="Navigation"
                		   icon="{ICOnavigation}"
                		   cornerRadius="10"
                		   backgroundColor="#cfe2f1"
                		   backgroundDisabledColor="#82a6b9"
                		   height="460"
                		   textAlign="left"
                		   enabled="false">
 
                		   <mx:Panel title="Panier de sélection">
 
                		   <mx:Tree
                				textAlign="left"
                				width="650"
                  				id="panierListe"
                				labelField="@nom"
                				borderColor="#006699"
                				dropEnabled="true"
                				labelFunction="treeLabel"
		     					iconFunction="tree_iconFunc"
		     					contextMenu="{myContextMenu}"
         						itemRollOver="lastRollOverIndex = event.rowIndex"
		     					/>
                			<mx:Button label="Calcul des navigations possibles" click="traceRoute()"/>	
                			 </mx:Panel>
                			<mx:Panel title="Navigations possibles" width="660">
                			<mx:Label text="Requêtes de proximité" styleName="etiquette" />
                			<mx:Tree 
                				textAlign="left"
                				width="650"
                				id="treeNavigationProximite"
                				labelField="@nom"
					     	    showRoot="false"
					     	    labelFunction="treeLabelNavigation" 
					     	    iconFunction="tree_iconFuncNavigation"
				   				/>
				   			<mx:Label styleName="etiquette"  width="650"  text="Requêtes complexes"/>
 
				   			<mx:AdvancedDataGrid  id="dgRequetesComplexes"
                		   				 		  alternatingItemColors="[#FFFFFF,#cfe2f1]"
                		   				 		  color="#006699"
                		   				 		  width="650"
                		   				 		  showScrollTips="true">
        							<mx:columns>
            							<mx:AdvancedDataGridColumn wordWrap="true" width="120" headerText="Requete" dataField="libelle"/>
            							<mx:AdvancedDataGridColumn wordWrap="true" width="430" headerText="Description" dataField="description"/>
            							<mx:AdvancedDataGridColumn textAlign="center" width="100" wordWrap="true" headerText="Action" itemRenderer="fr.cnamts.sand.flex.view.dgRenderer"/>
                					</mx:columns>
                			</mx:AdvancedDataGrid>
 
 
                		   </mx:Panel>
    				</mx:VBox>
         </mx:TabNavigator>
 
 </mx:Panel>

code AS3:

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
//click sur un élément de l'arbre de l'explorateur
            public function itemClick(evt:ListEvent):void{
            	var item:Object = evt.currentTarget.selectedItem;
 
                var nonSelectable:Boolean = ((item.hasOwnProperty("@clickable")) && (item.(@clickable == "false")));
                if (nonSelectable) {
                	instanceSel = new InstanceSelectionVO();
	                instanceSel.id_instanceSel = null;
	                instanceSel.libelle = null;
	                instanceSel.id_conceptSel = item.@id;
	                instanceSel.conceptParent = item.@nom;
                	traitementClickConcept(instanceSel);
                    tree.selectedItem = null;
                }
                else {
 
					//mise en place du panier de sélection
					tabNav.selectedIndex = 1;
					var dragInitiator:Tree = Tree(evt.currentTarget);
					var ds:DragSource = new DragSource();
					var strFlux:String = "<metamodele>";
					strFlux = strFlux + "<node libelle='" + item.@libelle;
		            strFlux = strFlux + "' cleParent='" + item.@cleParent;
		            strFlux = strFlux + "' parent='" + item.@parent;
		            strFlux = strFlux + "' nom='" + item.@libelle;
		            strFlux = strFlux + "' id='" + item.@id +"'/>";
		            strFlux = strFlux + "</metamodele>";
		            var xmlC:XML = new XML(strFlux);
		            var listeXML:XMLList = new XMLList(xmlC);
		            var tabInit:XMLListCollection = new XMLListCollection(listeXML);
					var evtMouse:MouseEvent = new MouseEvent("Click");
					//DragManager.doDrag(dragInitiator, ds, evtMouse, tabInit, 100, 100);
					//DragManager.acceptDragDrop(panierListe);

En fait, tout simplement en cliquant sur un item de tree1.. je voudrais qu'il se réplique dans Tree2.. mais je ne sais pas ca cafouille avec le xml.. il es pourtant valide et bien formé mais rien ne s'affiche..:aie:

ah.. j'oubliais.. mon tree source est conditionné par ItemRenderer :

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
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
 
 public class MyTreeItemRenderer extends TreeItemRenderer   {
 
         public function MyTreeItemRenderer() {
                       super();
         }
 
 
         private var rootIcon:Image;
         private var chargeIcon:Image;
 
 
 
		//click sur icone pour recharger les données du concept
         public function chargeToutClick(event:MouseEvent):void  {
                     var e : TreeEvent = new TreeEvent(this.label.text, true, true, null, null, null);
                     dispatchEvent(e);
                     /*
                       if (this.parent.contains(this)) {
                            this.parent.removeChild(this);
                       }
                     */
          }
 
		  //Affiche le composant
          override protected function createChildren():void {
          	       super.createChildren();
          	       chargeIcon = new Image();
          	       chargeIcon.source="assets/images/x1.jpg";
          	       chargeIcon.toolTip = "reload";
          	       rootIcon = new Image();
          	       chargeIcon.addEventListener(MouseEvent.CLICK, this.chargeToutClick);
          	       this.addChild(rootIcon);
          	       this.addChild(chargeIcon);
            }
 
 
			//paramétrage des nodes
           override public function set data(value:Object):void {
           	    super.data = value;
           	    var node:XML = XML(TreeListData(super.listData).item);
           	    var chaineRecherche:String = null;
 
           	    if (node.localName() == "concept") {
				 	chaineRecherche = ".....";
				}
				else {
				 	chaineRecherche = node.@parent.toString();
				}
 
 
			 	 switch (chaineRecherche) {
 
			 	 	case "....":
			 	 		[Embed("..")]
			 	 		 var iconClass:Class;
            		     setStyle("textDecoration","normal");
          	             setStyle("color","#006699");
			 	 		 break;
 
			 	 	case "..":
			 	 		  [Embed("..")]
			 	 		  var iconClass:Class;
            	          setStyle("color","#006699");
			 	 		  break;
 
			 	 	case "..":
			 	 	      [Embed("..")]
			 	 	      var iconClass:Class;
            	          setStyle("color","#006699");
			 	 		  break;
 
			 	 	case "..":
			 	 	      [Embed("..")]
			 	 	      var iconClass:Class;
            	          setStyle("color","#006699");
			 	 		  break;
 
			 	 	case "..":
			 	 	      [Embed("..")]
			 	 	      var iconClass:Class;
            		      setStyle("fontWeight", 'bold');
	           	          setStyle("color","#006699");
			 	 		  break;
			 	 	 }
		   }
 
           override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
 
           	        var treeListData:TreeListData=TreeListData(listData);
           	        super.updateDisplayList(unscaledWidth,unscaledHeight);
           	        icon.visible=true;
 
           	        if(treeListData.hasChildren) {
           	        	   var tmp:XMLList = new XMLList(treeListData.item);
           	        	   var myStr:int = tmp[0].children().length(); 
           	        	   super.label.text = 
						   treeListData.label + " (" + myStr + ")"; 
           	        	   rootIcon.source="..";
           	        	   // Image Properties
		           	       chargeIcon.source="assets/images/recharger.jpg";
	           	           // Position
		           	       //rootIcon.x = label.x -2;
		           	       //label.x = rootIcon.x + 40;
		           	       //label.y = label.y + 5;
		           	       chargeIcon.visible=true;
		           	       chargeIcon.width=20;
						   chargeIcon.height=20;
 						   chargeIcon.x=label.textWidth+label.x+5; 
 
 
           	         }
           	         else {
           	         	   this.setStyle("fontWeight","normal");
           	         	   rootIcon.source="....";
           	         	   chargeIcon.visible=false;
           	         }
 
                }
 
 
 
 }
}

17/11/2009, 17h12
Kantizbak

Je jèterai un coup d'œil mais sache que Cairngorm est un micro framework pour communiquer avec un serveur et pas franchement le meilleur exemple de modèle MVC... Flex en a déjà un qu'il faut comprendre...

J'ai une question simple : où sont les modèles de tes Tree ?

tree1 est alimenter par un XMLListCollection comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
fluxXML = "<structure>";
fluxXML = fluxXML + "<element  info1='" + obj.info1 + "' ";
fluxXML = fluxXML + "info2='" + obj.info2 + "' ";
fluxXML = fluxXML + "info3='" + obj.info3 + "' ";
fluxXML = fluxXML + "info4='" + obj.info4 + "'>";
fluxXML = fluxXML + "</structure>";	
              			 	   			 var xml:XML = new XML(fluxXML);
var xmlList:XMLList = new XMLList(xml);
var col:XMLListCollection = new XMLListCollection(xmlList);
tree1.dataprovider = col;

tree2 accept un drag and drop de cette structure mais je n'arrive pas avec un click sur un item de tree1 à copier un élément dans tree2..

merci pour ta patience..

18/11/2009, 11h23
Kantizbak

Tu peux donner la suite du code sur le drop de tes données dans ton tree2 ?:P

Avec toutes les infos, ce sera plus facile de comprendre ! :mrgreen:
18/11/2009, 12h43
supernova
sur tree1 (source) :
Code:

1 2 3 dragEnabled="true" dragStart="{tree.dragMoveEnabled = false}" dragEnter="{tree.dragMoveEnabled = false}"
sur tree2 (destination):

Code:

dropEnabled="true"

le drag & drop fonctionne, et l'élément s'affiche.. mais comment faire en AS3 pour faire l'équivalent..

merci de ton aide..
18/11/2009, 13h17
Jim_Nastiq

J'ai perdu un peu le fil ... tu arrives à obtenir ce que tu souhaites avec les propriétés dragEnable, dragStart et cie (cf ton dernier post) mais tu souhaites le faire en AS3 , c'est bien ca ?
quand tu dis "en AS3" c'est à dire que tu veux affecter ces propriétés en AS3 plutôt qu'en MXML ou bien que tu souhaites reproduire le fonctionnement produit par la modification de ces propriétés?
Dans le 2eme cas: pourquoi vouloir reproduire ce qui existe déjà de façon simple ?
18/11/2009, 13h35
supernova

tu as raison à ce stade, je me dois d'expliquer mon application. En fait il s'agit du fonctionnement d'un panier.

Un arbre (tree1) permet de faire son "marché" pour alimenter un deuxième arbre (tree2) qui mémorise les sélections. L'initialisation du panier se fait la première fois en cliquant sur un des items de Tree1. (c'est ce que je n'arrive pas à faire, pas de plantage mais tree2 n'affiche rien) et ensuite le consultant fait des drag and drop pour compléter le panier (là le drag & drop simple fonctionne et alimente bien Tree2)..

Pardon pour ces explications tardives mais je tatonne et je m'éparpille par conséquent..

En espérant avoir été clair..

Alors si je comprends bien le problème survient lors du click sur un item du tree source?

tu as une init de ce genre (cf ton post plus haut):
Code:

1 2 3 4 5 6 7 8 9 10 fluxXML = "<structure>"; fluxXML = fluxXML + "<element info1='" + obj.info1 + "' "; fluxXML = fluxXML + "info2='" + obj.info2 + "' "; fluxXML = fluxXML + "info3='" + obj.info3 + "' "; fluxXML = fluxXML + "info4='" + obj.info4 + "'>"; fluxXML = fluxXML + "</structure>"; var xml:XML = new XML(fluxXML); var xmlList:XMLList = new XMLList(xml); var col:XMLListCollection = new XMLListCollection(xmlList); tree1.dataprovider = col;
Si j'ai bien compris au click sur un item tu as un handler qui génère un XML et le fournit en tant que dataProvider à ton tree2, n'est ce pas ?
Et le problème c'est que rien ne s'affiche alors qu'en mode debug tu as bien validé le format du dataProvider de ton tree2, n'est ce pas ?

18/11/2009, 16h49
supernova

je construit un flux xml sur la base de ce que je récupère sur mon évenement ListEvent de mon tree1 et j'essai de le passer à Tree2 sans succès..
18/11/2009, 17h44
Jim_Nastiq

Citation:

Envoyé par supernova

je construit un flux xml sur la base de ce que je récupère sur mon évenement ListEvent de mon tree1 et j'essai de le passer à Tree2 sans succès..

ca veut dire oui pour les 2 questions que j'ai posées ?:D
19/11/2009, 08h18
supernova

oui absolument..:roll:
19/11/2009, 10h21
Jim_Nastiq

Bon pour que l'on prenne de bonne base et les plus simples possible, je te propose que de créer un nouveau projet sous Flex builder qui synthétise ton problème, tu reproduit juste le fonctionnement de drag & drop de tes 2 tree tu t'abstraies de tout le reste de ton application.
ensuite tu fait un export de ton projet au format archive zip et tu le post ici, je le charge et ainsi on pourra échanger bcp plus efficacement, ca te vas?