How can I reuse a single function across multiple components? - apache-flex

Question

I have created a custom component that I am using, more conveniently, as a SkinnablePopUpContainer and I want to use the same function that calls and receives data from it for several Buttons in the UI. What is the best way to achieve this without having to create a new function for each button?
<fx:Script>
<![CDATA[
import spark.events.PopUpEvent;
protected function button1_clickHandler(event:MouseEvent):void
{
popup.addEventListener(PopUpEvent.CLOSE, onPopUpEventClose1, false, 0, true);
popup.open(this);
}
private function onPopUpEventClose1(event:PopUpEvent):void {
popup.removeEventListener(PopUpEvent.CLOSE, onPopUpEventClose1);
trace(event.commit);
trace(event.data);
button1.label=event.data;
}
protected function button2_clickHandler(event:MouseEvent):void
{
popup.addEventListener(PopUpEvent.CLOSE, onPopUpEventClose2, false, 0, true);
popup.open(this);
}
private function onPopUpEventClose2(event:PopUpEvent):void {
popup.removeEventListener(PopUpEvent.CLOSE, onPopUpEventClose2);
trace(event.commit);
trace(event.data);
button2.label=event.data;
}
]]>
</fx:Script>
<s:Button id="button1" x="102" y="103" label="Button 1 Numbers"
click="button1_clickHandler(event)"/>
<s:Button id="button2" x="102" y="200" label="Button 2 Numbers"
click="button2_clickHandler(event)"/>
You can see how I would rather have one set of functions that can handle all of this rather than manually coding each function.
Is there a way to get the id of the component that calls the function? What's the best way to solve this?
EDIT: SOLUTION
I have been able to replace all of that code with the trimmer following:
private var buttonPick:Button;
public function button_clickHandler(button:Button):void
{
switch (button) {
case button1: popup.addEventListener(PopUpEvent.CLOSE, onPopUpEventClose, false, 0, true);
popup.open(button);
break;
case button2: popup.addEventListener(PopUpEvent.CLOSE, onPopUpEventClose, false, 0, true);
popup.open(button); break;
}
buttonPick = button;
}
private function onPopUpEventClose(event:PopUpEvent):void {
popup.removeEventListener(PopUpEvent.CLOSE, onPopUpEventClose);
trace(event.commit);
trace(event.data);
buttonPick.label=event.data;
}
and this as the mxml:
<s:HGroup click="button_clickHandler(event.target as Button)">
<s:Button id="button1" x="102" y="103" label="Button 1 Numbers"
/>
<s:Button id="button2" x="102" y="200" label="Button 2 Numbers"
/>
</s:HGroup>
Thanks for the input and advice! And if there is a more efficient way to do it than with case statements, be sure to suggest it!

Answer 1

You should put those buttons into a common container and listen for clicks on that container. Then you can use Event#target to detect which element in the container was clicked.
Your buttons in a common container:
<s:Group click="button_clickHandler(event.target as Button)">
<s:Button id="button1" x="102" y="103" label="Button 1 Numbers" />
<s:Button id="button2" x="102" y="200" label="Button 2 Numbers" />
</s:Group>
The event handler:
protected function button_clickHandler(button:Button):void {
switch (button) {
case button1: trace('clicked button 1'); break;
case button2: trace('clicked button 2'); break;
default: trace('clicked somewhere else in the group'); break;
}
}
As you can see, I cast event.target to a Button class using the 'as' keyword. This way, if you click anything else than a Button, the 'button' argument will be 'null'.

Answer 2

Read the docs for Event.target and Event.currentTarget. In this case you want to use currentTarget. This article describes the differences between target and currentTarget.