[Flex] 더블클릭(doubleClick)을 사용해보자.

만약 캔버스(Canvas)에 더블클릭(doubleClick)을 하면 어떠한 동작을 하는 코드를 만들 필요가 있다고 할 때, 당연하게 아래와 같이
<mx:Canvas id="myCanvas" doubleClick="doubleClickEventHandler(event)" /> 라던지,
myCanvas.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickEventHandler);
이렇게만 처리하면 doubleClickEventHandler() 에서 이벤트를 받을 수 있을 것이라 생각됩니다만,
더블클릭(doubleClick)을 사용하려면 한가지 더 설정 해주어야 할 것이 있습니다.

바로 doubleClickEnabled 라는 속성입니다.
(이 속성은 최초 InteractiveObject 에서 정의된 속성입니다.)
아 래의 코드는 Canvas에서 사용하는 Container 에서 재정의한 doubleClickEnabled 속성입니다. Container 에서 doubleClickEnabled 속성을 설정하게 되면 자식객체들도 doubleClickEnabled 속성을 동일하게 적용하도록 구현되어 있습니다.(고로 부모만 설정하면 자식들도 죄다 동일하게 설정됩니다.)
물론 UIComponent 에서도 동일한 기능을 하도록 재정의되어 있습니다.

//Container 의 doubleClickEnabled 속성 override public function set doubleClickEnabled(value:Boolean):void { super.doubleClickEnabled = value; if (contentPane) { var n:int = contentPane.numChildren; // 자식의 갯수를 구함 for (var i:int = 0; i < n; i++) { var child:InteractiveObject = contentPane.getChildAt(i) as InteractiveObject; // 자식을 가져옴 if (child) child.doubleClickEnabled = value; // 자식의 doubleClickEnabled 을 동일하게 설정 } } }

여기서 의아해 하시는 분도 있을 것 같습니다. '난 그냥 하니까 잘 되던데?' 라고 말이죠.
Flex 2에서는 기본값이 true 였기 때문에 위의 2가지 방법으로 바로 더블클릭(doubleClick)을 사용할 수 있었습니다만,
Flex 3에서는 기본값으로 false 가 설정되어 있기때문에 더블클릭(doubleClick) 이벤트를 받으려면 true로 설정 해주셔야 됩니다.

아래는 캔버스(Canvas)에 더블클릭(doubleClick)을 하면 팝업창이 뜨는 코드입니다.
왼쪽에 캔버스는 doubleClickEnabled 속성이 true로, 오른쪽은 false 로 설정되어 있습니다.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" width="500" height="300"> <mx:Script> <![CDATA[ import mx.controls.Alert; private function doubleClickEventHandler(evt:MouseEvent):void { Alert.show("doubleClick!"); } ]]> </mx:Script> <mx:Canvas doubleClick="doubleClickEventHandler(event)" doubleClickEnabled="true" width="220" height="194" backgroundColor="#62DCDB" cornerRadius="20" borderStyle="solid" borderColor="#0096FF" y="58" x="26"> <mx:Label x="10" y="83" text="doubleClickEnabled='true'" fontSize="15" fontFamily="돋움" fontWeight="bold" /> </mx:Canvas> <mx:Canvas doubleClick="doubleClickEventHandler(event)" doubleClickEnabled="false" width="220" height="194" backgroundColor="#DCC962" cornerRadius="20" borderStyle="solid" borderColor="#0096FF" y="58" x="254"> <mx:Label x="6" y="83" text="doubleClickEnabled='false'" fontSize="15" fontFamily="돋움" fontWeight="bold" /> </mx:Canvas> </mx:Application>

아래는 실제 결과물입니다. ;)