Discussion :

[Tavarez59]

Bonjour,

Je fais appel à vous car j'ai cherché presque toute la journée à faire fonctionner la propagation d'événements d'AS3. C'est peut être une petite chose qui m'échappe car je pense avoir bien compris le principe de base mais pas moyen de propager l'événement d'un composant vers le conteneur.

Voici mon code, tout d'abord le composant tout bête qui propage l'événement:

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
 
package TTTComponents
 
{
 
	import TTTComponents.events.CreateShapeEventButtonClick;
 
	import com.adobe.coreUI.controls.whiteboardClasses.WBCanvas;
 
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.utils.ByteArray;
 
	import mx.containers.HBox;
	import mx.controls.Button;
	import mx.controls.Image;
	import mx.controls.Alert;
	import mx.core.UIComponent;
	import mx.skins.halo.HaloBorder;
 
 
	[Event(name="createShapeEventButtonClick",type="TTTComponents.events.createShapeEventButtonClick")]
 
	public class ActionsToolbar extends UIComponent
 
	{
 
		protected var _image:Image;
 
		protected var _imageByteArray:ByteArray;
 
		protected var _loader:Loader;
 
		protected var _imageFileURL:String;
 
		protected var _imageName:String;
 
		protected var _backgroundSkin:HaloBorder;
 
		protected var _titleBar:Sprite;
 
		protected var _backgroundRect:Sprite;
 
		protected var _hBoxHolder:HBox;
 
		protected var shapeID:String="";
 
		protected var canvas:WBCanvas;
 
		protected var _targetShapeID:Number;
 
		[Embed (source = '../assets/create_event_icon.png')]
 
		public static var ICON_CREATE_EVENT:Class;
 
		//Initialize the FileManager and initialize a thumb nail dialog to display the images.
 
		public function ActionsToolbar()
		{
			super();
			width = 100;
			height = 100;
 
		}
 
 
 
 
 
 
		override protected function createChildren():void
 
		{
 
			...
 
			_backgroundSkin.setActualSize(100, 300);
 
			var createEventButton:Button = new Button();
			createEventButton.width = 40;
			createEventButton.height = 40;
			createEventButton.setStyle("icon", ICON_CREATE_EVENT);
			createEventButton.x = 5;
			createEventButton.y = 5;
			createEventButton.addEventListener(MouseEvent.CLICK, onCreateEventButtonClick);
			addChild(createEventButton);
 
 
		}
 
		public function onCreateEventButtonClick(event:MouseEvent):void {
 
			dispatchEvent(new CreateShapeEventButtonClick(CreateShapeEventButtonClick.CREATE_SHAPE_EVENT_BUTTON_CLICK));
 
		}
 
 
	}
 
}

Avec l'événement perso associé:

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
 
package TTTComponents.events{
 
	import flash.events.Event;
 
	public class CreateShapeEventButtonClick extends Event{
 
 
 
		public static var CREATE_SHAPE_EVENT_BUTTON_CLICK:String = "createShapeEventButtonClick";
 
		public function CreateShapeEventButtonClick(type:String, data:Object=null){
 
			super(CREATE_SHAPE_EVENT_BUTTON_CLICK);
 
		}
 
 
 
	}
 
}

Ensuite je tente de capturer l'événement dans l'application qui a créé ce composant:

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
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:whiteBoardClasses="CoreUINameSpace.*"
	xmlns:ttt="TTTComponents.*"
	xmlns:tttevents="TTTComponents.events.*"
	layout="absolute" 
	xmlns:coreUI="CoreUINameSpace" 
	creationComplete="initWB(event)">
	<mx:Script>
 
		<![CDATA[
 
			import ...
 
			[Embed (source = '../assets/WBFileImage.png')]
 
			public static var ICON_IMAGE:Class;
 
			protected var _canvas:WBCanvas;
 
 
			protected function initWB(event:Event):void {
							board.addEventListener(CreateShapeEventButtonClick.CREATE_SHAPE_EVENT_BUTTON_CLICK, onCreateEventButtonClick);
 
				var atb:ActionsToolbar = new ActionsToolbar();
				atb.x = board.canvas.width - 50;
				atb.y = 100;
				atb.width = 100;
				atb.height = 100;
				board.addChild(atb);
 
			}
 
			public function onCreateEventButtonClick(event:Event):void {
				Alert.show("ok");
			}
 
 
 
 
		]]>
 
	</mx:Script>
	<ttt:TTTBoard id="board" width="888" height="600">
 
	</ttt:TTTBoard>
 
</mx:Application>

Mais rien à faire, ça devrait m'afficher un simple "ok" dans un Alert mais je n'ai rien.

Quelqu'un saurait-til me dire pourquoi Flex me maudit à ce point ?

Merci d'avance!

[jylaxx]

Dans la mesure où ton événement est dispatché par un enfant de l'objet sur lequel tu as ajouté un listener, il est propagé dans la phase de bubbling, c'est à dire depuis l'objet vers son parent.
Quand tu créés ton événement il faut positionner le paramètre bubbles à true.

Sinon il faut ajouter le listener sur atb et non sur board.

[Tavarez59]

Merci pour ton aide, en fait en ajoutant à atb ça fonctionne (j'avais déjà testé cette solution mais il devait y avoir une autre erreur à l'époque et ça n'avait pas marché ). Sinon je comprend pas tout à fait pour le bubbling et même si ça fonctionne sans je suis curieux de comprendre. J'ai essayé de faire ceci:

Code :

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

1
2
 
dispatchEvent(new CreateShapeEventButtonClick(CreateShapeEventButtonClick.CREATE_SHAPE_EVENT_BUTTON_CLICK, true));

Donc là j'active le bubbling. Mais si je fais juste ça, ça ne fonctionne pas.

Tu as une idée?

Merci encore car ta réponse a résolu mon problème!

[jylaxx]

Avec bubbles à true tu as mis le listener sur quel objet ?

[Tavarez59]

Désolé pour la reponse tardive mais je l'ai mis sur l'élément this

[clemoigno]

Si tu mets le listener sur ton ActionToolBar ça fonctionne puisque c'est lui génère et dispatch ton custom event.
Par contre, comme le dis jylaxx, pour catcher l'event à un niveau supérieur (ici ton objet TTTBoard), il faut dire à l'event qu'il peut remonter dans la hiérarchie et ne pas s'arrêter au premier niveau. Pour ça, tu mets bubble à true. Je te conseille dans ce cas de définir directement ton event avec la propriété bubble à true par défaut.

Code :

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

1
2
3
4
public function CreateShapeEventButtonClick(type:String, data:Object=null){
   super(CREATE_SHAPE_EVENT_BUTTON_CLICK, true);
}

Mais cela ne suffit pas car pour se passer lui-même de niveau en niveau, il va se cloner. Il faut donc que tu overrides la méthode clone() de l'objet Event dans ton custom event.

Si tu rajoutes ceci à ta classe CreateShapeEventButtonClick, je pense que ça va marcher.

Code :

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

1
2
3
4
 
override public function clone():Event {
 return new CreateShapeEventButtonClick(CREATE_SHAPE_EVENT_BUTTON_CLICK);
}

Charles.