Creating a double-click-able Button control in Flex

The following examples show how you can set a Flex Button control to listen for doubleClick events by setting the doubleClickEnabled property using both MXML and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/11/creating-a-double-click-able-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function button_click(evt:MouseEvent):void {
                appendText(evt.type);
            }

            private function button_doubleClick(evt:MouseEvent):void {
                appendText(evt.type);
            }

            private function appendText(str:String):void {
                var now:Date = new Date();
                textArea.text += "[" + now.toTimeString() + "] " + str + "\\n";
                textArea.validateNow();
                textArea.verticalScrollPosition = textArea.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="doubleClickEnabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button id="button"
                        label="[double] click me"
                        doubleClickEnabled="{checkBox.selected}"
                        click="button_click(event);"
                        doubleClick="button_doubleClick(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            editable="false"
            width="50%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

You can also build the same sample as above using ActionScript, using the following code:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/11/creating-a-double-click-able-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.Button;
            import mx.controls.CheckBox;
            import mx.controls.TextArea;

            private var textArea:TextArea;

            private function init():void {
                // CheckBox
                var ch:CheckBox = new CheckBox();
                ch.selected = true;

                // FormItem #1 (for CheckBox)
                var fi1:FormItem = new FormItem();
                fi1.label = "doubleClickEnabled:";
                fi1.addChild(ch);

                // Button
                var btn:Button = new Button();
                btn.label = "[double] click me";
                btn.doubleClickEnabled = true;
                btn.addEventListener(MouseEvent.CLICK, button_click);
                btn.addEventListener(MouseEvent.DOUBLE_CLICK, button_doubleClick);

                // FormItem #2 (for Button)
                var fi2:FormItem = new FormItem();
                fi2.addChild(btn);

                // Form
                var f:Form = new Form();
                f.styleName = "plain";
                f.addChild(fi1);
                f.addChild(fi2);

                // ApplicationControlBar
                var appBar:ApplicationControlBar = new ApplicationControlBar();
                appBar.dock = true;
                appBar.addChild(f);
                addChild(appBar);

                // TextArea
                textArea = new TextArea();
                textArea.percentWidth = 50;
                textArea.percentHeight = 100;
                textArea.editable = false;
                addChild(textArea);
            }

            private function button_click(evt:MouseEvent):void {
                appendText(evt.type);
            }

            private function button_doubleClick(evt:MouseEvent):void {
                appendText(evt.type);
            }

            private function appendText(str:String):void {
                var now:Date = new Date();
                textArea.text += "[" + now.toTimeString() + "] " + str + "\\n";
                textArea.validateNow();
                textArea.verticalScrollPosition = textArea.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

</mx:Application>

10 thoughts on “Creating a double-click-able Button control in Flex

  1. Is there any way you can isolate your double click event from click event. As you can see in your example double-click also fires click event which is very obvious but is there any way you can bypass the click event on doubleclick?

  2. peterd, you saved me two hours of googling.

    to Prashant Khanal: There is a similar problem with mouseWheel, it keeps on firing multiple times when you only have moved the mouseWheel by once. I was working on a project where i had someone’s mouse firing a +1, and -1 in pairs per every mouse Wheel move.

    What i did, is add a buffer, meaning, every time the mousewheel moves, you add it to a value, if the value goes above a threshold , then and only then, the mouselistener is fired otherwise not.

    you could do a similar thing for doubleClick . make a timer, after every click. if there is another double click fired. you only take double click in account.

    however one bad thing adobe did for event listeners is that, they don’t show the list of events, listening for some kind of event.

  3. I cannot see any difference between the enabled and disabled states.
    disabled
    [23:57:32 GMT+1000] click
    [23:57:32 GMT+1000] click

    enabled
    [23:57:35 GMT+1000] click
    [23:57:35 GMT+1000] click

  4. Anybody found a way to set the doubleClick interval time? you can set set the repeatInterval and delayInterval for a Button, but i can’t find the doubleClick-interval. (Google didn’t help)

    1. There is no doubleClick interval time option. Flex always dispatches click event with doubleClick event. I think Adobe don’t want to miss any event because of propogation issues. But it is not useful for us with this form ha? :) You can manage it yourself by using a Timer object to wait for interval time. I have done it like that.

Comments are closed.