Link to home
Start Free TrialLog in
Avatar of mokatell
mokatell

asked on

flex - dispatch event vs event listener

dear experts ,
i want to know what is the difference between using the event dispatch and event listener or call function ??
for example :

when i click save button :
if ( tabBar.selectedItem == "Project Information" )
dispatchEvent(new Event("saveProjectInfo"));

OR

when i click save button :

btn.addEventListener (MouseEvent,Click , callSaveFunction )
if ( tabBar.selectedItem == "Project Information" )
call save function .....

in both cases the results are THE SAME , i wanna know the real difference with examples if possible ....
Avatar of dgofman
dgofman
Flag of United States of America image

In most cases better to call a function , but when you need to execute multiple functions at same time or avoidind declaring explicit  references in this case event dispatching is very powerful implementation
Avatar of mokatell
mokatell

ASKER

aha ok ... i have a tab bar with five header and eac header has its own data  if i have to call five save functions .and i want to execute them all at the same time ... it is  better use to dispatcher instead of functions ?!!!

if yes ... could it be in the following way :

dispatch ( new Event("abc"));
dispatch ( new Event("xyz"));
dispatch ( new Event("ghj"));
Most of action done while we use a GUI generate events, for example click a button generate an event, typing on keyboard generates events too and so on, these kind of
A programmer have got the possibility to create new Events customized to its own needs for example checking a form if  it's not filled right an customized event can signal it and this kind of event must be dispatched.
So using addEventListener function the program waits for something is going to happen, dispatchEvent function make something happen.
To garantee that to an event correspond an action one or more listeners must be already attached to the eventDispatcher object is going to dispatch that event, in fact is possible to have more than one eventDispatcher objects into an application.

Now i pass to your effective question, if i understand well you want to synch the execution of 5 functions you can easily do it using just a dispatchEvent(new Event("abc")); paying attention you previously added 5 listener, one for every function, and all them are plugged on the same object, the one you use to dispatch.
This is a pseudo-code of what i mean
ed:EventDispatcher=new EventDispatcher();// this ensure the object is the same for listening and dispatching
ed.addEventListener(YourEvent.String,function1);
ed.addEventListener(YourEvent.String,function2);
ed.addEventListener(YourEvent.String,function3);
ed.addEventListener(YourEvent.String,function4);
ed.addEventListener(YourEvent.String,function5);
ed.dispatch(new YourEvent(YourEvent.String));

Open in new window

I hope this is useful, play a bit with this and i think you will learn easily how to use dispatching and listening.
I will suggect to create one event listener by some type like

addEventListener("ABC", fucHandler);

now every time when you will dispatch this event type you need just check a target who execute this class

button1.dispatchEvent(new Event("ABC"));
button2.dispatchEvent(new Event("ABC"));
button3.dispatchEvent(new Event("ABC"));
button4.dispatchEvent(new Event("ABC"));

now in the function handler you can get instance id

fucHandler(event:Event):void{
   trace(event.target.id);
}
thanks for your answers ...
@ puzzle it ... you have said for example if i wanna check  a form is filled or not , in this case i have to make a custom event !!

but i was wondering why cant can i use a regular event listener and check if it filled or not before i save the data ,,,,, this is the part which is confusing me alot ... !!

You can but let me give you use case when you should use EventDispatcher implementation
Let believer you have 2 MX Views.
In the first view you have a function
public function saveView1():void
And other
public function saveView2():void
Now in the main Application your implemented  ViewStack and attached these views
<mx:ViewStack id=”vs”>
    <local:View1/>
    <local:View2/>
</mx:ViewStack>
As you may know you can get instance of current view by using vs.selectedChild, but to execute your save function you must check instance of selected view
function onSave():void{
      if(vs.selectedChild is View1){
      View1(vs.selectedChild). saveView1();
     }else if(vs.selectedChild is View2){
         View2(vs.selectedChild). saveView2();
      }
}
Of course by adding more view you must add more conditions to your onSave function
The best way add event listener for each view for example in View1
addEventListener(“SaveEvent”, saveView1);
and in View2  
addEventListener(“SaveEvent”, saveView2);
and add only on line into your save function
function onSave():void{
      vs.selectedChild.dispactEvent(new Event(“SaveEvent”));
}

Now you have nice design and you don’t care how many View(s) you will add in the future your function onSave will never change
SOLUTION
Avatar of puzzle-it
puzzle-it

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
fine ..
then can u tell me what is difference between what dgoman said :

addEventListener(“SaveEvent”, saveView1);
and in View2  
addEventListener(“SaveEvent”, saveView2);
and add only on line into your save function
function onSave():void{
      vs.selectedChild.dispactEvent(new Event(“SaveEvent”));
}
 and this one :

save.addEventListener(Event.MouseClick, goandSave);
and in View2  
save.addEventListener(Event.MouseClick ,goandSave);
and add only on line into your save function
function goandSave():void{
 ................... saving instructions !
}

also in this case i can add more conditions and without changing the goandSave function ??
what is confusing me alot there are two approaches and both lead to the same result

guys maybe i am not delivering my questions clearly ! hope this finds you well .
thanks a lot dgoman and puzzle it  , anyway here is what i suggest
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I explained what differences between two code styles and provided examples and instead you picked an answer on top my samples  without assigning any points to my answers