Distinguish 'double click' from 'click' in Flex

   Defining behavior for both 'click' and 'double click' events in Flex is tricky, as when a double click is done, the click event gets fired. Therefore there needs to be a workaround to solve this issue. First of all add event listeners for 'click' and 'double click' (this can be done either in mxml or actionscrips which I have chosen the later).

//Adding click listener
component.addEventListener(MouseEvent.CLICK, localMouseClickEvent, false, 0, true);

//Adding double click listener
component.addEventListener(MouseEvent.DOUBLE_CLICK, localMouseDoubleClickedEvent, false, 0, true);

//n.b. here component refers to any mx UIComponent 

   According to the code above if a mouse click is issued, 'localMouseClickEvent(MouseEvent)' method is called and for a double click, 'localMouseDoubleClickedEvent(MouseEvent)' should be called. However, when a double click is done, 'localMouseClickEvent(MouseEvent)' triggers.Both functions are defined below. 

/** reference to the deferred click operation */
private var deferredClickReference: Number = 0;


protected function localMouseClickEvent (event: MouseEvent) : void {    
          clearInterval(deferredClickReference); // clearing previous schedule
         
          // defer operation                   
          deferredClickReference = setInterval(deferredMouseClickEvent, 300); 
}
   
protected function deferredMouseClickEvent() : void {
        clearInterval(deferredClickReference); // clearing previous schedule  
        
       // code to execute for 'click'
}

protected function localMouseDoubleClickedEvent(event:MouseEvent):void {
         // revoking deferred click operation
         clearInterval(deferredClickReference);

        // code to execute for 'double click'
}

   The workaround is to defer the single click operations to see if it is actually followed by another click. Another function, 'deferredMouseClickEvent()' is defined, and invoked from localMouseClickEvent(event: MouseEvent0)' scheduled to be triggered after 300 ms. This scheduling is done by 'setInterval(deferredMouseClickEvent, 300)' , which returns a reference to the schedule (this is assigned to 'deferredClickReference'). So if a click is followed by another within 300 ms, double click event operations will be run, otherwise that of click

   'clearInterval(deferredClickReference)' resets the reference, which revokes the scheduled single click operation. This is done before scheduling the deferred operation, after execution of the same and in double click event's function (to prevent deferredMouseClickEvent() run).

 thanks,
Shyarmal.

Flex - Changing Cursor Icon

Mouse icon can be changed in flex. This example changes the cursor icon to a configured image when mouse is moved over it and then resets it to system cursor on mouse moves out. I have posted the action script code here.

==================================================================

    [Embed(source="assets/images/tree_move.png")]
    private var treeCursorIcon: Class;  //define an icon

    public function changeToTreeCursor (e: flash.events.MouseEvent) : void { 
            CursorManager.setCursor(treeCursorIcon); // change the cursor here
    }

    private function changeToDefaultCursor() : void {
        CursorManager.removeAllCursors(); // reset the cursor here
    }

==================================================================

First an your icon has to be defined, providing the relative path to the image. The function, changeToTreeCursor(MouseEvent) sets that icon as the mouse cursor and changeToDefaultCursor() sets it back to system cursor.

You can have your own custom component as follows, and define rollOut and rollOver attributes of it to fire changeToTreeCursor(MouseEvent) and changeToDefaultCursor() methods respectively for the corresponding events to fire.

==================================================================

<xxx:My_Component id="my_comp" x="0" y="39" title="@Resource(key='comp_label', bundle='draw')" rollOut="changeToDefaultCursor()" rollOver="changeToTreeCursor(event)">
    </xxx:My_Component>

==================================================================

thanks,
Shyarmal.