01.19Passing parameters to Event handlers

One year ago I asked Beck Novaes how to pass parameters to Event Handlers added dynamically, because when you add a Event Listener using myComp.addEventListener(...), the handler must wait only one event parameter. So Beck came up with a solution, but he stated that this is just one “alternative” solution, not the better one.

Some days ago I was working with simultaneous requests to the server and I wanted to keep the data I sent on the request but I didn’t want to return it from Java, so I came up another solution. Assuming that your Event Handler is waiting a Function that have only one Event parameter, I created another Function that returns a Function waiting the Event parameter. But the trick is that the Function Closure scope allows you to access parameters passed to the first and the second Function, so you can do this:

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
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%"
    initialize="initApp()">

    <mx:Script>
        <![CDATA[
            private function initApp():void
            {
                buttonA.addEventListener(MouseEvent.CLICK, buttonHandler(0x0000FF));
                buttonB.addEventListener(MouseEvent.CLICK, buttonHandler(0xFF0000));
            }

            private function buttonHandler(color:uint):Function
            {
                return function(event:MouseEvent):void
                {
                    box.setStyle("backgroundColor", color);
                }
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:Button id="buttonA" label="Blue"/>
        <mx:Button id="buttonB" label="Red"/>
    </mx:HBox>

    <mx:Box id="box" height="80" width="200" backgroundColor="#FFFFFF"/>

</mx:Application>


And now, what if you want to use this Event Handler directly in MXML? Well, you can’t do this:

1
<mx:Button label="Green" click="buttonHandler(0x00FF00)"/>


This will not work because the Function that returns from the first one is waiting the Event parameter. So you can do this:

1
<mx:Button label="Green" click="buttonHandler(0x00FF00)(event)"/>


Weird, huh? Maybe another FreaktionScript pattern?

Filed under: ActionScript 3, Flex, Tips

5 Responses to “Passing parameters to Event handlers”

  1. Tweets that mention André Gil's Blog » Passing parameters to Event handlers -- Topsy.com says:

    [...] This post was mentioned on Twitter by JuwalBose and André Gil, AS3hash. AS3hash said: RT @andregil: Passing parameters to Event handlers – http://is.gd/6AcDW #Flex #AS3 #FlashDev [...]

    January 19th, 2010 at 08:24

  2. uberVU - social comments says:

    Social comments and analytics for this post…

    This post was mentioned on Twitter by andregil: Passing parameters to Event handlers – http://is.gd/6AcDW #Flex #AS3…

    January 19th, 2010 at 13:02

  3. shaokai says:

    Very good!
    But,excuse me,how can i remove the reference of the function returned by buttonHandler with removeEventListener?

    January 20th, 2010 at 05:51

  4. André Gil says:

    Hey shaokai, that’s a really good question, thank you!! I posted the solution here: http://blog.andregil.net/2010/01/how-to-remove-event-listeners-with-parameters-closure/

    []‘s

    January 20th, 2010 at 08:18

  5. André Gil's Blog » How to remove Event Listeners with parameters / closure? says:

    [...] my last post, shaokai asked me how to remove those event handlers added dynamically with parameters and I think [...]

    January 20th, 2010 at 09:44

Leave a Reply

« »