Flex Cursor management question

Question

I have a spark borderContainer that contains a spark TextInput. I have an mouse_down and mouse_up event handlers on the borderContainer in order to drag it around the screen; while dragging I change the cursor.

I would like to make the textInput behave as a "standard" textInput, i.e. when clicking on the textInput the user should not be able to drag the whole component but simply interact with text as he/she would normally. Also, I'd like the textInput cursor to look like a normal textInput cursor.

I'm not sure I'm doing this right. My assumption is that I need to stop the propagation of mouse_down and mouse_up on the textInput to inhibit the drag behavior from its parent, and manage rollOver and rollOut in order for the cursor to look ok. See below an example of my code (to simplify it there is no borderContainer or drag - but the code for that would be very simple - just a bit longer).

So here's the issue: if one clicks on the spark textInput and then rolls out of it the cursor turns into a combination of a textInput cursor + the standard cursor set for for the borderContainer. This doesn't seem to happen on mx textInput components (thus the two boxes), but unfortunately I need to use spark components. My guess is that I'm either not calling the cursorManager correctly or I'm not stopping the propagation of mouse_up properly - it seems like it should hit the textInput but not propagate to the borderContainer. I tried stopPropagation() as well but no luck.

Would love any advice / constructive criticism.

thank you!

f

---

<?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" minWidth="955" minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)"
               mouseDown="application1_mouseDownHandler(event)"
               mouseUp="application1_mouseUpHandler(event)">


<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.managers.CursorManager;
        [Bindable] [Embed(source="../resources/hand.png")] private var _handIcon:Class;
        [Bindable] [Embed(source="../resources/Fist.png")] private var _fistIcon:Class;

        private var _cursorID:int;


        protected function textinput1_rollOutHandler(e:MouseEvent):void
        {
            e.stopImmediatePropagation();
            CursorManager.removeCursor(_cursorID);
            _cursorID = CursorManager.setCursor(_handIcon);
        }


        protected function textinput1_rollOverHandler(e:MouseEvent):void
        {
            e.stopImmediatePropagation();
            CursorManager.removeCursor(_cursorID);                              
        }


        protected function application1_creationCompleteHandler(e:FlexEvent):void
        {
            _cursorID = CursorManager.setCursor(_handIcon);
        }


        private function stopPropagation(event:MouseEvent):void
        {
            event.preventDefault();
            event.stopImmediatePropagation();
        }

        protected function textinput1_mouseDownHandler(event:MouseEvent):void
        {
            stopPropagation(event);
        }


        protected function textinput1_mouseUpHandler(event:MouseEvent):void
        {
            stopPropagation(event);
        }


        protected function application1_mouseDownHandler(event:MouseEvent):void
        {
            CursorManager.removeCursor(_cursorID);
            _cursorID = CursorManager.setCursor(_fistIcon);
        }


        protected function application1_mouseUpHandler(event:MouseEvent):void
        {
            CursorManager.removeCursor(_cursorID);
            _cursorID = CursorManager.setCursor(_handIcon);
        }

    ]]>
</fx:Script>

<s:TextInput x="43" y="30"
             rollOut="textinput1_rollOutHandler(event)"
             rollOver="textinput1_rollOverHandler(event)"
             mouseDown="textinput1_mouseDownHandler(event)"
             mouseUp="textinput1_mouseUpHandler(event)"/>
<mx:TextInput x="43" y="70"
              rollOut="textinput1_rollOutHandler(event)"
              rollOver="textinput1_rollOverHandler(event)"
              mouseDown="textinput1_mouseDownHandler(event)"
              mouseUp="textinput1_mouseUpHandler(event)"/>

Answer 1

You can simply do not start drag and do not change the cursor if user clicks on input:

protected function application1_mouseDownHandler(event:MouseEvent):void
{
    var container:DisplayObjectContainer = event.target as DisplayObjectContainer;
    if (!container || container == textInput || textInput.contains(container))
        return;

    // start drag and change the cursor
}

Answer 2

Hi!

I had a similar problem but I have several TextInput fields in the container. So to avoid checking every single of them I used this version of the idea:

 if (event.target is RichEditableText) return;

Works perfectly...

Greetings, J!