« Fx{r} Wallpapers
» We’ve been at FlexCamp Bucharest Romania 2008

ActionScript, Events, How to, MXML

Mouse Click and Space Key Press on a Button

Andrei Ionescu | 17.04.08 | 1 Comment

Flex is a very powerful instrument but needs to be learned and studied. Some time ago I got into a bug - that is what I thought at the first impression - but is not. I talking about the MouseEvent.CLICK event which is triggered also by the KeyboardEvent.SPACE.

Please try the following example and you’ll understand better what I’m talking about.


The source code is bellow:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Text;
            import mx.containers.VBox;
            import mx.controls.TextArea;
            import mx.controls.Button;
 
            public var vbox:VBox;
            public var dummyButton:Button;
            public var testButton:Button;
            public var clear:Button;
            public var debug:TextArea;
            public var explanation:Text;
 
            public function init():void
            {
                vbox = new VBox();
                vbox.x = 10;
                vbox.y = 10;
                dummyButton = new Button();
                dummyButton.label = "Button One - No KeyUp Event";
                dummyButton.width = 300;
                dummyButton.addEventListener(MouseEvent.CLICK, handleClick);
                testButton = new Button();
                testButton.label = "Button Two - With KeyUp Event";
                testButton.width = 300;
                testButton.addEventListener(MouseEvent.CLICK, handleClick);
                testButton.addEventListener(KeyboardEvent.KEY_UP, handleKeyUp);
                debug = new TextArea();
                debug.editable = false;
                debug.width = 300;
                debug.height = 150;
                explanation = new Text();
                explanation.text = "This is an example to see that pressing SPACE \n" + 
                        "on a button is thesame with MouseEvent.CLICK \n" + 
                        "event.\n\n" + 
                        "You can click with mouse and also navigate with \n" + 
                        "the TAB key to get focus on buttons. Then press \n" + 
                        "SPACE to see the event in action. \n\n" + 
                        "The first button has only the MouseEvent.Click \n" + 
                        "event set the second has both MouseEvent.Click \n" + 
                        "and KeyboardEvent.KEY_UP. \n\n" + 
                        "Clicking with your mouse on any of these button \n" + 
                        "will throw only one click event but pressing SPACE \n" + 
                        "on the second button it will throw two events: \n" + 
                        "MouseEvent.CLICK and KeyboardEvent.KEY_UP.";
                clear = new Button();
                clear.label = "Clear";
                clear.width = 80;
                clear.addEventListener(MouseEvent.CLICK, handleClear);
                vbox.addChild(dummyButton);
                vbox.addChild(testButton);
                vbox.addChild(debug);
                vbox.addChild(explanation);
                vbox.addChild(clear);
                addChild(vbox);
            }
 
            private function handleClick(event:MouseEvent):void
            {
                debug.text += (event.type + " -> " + 
                        (event.currentTarget as Button).label + "\n");
            }
            private function handleKeyUp(event:KeyboardEvent):void
            {
                debug.text += (event.type + " -> " + 
                        (event.currentTarget as Button).label + "\n");
            }
            private function handleClear(event:MouseEvent):void
            {
                debug.text = "";
            }
        ]]>
    </mx:Script>
</mx:Application>

So when you design application that will get both mouse action and keyboard action take into account that SPACE key is by default used to emulate the click of a mouse. That is because of accessibility, because people that cannot use a mouse should be able to use application only with keyboard. This is a very good thing and even if you don’t set keyboard events in your application it will be accessible using the keyboard.

Hope this article is helpful to you all.

Popularity: 51%

Share and Enjoy:
  • Technorati
  • StumbleUpon
  • del.icio.us
  • NewsVine
  • Reddit
  • Digg
  • Furl
  • co.mments
  • blogmarks
  • Slashdot
  • DZone
  • Taggly
  • YahooMyWeb
  • connotea
  • Webride




Tags: , , , , ,

This post was written by Andrei Ionescu

Views: 2835

related

popular

1 Comment

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:

:


« Fx{r} Wallpapers
» We’ve been at FlexCamp Bucharest Romania 2008