Saturday, March 23, 2013

AS3: How to enable Double Clicking

Well, probably everyone knows about this, but just if case you are new to the as3 world... Here goes.

Here's the codes for my main application file.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"
      backgroundColor="#CDCDCD">
 <fx:Script>
  <![CDATA[
   [Bindable]
   private var _enabledDoubleClick:Boolean = false;
   
   [Bindable]
   private var _bkgdColor:uint = 0xFFFFFF;
   
   //Upon each successful double click, we will change the 
   //background color of the box. :D
   protected function doubleClickHandler(event:MouseEvent):void
   {
    _bkgdColor = Math.random() * 0xFFFFFF; 
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%"
     verticalAlign="middle"
     horizontalAlign="center">
  <s:Spacer height="100%"/>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:TextArea borderVisible="false"
      contentBackgroundAlpha="0"
      width="50%" height="50">
    Double Clicking will only work when the CheckBox is selected. 
    (When the checkbox is selected, it will bind the value of the 
    CheckBox to a Boolean variable that will change the value of 
    the property doubleClickEnabled of the box below.)
   </s:TextArea>
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox selected="@{_enabledDoubleClick}"
       label="Enable Double Clicking?"/>
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:BorderContainer width="50%"
          height="50%"
          backgroundColor="{_bkgdColor}"
          cornerRadius="10"
          mouseChildren="false"
          doubleClickEnabled="{_enabledDoubleClick}"
          doubleClick="doubleClickHandler(event)">
    <s:layout>
     <s:HorizontalLayout horizontalAlign="center"
           verticalAlign="middle"/>
    </s:layout>
    <s:Label text="Try Double Clicking Me!"/>
   </s:BorderContainer>
  </s:HGroup>
  <s:Spacer height="100%"/>
 </s:VGroup>
</s:Application>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

No comments:

Post a Comment