Pour ceux qui seraient encore un peu dans le flou concernant les événements, je recommande les articles d'ekameleon et de starmonkey à ce sujet ! Sinon, voici un petit rappel du fonctionnement du concept Bubble Event : Bubble Event

Afin de pouvoir générer un événement qui puisse utiliser ce mode de fonctionnement, il est impératif que la classe générant l'événement hérite de flash.display.Sprite ! Sans cela, ça ne fonctionnera pas... Une fois cette "contrainte" mise en place, le reste est assez simple. Il suffira de mettre l'argument bubbles à true :)

Mon exemple ci-dessous se décompose en 3 parties :

  • La classe Main qui exécute le programme.
  • La classe SpecialBubbleEvent qui permet d'envoyer des données quelconques (foo et bar) aux écouteurs.
  • La classe SpecialEventGenerator qui, comme son nom l'indique, va générer un événement de type SpecialBubbleEvent.

Concernant l'architecture, rien de spécial :

  • Un Sprite superContainer sur le Stage.
  • Un Sprite subContainer dans le superContainer.
  • Un SpecialEventGenerator (nommé generator) dans le subContainer.

Une fois les Sprite mis en place, j'enregistre mes écouteurs :

//capture phase
subContainer.addEventListener(SpecialBubbleEvent.SPECIAL_BUBBLE_EVENT, listener, true);
superContainer.addEventListener(SpecialBubbleEvent.SPECIAL_BUBBLE_EVENT, listener, true);
 
//at target
generator.addEventListener(SpecialBubbleEvent.SPECIAL_BUBBLE_EVENT, listener);
 
//bubble phase
subContainer.addEventListener(SpecialBubbleEvent.SPECIAL_BUBBLE_EVENT, listener);
superContainer.addEventListener(SpecialBubbleEvent.SPECIAL_BUBBLE_EVENT, listener);

Ma méthode listener va donc écouter les événements en phase "capture" (ciblage du clip), puis en phase "bubbling" (en remontant au Stage).

Viennent ensuite la création et la propagation événementielle. C'est la méthode generateEvent qui se trouve dans la classe SpecialEventGenerator :

public function generateEvent(bubbles:Boolean, foo:String, bar:int):void
{
    //generate the event with the specified values
    var evt:SpecialBubbleEvent = new SpecialBubbleEvent(SpecialBubbleEvent.SPECIAL_BUBBLE_EVENT, bubbles, foo, bar);
    dispatchEvent(evt);
}

Au final je lance deux événements pour observer le comportement en appelant la méthode generateEvent :

generator.generateEvent(true, "FistEvent", 1234); //mode BUBBLE
generator.generateEvent(false, "SecondEvent", 5678); //mode SIMPLE

En ajoutant quelques fioritures, cela nous donne la sortie suivante :

[actionscript]

----------- BUBBLE EVENT -----------
Current target : SuperContainer (phase=1 - FistEvent, 1234)
Current target : SubContainer (phase=1 - FistEvent, 1234)
Current target : Generator (phase=2 - FistEvent, 1234)
Current target : SubContainer (phase=3 - FistEvent, 1234)
Current target : SuperContainer (phase=3 - FistEvent, 1234)


----------- SIMPLE EVENT -----------
Current target : SuperContainer (phase=1 - SecondEvent, 5678)
Current target : SubContainer (phase=1 - SecondEvent, 5678)
Current target : Generator (phase=2 - SecondEvent, 5678)

Il est intéressant de noter que dans les deux cas, la phase de "capture" est effectuée !

Voila pour la démo. Je m'intéresserai dans un futur article aux événements dits 'cancelable' (dont on peut stopper la propagation). En attendant, vous trouverez les sources de la démo dans les annexes du billet !