CODEWITHSUNDEEP
apache-flex
Jim In Texas
Jim In Texas

Reputation: 1545

What's the best way to cause a Flex 3 button to respond to the enter key?

In Flex 3, buttons call their click handler when they are clicked on by the mouse, or when they have the focus and the user depresses the space bar.

Is there a straightforward way to cause Flex 3 buttons with focus to call their click handler when the user presses the enter key?

Upvotes: 9

Views: 10233

Answers (7)

George
George

Reputation: 1

I've been lookind at the same problem but the answer from Christian Nunciato seem's to me to be the best. One more thing to add to his solution, I think that the bubbling, flag in btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK)), should be set to false (btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK, false))) because the event should be isolated on the button.

Upvotes: 0

Shanimal
Shanimal

Reputation: 11718

You can also add the KEY_DOWN listener in Christian's answer to the button itself. Just make sure you call stopImmediatePropagation. In this example I let any key cause the button action. And I am using the same handler so I allow any "Event" type. You could use different "cancelClick" handlers.

protected function cancelClick(e:Event = null):void{
    this.dispatchEvent(new Event(Event.CANCEL)); // do component action
    e.stopImmediatePropagation();
}

override protected function partAdded(partName:String, instance:Object):void {
    super.partAdded(partName,instance);
    switch(instance){
        case cancel:
            cancel.addEventListener(MouseEvent.CLICK,cancelClick);
            cancel.addEventListener(KeyboardEvent.KEY_DOWN,cancelClick);
    }
}

Upvotes: 1

user135036
user135036

Reputation: 41

If you are submitting a form like a Login dialog or the like, the "enter" property on the TextField is a great solution:

<mx:TextInput displayAsPassword="true" id="wPassword" enter="handleLoginSubmit()"/>

Upvotes: 3

Joe Phace
Joe Phace

Reputation:

Even better

    private function setValidationFocus(formObject:Object):void
    {
        formObject.setFocus();
        formObject.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));  // sneaky sneaky
        formObject.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
    }

Upvotes: 1

Christian Nunciato
Christian Nunciato

Reputation: 10409

Sure, you could do something like this:

<mx:Script>
    <![CDATA[
        import mx.controls.Alert;

        private function btn_click(event:MouseEvent):void
        {
            Alert.show("Clicked!"); 
        }

        private function btn_keyDown(event:KeyboardEvent):void
        {
            if (event.keyCode == Keyboard.ENTER)
                btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
        }
    ]]>
</mx:Script>

<mx:Button id="btn" label="Click Me" click="btn_click(event)" keyDown="btn_keyDown(event)" />

... although I'm not a huge fan of dispatching events on objects outside of those objects. A cleaner approach might be to subclass Button, add the listeners and handlers inside your subclass, and then dispatch the click event from within that class. But this should help illustrate the point. Good luck!

Upvotes: 8

Jason Maskell
Jason Maskell

Reputation: 1816

For something like a login form, you need to actually use an mx:form - here's the code snippet that illustrates it:

<mx:Form defaultButton="{loadButton}">
<mx:TextInput id="feedURL" />
<mx:Button id="loadButton" label="Load" click="someHandler(event)" />
</mx:Form>

Enter the url and hit enter, bam, expected behavior.

Googled from here.

Upvotes: 3

cliff.meyers
cliff.meyers

Reputation: 17734

Try the "buttonDown" event; it may be dispatched in either case. Otherwise you are probably looking at using "keyDown" and checking the key that was pressed.

Upvotes: 0

Related Questions