Discussion :

[WinNew]

Bonjour à tous,

Je sollicite votre aide, car cela fait trois jours que je suis bloqué sur un problème. J'ai l'impression d'appliquer la documentation, ainsi que les documents glanés sur le WEB, mais je ne parviens pas à atteindre mon objectif.

Mon objectif est le suivant : Je désire envoyer un évènement à un ensemble de composants.

Après avoir lu la littérature qui traite de ce sujet, j'ai procédé de la façon suivante :

• J'ai créé une classe qui implémente un évènement "sur mesure" (qui hérite de la classe "flash.events.Event"). Je signale que cette classe écrase la méthode "clone()" (paraît que c'est important).
• Pour envoyer l'évènement j'utilise la méthode "dispatchEvent".
• Et j'ai ajouté à tous les composants concernés par mon évènement un gestionnaire d'évènement, via la méthode "addEventListener()".

Pour illustrer mon propos, j'ai codé un petit exemple simple.

Fichier broadcast\src\broadcast.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
 
<?xml version="1.0" encoding="utf-8"?>
 
<!-- Fichier broadcast\src\broadcast.mxml -->
 
<mx:Application	xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="horizontal"
				xmlns:custom="components.*">
 
	<mx:Script>
		<![CDATA[
			import components.eventTarget;
			import actionScript.MyOwnEvent; 
 
			// Cette fonction est censée envoyer l'évènement "MyOwnEvent".
			private function ButtonEnvoyerOnClick(event:Event):void
			{
				// Le deuxième argument vaut "false". Donc, le rectangle rouge devrait disparaître.
				var ev:MyOwnEvent = new MyOwnEvent("MyOwnEvent", false, true);
				dispatchEvent(ev);
			}
 
		]]>
	</mx:Script>
 
	<!-- Je ne suis pas sûr que cette déclaration soit utile. Je ne suis pas sûr, non plus, qu'elle soit correcte.
	-->
 
	<mx:Metadata>
	[ Event( name="MyOwnEvent", type="actionScript.MyOwnEvent") ]
	</mx:Metadata>
 
	<mx:VBox>
 
		<!-- En cliquant sur ce bouton, cela devrait envoyer l'évènement "MyOwnEvent". -->
		<mx:Button label="Envoyer" click="ButtonEnvoyerOnClick(event)"/>
 
		<!-- Ce composant a ajouté un gestionnaire d'évènement sur l'évènement "MyOwnEvent". -->
		<custom:eventTarget/>	
 
	</mx:VBox>
 
</mx:Application>

Fichier broadcast\src\components\eventTarget.mxm

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
 
<?xml version="1.0" encoding="utf-8"?>
 
<!-- Fichier broadcast\src\components\eventTarget.mxm -->
 
<mx:Canvas	xmlns:mx="http://www.adobe.com/2006/mxml"
			width="100"
			height="50"
			backgroundColor="#FF0000"
			creationComplete="init()">
 
	<mx:Script>
		<![CDATA[
 
			import actionScript.MyOwnEvent; 
 
			// J'ajoute le gestionnaire d'évènement.
			private function init():void
			{
				this.addEventListener("MyOwnEvent", this.onMyOwnEvent);	
			}
 
			// Le composant devrait disparaître ou apparaître.
			private function onMyOwnEvent(event:MyOwnEvent):void
			{
				if (event.getVisibility()) { this.visible = true; } else { this.visible = false; } 
			}
		]]>
	</mx:Script>
 
	<mx:Label text="Composant cible"/>
 
</mx:Canvas>

Fichier broadcast\src\actionScript\MyOwnEvent.as

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
 
// Fichier broadcast\src\actionScript\MyOwnEvent.as
// Ici, je définis mon évènement.
 
package actionScript
{
	import flash.events.Event;
 
	public class MyOwnEvent extends Event
	{
		private var __booleanVisibilty:Boolean  = new Boolean();
		private var __booleanBubbles:Boolean    = new Boolean();
		private var __booleanCancelable:Boolean = new Boolean();
		private var __stringType:String         = new String();
 
		public function MyOwnEvent(type:String, visibility:Boolean, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			__stringType        = type;
			__booleanVisibilty  = visibility;
			__booleanBubbles    = bubbles;
			__booleanCancelable = cancelable;
		}
 
		override public function clone():Event
		{
			return new MyOwnEvent(__stringType, __booleanVisibilty, __booleanBubbles, __booleanCancelable);
		}
 
		public function getVisibility():Boolean { return __booleanVisibilty; }
 
	}
}

Manifestement, l'évènement n'atteint pas sa cible.

Je suis bloqué... Quelqu'un peut-il m'aider?

Note : Le ZIP de l'exemple est joint à cette question.

Merci à tous,

Denis

[Jim_Nastiq]

c'est tout a fait normal!

tu poses ton ecouteur sur ton objet eventTarget alors que tu dispatch cet event depuis l'objet broadcast


si tu modifies ton init dans eventTarget ainsi cela devrait fonctionner:

Code :

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

1
2
 
this.parentApplication.addEventListener("MyOwnEvent", this.onMyOwnEvent);

[WinNew]

c'est tout a fait normal!

tu poses ton ecouteur sur ton objet eventTarget alors que tu dispatch cet event depuis l'objet broadcast


si tu modifies ton init dans eventTarget ainsi cela devrait fonctionner:

Code :

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

1
2
 
this.parentApplication.addEventListener("MyOwnEvent", this.onMyOwnEvent);

Merci Jim,

Je me rends compte que je n'avais pas compris le principe derrière l'utilisation des évènements.

Il ne s'agit pas seulement de déclarer un "écouteur d'évènement". Il faut l'associer à un "émetteur d'évènement".

An object that requires information about another object's events registers a listener with that object.

OK. Mais, en lisant la suite de la documentation, je ne suis pas certain de bien comprendre. Il est mentionné trois phases :

• 1. About the capturing phase
• 2. About the targeting phase
• 3. About the bubbling phase

Dans la phase "About the capturing phase", il est précisé :

This phase comprises all of the nodes from the root node to the parent of the target node. During this phase, Flash Player examines each node, starting with the root, to see if it has a listener registered to handle the event. If it does, Flash Player sets the appropriate values of the Event object and then calls that listener.

Dans la phase "About the targeting phase", il est précisé :

The second part of the event flow, the targeting phase, consists solely of the target node. Flash Player sets the appropriate values on the Event object, checks the target node for registered event listeners, and then calls those listeners. For more information, see Targeting phase.

Dans la phase "About the bubbling phase", il est précisé :

The third part of the event flow, the bubbling phase, comprises all of the nodes from the target node's parent to the root node. Starting with the target node's parent, Flash Player sets the appropriate values on the Event object and then calls event listeners on each of these nodes. Flash Player stops after calling any listeners on the root node. For more information about the bubbling phase, see Bubbling phase.

En lisant cette documentation, je comprends qu'il y a des gestionnaires d'évènements qui sont appelés deux fois :

• Une fois dans la phase de "descente" depuis le noeud "roor" vers le noeud "target".
• Une fois dans la phase de "remontée" depuis le noeud "target" vers le noeud "root".

Si j'interprète bien la documentation, je me demande bien pourquoi l'interpréteur s'amuse à "descendre" pour "remonter" ensuite.

Je dois certainement mal comprendre.

As-tu une explication?

Merci,

Denis

[WinNew]

Salut,

Le problème étant résolu, je dépose le code corrigé qui illustre le principe d'utilisation des évènements. On ne sait jamais, cela peut aider de futurs utilisateurs qui se poseraient la même question.

Tags: flex, ActionScript 3, Evénement, Custom Event

Cet exemple illustre l'utilisation des évènements "personnalisés" (custom event).

broadcast\src\broadcast.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
 
<?xml version="1.0" encoding="utf-8"?>
 
<!-- Fichier broadcast\src\broadcast.mxml -->
 
<mx:Application	xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="horizontal"
				xmlns:custom="components.*"
				creationComplete="init()">
 
	<mx:Script>
		<![CDATA[
			import components.eventTarget;
			import actionScript.MyOwnEvent; 
 
			static private var toggle:Boolean = new Boolean(true);
 
			// Cette fonction est censée envoyer l'évènement "MyOwnEvent".
			private function ButtonEnvoyerOnClick(event:Event):void
			{
				toggle = !toggle;
				var ev:MyOwnEvent = new MyOwnEvent("MyOwnEvent", toggle, true);
				dispatchEvent(ev);
			}
 
			// Un associe un écouteur d'évènement.
			// DOC: An object that requires information about another object's events registers a listener with that object.
			private function init():void
			{
				ghost.parentApplication.addEventListener("MyOwnEvent", ghostOnMyOwnEvent);
			}
 
			private function ghostOnMyOwnEvent(event:MyOwnEvent):void
			{
				ghost.visible = event.getVisibility();
			}
 
		]]>
	</mx:Script>
 
	<!-- Je ne suis pas sûr que cette déclaration soit utile. Je ne suis pas sûr, non plus, qu'elle soit correcte.
	-->
 
	<mx:Metadata>
	[ Event( name="MyOwnEvent", type="actionScript.MyOwnEvent") ]
	</mx:Metadata>
 
	<mx:VBox>
 
		<!-- En cliquant sur ce bouton, cela devrait envoyer l'évènement "MyOwnEvent". -->
		<mx:Button label="Envoyer" click="ButtonEnvoyerOnClick(event)"/>
 
		<!-- Ce composant a ajouté un gestionnaire d'évènement sur l'évènement "MyOwnEvent". -->
		<custom:eventTarget/>
 
		<!-- Ce composant a associé un écouteur d'évènement sur l'évènement "MyOwnEvent". -->
 		<mx:Label id="ghost" text="ghost"/>
 
	</mx:VBox>
 
</mx:Application>

broadcast\src\components\eventTarget.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
 
<?xml version="1.0" encoding="utf-8"?>
 
<!-- Fichier broadcast\src\components\eventTarget.mxml -->
 
<mx:Canvas	xmlns:mx="http://www.adobe.com/2006/mxml"
			width="100"
			height="50"
			backgroundColor="#FF0000"
			creationComplete="init()">
 
	<mx:Script>
		<![CDATA[
 
			import actionScript.MyOwnEvent; 
 
			// On associe un écouteur d'évènement.
			// DOC: An object that requires information about another object's events registers a listener with that object.
			private function init():void
			{
				this.parentApplication.addEventListener("MyOwnEvent", this.onMyOwnEvent);
			}
 
			// Le composant devrait disparaître ou apparaître.
			private function onMyOwnEvent(event:MyOwnEvent):void
			{
				if (event.getVisibility()) { this.visible = true; } else { this.visible = false; } 
			}
		]]>
	</mx:Script>
 
	<mx:Label text="Composant cible"/>
 
</mx:Canvas>

broadcast\src\actionScript\MyOwnEvent.as

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
 
// Fichier broadcast\src\actionScript\MyOwnEvent.as
// Ici, je définis mon évènement.
 
package actionScript
{
	import flash.events.Event;
 
	public class MyOwnEvent extends Event
	{
		private var __booleanVisibilty:Boolean  = new Boolean();
		private var __booleanBubbles:Boolean    = new Boolean();
		private var __booleanCancelable:Boolean = new Boolean();
		private var __stringType:String         = new String();
 
		public function MyOwnEvent(type:String, visibility:Boolean, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			__stringType        = type;
			__booleanVisibilty  = visibility;
			__booleanBubbles    = bubbles;
			__booleanCancelable = cancelable;
		}
 
		override public function clone():Event
		{
			return new MyOwnEvent(__stringType, __booleanVisibilty, __booleanBubbles, __booleanCancelable);
		}
 
		public function getVisibility():Boolean { return __booleanVisibilty; }
	}
}

A+, Denis