Discussion :

[supernova]

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?

[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.

[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..

[Kantizbak]

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 ) 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 :

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
 
 
<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

[supernova]

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 :

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
<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 :

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
//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..

[supernova]

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

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
 
 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;
           	         }
 
                }
 
 
 
 }
}

[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 ?

[supernova]

tree1 est alimenter par un XMLListCollection comme suit :

Code :

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

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..

[Kantizbak]

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

Avec toutes les infos, ce sera plus facile de comprendre !

[supernova]

sur tree1 (source) :

Code :

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

1
2
3
dragEnabled="true"
dragStart="{tree.dragMoveEnabled = false}"
dragEnter="{tree.dragMoveEnabled = false}"

sur tree2 (destination):

Code :

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

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..