Flex terminating event flow example

In the example below, how to terminate an event flow is demonstrated. With this example the motive of previous event phase detecting example as well as a new flex feature zooming components are also demonstrated. Now in the example several pop-up alert windows are set to open with the mouse click events on the flex controls and containers.

A mouse click event on button control b1 inside the title window pop-ups two to three alert windows. Two method statements as arguments are passed in two different event handlers to stop the event propagation. You have to just remove the slashes and see the methods working. Methods stop the event object on moving to next node or task, here the task defined is to switch the listeners containing .show method of alert class. For doing this job either of the below mentioned methods can be used. stopPropagation()

stopImmediatePropagation()

Terminator.mxml


<?xml version = '1.0' encoding = 'ISO-8859-1'?>

<mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >

  <mx:Script>

  import mx.controls.*;

  

  public function eventListener(event:Event):void{

  b1.addEventListener(MouseEvent.CLICK, alert1);

  

  }

  

  public function alert1(neo:Event):void{

  Alert.show('Event object : neo' + '\nPhase :' 

  +  neo.eventPhase);

  //  neo.stopPropagation();

  }

  

  public function alert2(trinity:Event):void{

 

  Alert.show('Event object : trinity' + '\nPhase :' 

  +  trinity.eventPhase);

  //trinity.stopImmediatePropagation();

  }

  

  

  

  </mx:Script>

  

  <mx:Style>

 .mind {color : green}

  Button {font-size : 10pt}

  </mx:Style>

  <mx:Zoom id = 'zoom' zoomHeightFrom = '5' zoomHeightTo = '0.9' 

  zoomWidthFrom = '6'  zoomWidthTo = '0.99' targets 

  = '{[tw],[b1],[canvas]}'/>  

  <mx:TitleWindow id = 'tw' title = 'Title Window' showCloseButton 

  = 'true' width = '40%' height = '30%' click 

  = 'zoom.play()'>  

  

  <mx:Canvas id = 'canvas' width = '100%' height = '100%' 

  backgroundColor = '#800080' click 

  = 'zoom.play();alert1(event)'>

  <mx:Button id = 'b1' x = '150' y = '75' label = 'Canvas
    child' 

  styleName = 'mind' click = 'alert1(event); 

  alert2(event)'/>

  </mx:Canvas>

  </mx:TitleWindow>

</mx:Application>

Terminator.swf

Download the code

Flex terminating event flow example

Flex terminating event flow example

Flex terminating event flow example

Tutorials