Flex Cursor管理问题

时间:2010-10-02 05:24:49

标签: flex actionscript-3

我有一个spark borderContainer,它包含一个Spark TextInput。 我在borderContainer上有一个mouse_down和mouse_up事件处理程序,以便在屏幕上拖动它;拖动时我改变光标。

我想使textInput表现为“标准”textInput,即当单击textInput时,用户不应该拖动整个组件,而只是像他/她通常那样与文本交互。另外,我希望textInput游标看起来像普通的textInput游标。

我不确定我是否正确行事。我的假设是我需要停止在textInput上传播mouse_down和mouse_up以禁止其父项的拖动行为,并管理rollOver和rollOut以使游标看起来正常。请参阅下面的代码示例(为了简化它,没有borderContainer或拖动 - 但是代码非常简单 - 只需要更长一点)。

所以这就是问题:如果单击spark textInput然后滚出它,则光标将变为textInput游标+ borderContainer的标准游标集的组合。这似乎不会发生在mx textInput组件上(因此是两个框),但不幸的是我需要使用spark组件。我的猜测是我要么没有正确调用cursorManager,要么我没有正确地停止mouse_up的传播 - 它似乎应该点击textInput而不是传播到borderContainer。我也试过stopPropagation(),但没有运气。

会喜欢任何建议/建设性的批评。

谢谢你!

˚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)"/>

2 个答案:

答案 0 :(得分:0)

如果用户点击输入,您只需不要开始拖动并且不要更改光标:

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
}

答案 1 :(得分:0)

我有类似的问题,但我在容器中有几个TextInput字段。因此,为了避免检查它们中的每一个,我使用了这个版本的想法:

 if (event.target is RichEditableText) return;

完美运作......

问候,J!