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.
<?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>
It is very helpful.
Thanks very much
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?
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.
Thank you!
Hey Noj, Thank you