Event Central caveats

2009-11-16T10:17:00.000-08:00

by Ingo Gsedl

11/2009

This article refers to the previous blog 'Event Central'.

After implementing Event Cetnral in a larger application I came up with a few points to keep in mind.

1. Know your events

It is easy to lose track of all the events you send through Event Central.

Solution: keep a list.

Tip: In Event Central I have a section in the format of commenting. It contains a list of all events, with sender and recipient, ordered alphabetically. I am using the following format:

/**

...

classNameEvent

sent by package::className

received by package::className

...

**/

This prevents doublettes.

2.Filter your recipients

When a class has many incidents and the class dispatches events and/or listens for events, dispatching doesn't create a problem - only the one incident sends an event. But a class listening for an event coming from Event Central listens for it in every instance, which may create unwanted processor load.

Example: Event Central dispatches the event 'classNameUpdate' and the class 'Example' listens to it and when the event occurs, 'Example' updates a list. Let's say, there are n instances of 'Example', but the 'update' event is only meant for one instance. If unchecked, the 'update' action is triggered in all instances.

Solution 1: if there is a direct parent-child relation between dispatcher and recipient, do not use Event Central, instead use eventDispatch directly, which allows to identify the target.

Solution 2: when I instantiate the 'Example' class, I give it a unique variable ID:int. In my model class ( in a 'model-view-controller' design pattern the model holds the data ) I have a variable I call currentID:int, which always knows which instance I am currently working on. When I dispatch an event to all instances, all I have to do is make sure that this.ID==currentID before the specific instance reacts to the event.

Event Central

2009-10-01T16:48:00.000-07:00

by Ingo Gsedl

10/2009

Vision:
Find a simple solution to dispatch events between components in a large project.

Description:
I wanted to be able to send a custom event in the form of

dispatchEvent(new Event("eventString"));

between two not closely related components.
My goal was to circumvent all bubbling, to be able to fire the event from any component and listen for it anywhere in the project.

Requirements:
Read this article http://flex.sys-con.com/node/114245 by Danny Patterson on singletons in Flash.
A singleton is a design pattern used in object oriented programming (like Flash and Flex) to define an object that allows only one instance of itself.
Everything else in this article is basic Flex/Flash.

Steps:
An overview:

open a new Flex project
for the purpose of this article you'll need two more components (call them 'Sender.mxml' and 'Receiver.mxml') and one actionscript class 'EventCentral.as'.
Connect Sender and Receiver to the same instance of EventCentral.
By the click of a button Sender causes EventCentral to dispatch an Event.
Receiver listens to the event and takes action when it occurs.

Do you see it already? Sender and Receiver can be anywhere in the most complex tree of display objects and still talk to each other as if their relationship would be as close as parent/child.

Details:

Start a new Flex project, call the application file what ever you like, and write the following code in it:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
   xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:local="*"
   layout="absolute" >

   
   <local:Sender x="12" y="12" />

   
   <local:Receiver x="12" y="42" />
</mx:Application>

On the same level as the application file, add a MXML Cmponent, call it Sender.mxml, and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Button label="SEND EVENT" click="sendEvent()"/>

   <mx:Script>
   <![CDATA[

   // instantiate a singleton (see article link above)
   private var evc:EventCentral=EventCentral.getInstance();

   private function sendEvent():void
   {
   evc.fire("testEvent");
   }
   ]]>
   </mx:Script>

</mx:Canvas>

Sender.mxml contains a button 'SEND EVENT'. Hitting it will call a function in EventCentral called fire(), passing a string to it. EventCentral then dispatches an event of the same name. (We will get to EventCentral in a minute).
Receiver.mxml is listening for this event:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
   creationComplete="init()">

   <mx:Label text="{labelText}"/>

   <mx:Script>
   <![CDATA[

   import mx.controls.Label;

   // instantiate singleton
   private var evc:EventCentral=EventCentral.getInstance();
   [Bindable]
   private var labelText:String="...press button."
   private var counter:int=0;

   private function init():void
   {
   setListener();
   }

   private function setListener():void
   {
   // listen to event from singleton
   evc.addEventListener("testEvent", onTestEvent);
   }

   private function onTestEvent(e:Event):void
{
   counter++;
   labelText=counter.toString()+". test event received."
   }

   ]]>
   </mx:Script>
</mx:Canvas>

EventCentral is the link between Sender and Receiver.
EventCentral is a singleton. There is always only one instance of it. When Sender writes to it, Receiver can read it. Both are talking to the same instance.
When Sender calls EventCentral's public function fire(eventString), EventCentral uses eventString to dispatch an Event by the same name.

(Tip: It's up to you to keep track of events you are using - their name, the sending and receiving components)

package{
   import mx.core.UIComponent;
   import flash.events.Event;

public class EventCentral extends UIComponent
{

   // variables for singleton instantiation
   private static var instance:EventCentral;
   private static var allowInit:Boolean;

   // singleton instantiation

   public static function getInstance():EventCentral
   {
   if (instance==null)
   {
   allowInit=true;
   instance=new EventCentral();
   allowInit=false;
   }
   return instance;

}

   public function EventCentral()
   {
   if(!allowInit)
   {
   throw new Error("Error: Instantiation of EventCentral singleton failed.");
   }
   }

   // this function takes any string and sends out an event by the same name
   public function fire(eventString:String):void
   {
   dispatchEvent(new Event(eventString));
   }
   }
}

This is a straightforward solution, decoupling event flow from the display objects structure.

Please see also the next blog about 'Event Central caveats'.It lays out a few points to be aware of when using Event Central

Blue Sky Flash

Event Central caveats

Event Central