Discussion :

[ouaqa]

Bonjour à tous,

Cela fait quelques temps que je suis coincé par un problème mystérieux. N'ayant trouvé aucune documentation, je vous soumet mon soucis :

J'ai un popup (un Panel) composé d'un Canvas, contenant une image, prenant une toute petite partie du Canvas.

Le canvas doit pouvoir recevoir certains objets issus d'un drag&drop, et l'image aussi.

Ces deux objets ont donc des écouteurs spécifiques sur les évenements DragEvent.DRAG_ENTER et DragEvent.DRAG_DROP.

Jusque là, rien de particulier. Mon problème est qu'en fait les évènements liés au drag&drop ne sont activés que sur l'image contenue dans le canvas. Cependant, ce sont les bonnes méthodes qui sont appelées.

Comme un bout de code vaut mieux que des explications confuses, voici ce qui compose mon problème :

Le popup (ATTitleButtonPanel est un panel bidouillé pour avoir un bouton dans la zone de titre) :

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"?>
<ATTitleButtonPanel 
	xmlns="com.ATImprovedComponents.*" 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	width="100%"
	height="100%"
	title="tags de la sonde">
 
	<mx:Canvas id="pane_ProbeTagsView" 
		width="100%" 
		height="100%" 
		minWidth="200"
		minHeight="50"
		horizontalScrollPolicy="off">
 
		<mx:Image id="probeTagsBin" 
			width="20" 
			height="20"   
			right="0" 
			bottom="0">
			<mx:source>logos/recycle43.gif</mx:source>
		</mx:Image>
	</mx:Canvas>
</ATTitleButtonPanel>

L'ajout des écouteurs (probePopup est mon composant de popup en question) :

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
 
private function createProbeTagPopup (AEvent : MouseEvent) : void
{
	PopUpManager.addPopUp(this.probePopup ,Application.application.MODEView_canvas) ;
 
	this.probePopup.btnClose.addEventListener(MouseEvent.CLICK , onProbeBtnCloseClick);
 
	this.probePopup.pane_ProbeTagsView.addEventListener(DragEvent.DRAG_DROP , probeDropHandler); 
	this.probePopup.pane_ProbeTagsView.addEventListener(DragEvent.DRAG_ENTER , probeEnterHandler);
 
	this.probePopup.probeTagsBin.addEventListener(MouseEvent.CLICK,resetProbeActivePropertiesOnEvent);
	this.probePopup.probeTagsBin.addEventListener(DragEvent.DRAG_DROP , View.pane_ProbeTagsView.dropOntoBinHandler);
	this.probePopup.probeTagsBin.addEventListener(DragEvent.DRAG_ENTER , View.pane_ProbeTagsView.dragEnterBinHandler) ;	
 
	this.probePopup.x = this.probeZone.x + 50 ;
	this.probePopup.y = this.probeZone.y + 150 ;
}

Donc ma méthode "probeEnterHandler" n'est déclenchée que lorsque je passe la souris sur l'objet probeTagsBin.
Si j'élimine probeTagBin du composant, alors aucun évènement n'est déclenché.

Voici enfin, la fameuse methode "probeEnterHandler" sensée être déclenchée lors de l'entrée dans le canvas (ce bout de code n'est pas de moi).

Code :

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

1
2
3
4
5
6
7
8
 
public static function probeEnterHandler(event:DragEvent):void 
{
	if (/**EMA 14 oct ...**/ 
		event.dragSource.hasFormat("image")&& AllVariables.draggedObject!="atom_pane_NewIndexableAtoms"
		/**...EMA 14 oct **/
		||	event.dragSource.hasFormat("draggedProperties"))
		{ DragManager.acceptDragDrop(UIComponent(event.target)); }

En effectuant une trace, je peut constater que event.target (et event.currentTarget) pointe bien sur mon objet canvas (pane_ProbeTagsView)


Voila, ce n'est pas la première fois que je fais des actions de drag&drop dans des Canvas et je n'ai jamais eu ce genre de problèmes.

Si quelqu'un à une piste, je suis à votre écoute.

Merci d'avance.

[ouaqa]

Je rajouterais qu'après 2-3 test sans espoir, j'ai obtenu des résultats surprenant :

Si je définis une couleur de fond à mon canvas, le drag&drop fonctionne correctement : l'événement DragEvent.DRAG_ENTER est dispatché lors de l'entrée de la souris dans le Canvas.

Et encore mieux : Si je définis une bordure de 10px autour de mon canvas, l'événement DragEvent.DRAG_ENTER est dispatché lorsque la souris se promène dans le cadre du Canvas.

Donc maintenant, je songe à poser une patte de poulet et un cierge à côté de l'écran, ça devrais marcher aussi ...

[Pragmateek]

Le drop ne fonctionne pas si le canvas a un background transparent, ce qui est le cas par défaut; il faut indiquer explicitement une couleur.

[ouaqa]

merci de la confirmation seriousme.

Aurais-tu un lien qui explique le pourquoi de cette règle ?
Il me semble qu'on pourrais avoir des situation où l'on veut avoir un canvas transparent et quand même effectuer du drag&drop.

Du coup, est-ce possible de définir une couleur mais un alpha à 0 et quand même faire du drag&drop ?

Merci en tout cas, problem solved

[Pragmateek]

Aurais-tu un lien qui explique le pourquoi de cette règle ?

http://livedocs.adobe.com/flex/3/htm...ragdrop_7.html :

Otherwise, the background color of the container is transparent, and the Drag and Drop Manager is unable to detect that the mouse pointer is on a possible drop target

Du coup, est-ce possible de définir une couleur mais un alpha à 0 et quand même faire du drag&drop ?

A priori oui, par exemple en utilisant la propriété backgroundAlpha.

[ouaqa]

Ok, merci pour les infos.

C'est fou, j'avais déjà épluché cette page 1000 fois.
On mettra ça sur le compte des peaux de saucisson dans les yeux ...