You're issue is the following:
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyBoardListener);
You have that in the markup as a property (it's expecting param="value") and you're trying to call a code function.
You should create a class file for your button and add the listener and handler there. That way it will only run when the button has focus (which is what I'm assuming you want here).
package Lib {
public class MyButton extends ManagedButton {
public function MyButton(){
this.addEventListener(Event.ADDED_TO_STAGE,addedToStage,false,0,true);
this.addEventListener(Event.REMOVED_FROM_STAGE,removedFromStage,false,0,true);
this.addEventListener(MouseEvent.CLICK,clickEventHandler,false,0,true);
}
private function addedToStage(e:Event):void {
this.addEventListener(KeyboardEvent.KEY_DOWN, keyBoardListener,false,0,true);
}
private function removedFromStage(e:Event):void {
this.removeEventListener(KeyboardEvent.KEY_DOWN, keyBoardListener,false);
}
[Bindable]
public var clickHandler:Function;
private function clickEventHandler(e:Event):void {
if(clickHandler != null) clickHandler();
}
public function keyBoardListener(keyEvent:KeyboardEvent):void
{
if(keyEvent.keyCode==37)
if(clickHandler != null) clickHandler();
}
}
}
Then you could just specify the value for clickHandler
and have both your keyboard and click events launch it. I don't really use FLEX, so someone may need to correct this, but I think this is what it would look like:
<Lib:MyButton
id = "MB"
labelText = "MB"
image = " ... "
enabled = "false"
clickHandler = "f1()"
/>