Question

我有一个自定义组件，用于在用户输入数据时过滤屏幕上的数据。此组件在ResizableTitleWindow（从TitleWindow扩展的另一个自定义组件）中使用。当ResizableTitleWindow最大化时，突出显示是完美的。

问题是 - 当ResizableTitleWindow恢复到默认大小并且用户点击此组件时，组件上方的区域会突出显示而不是突出显示组件边框...

这是自定义搜索组件的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="http://www.adobe.com/2006/mxml"   
verticalScrollPolicy="off" horizontalScrollPolicy="off"
verticalAlign="middle" backgroundColor="#FFFFFF"
width="100" borderStyle="inset" initialize="init()"
implements="com.hillelcoren.components.autoComplete.interfaces.iComboItem"
xmlns:classes="com.hillelcoren.components.autoComplete.classes.*" horizontalGap="0">
<mx:Image source="assets/searchImg.png" maxHeight="20" minWidth="15"/>  
<mx:Metadata>
    [Event(name="change")]
    [Style(name="promptColor", type="uint", format="Color", inherit="yes")]
</mx:Metadata>

<mx:Script>
    <![CDATA[
        import mx.core.Application;
        import mx.core.UIComponent;
        import mx.containers.Box;
        import mx.controls.Image;
        import mx.states.SetStyle;

        private var _prompt:String;
        private var _promptChanged:Boolean;

        private var _isPromptSet:Boolean;
        private var _drawFocusBorder:Boolean = true;

        [Bindable]
        private var _enableClearIcon:Boolean = true;
        private var _enablePrompt:Boolean = true;
        private var _isMouseOver:Boolean;

        private var _text:String;
        private var _textChanged:Boolean;

        private var _promptColor:String;
        private var _textPadding:int = 10;

        [Bindable]
        public var displayAsPassword:Boolean;

        private function init():void
        {
            addEventListener( FocusEvent.FOCUS_IN, handleFocusIn );
            addEventListener( FocusEvent.FOCUS_OUT, handleFocusOut );
            addEventListener( MouseEvent.MOUSE_OVER, handleMouseOver );
            addEventListener( MouseEvent.MOUSE_OUT, handleMouseOut );

            textInput.addEventListener( Event.CHANGE, handleChange );               

            _promptColor = getStyle( "promptColor" ) ? getStyle( "promptColor" ) : Consts.COLOR_TEXT_DISABLED;              
        }

        override protected function commitProperties():void
        {
            super.commitProperties();

            if (_textChanged)
            {
                _textChanged = false;
                setNewText();
            }

            if (_promptChanged)
            {
                _promptChanged = false;

                if (!_text) 
                {
                    showPrompt();
                }
            }
        }                       

        override public function styleChanged( styleProp:String ):void 
        {
            super.styleChanged( styleProp );

            if (!styleProp || styleProp=="promptColor") 
            {
                _promptColor = getStyle( "promptColor" ) ? getStyle( "promptColor" ) : Consts.COLOR_TEXT_DISABLED;

                if (_isPromptSet)
                {
                    setStyle( "color", _promptColor );
                }
            }
        }

        private function showPrompt():void
        {
            if (_prompt == null || !_enablePrompt)
            {
                return;
            }

            if (!textInput)
            {
                return;
            }

            // check that the component isn't currently focused
            var focus:InteractiveObject = textInput.getFocus();

            if (focus && focus.parent == textInput)
            {
                return;
            }

            _isPromptSet = true;
            textInput.text = _prompt;

            setStyle( "color", _promptColor );
            setStyle( "fontStyle", "italic" );
        }

        private function hidePrompt():void
        {
            if (_isPromptSet)
            {
                textInput.text = "";    
            }

            _isPromptSet = false;

            clearStyle( "color" );
            clearStyle( "fontStyle" );
        }

        public function set textPadding( value:int ):void
        {
            _textPadding = value;
        }

        override public function get minWidth():Number
        {
            return measureText( text ).width + _textPadding;
        }

        public function set prompt( value:String ):void
        {
            _prompt = value;
            _promptChanged = true;

            invalidateProperties();
        }

        public function set enableClearIcon( value:Boolean ):void
        {
            _enableClearIcon = value;
        }

        public function set enablePrompt( value:Boolean ):void
        {
            _enablePrompt = value;

            if (!_enablePrompt)
            {
                hidePrompt();
            }
        }

        override public function validateNow():void
        {
            super.validateNow();

            textInput.validateNow();
        }

        public function get text():String
        {
            if (_isPromptSet)
            {
                return "";
            }
            else
            {
                // When setting the htmlText property there's a delay until the text
                // property is ready. This will force it to update it's text value 
                if (textInput.text == null && textInput.htmlText != null)
                {
                    validateNow();
                }

                return textInput.text;
            }
        }

        public function get selectionBeginIndex():int
        {
            return textInput.selectionBeginIndex;
        }

        public function set text( value:String ):void
        {
            _text = value;
            _textChanged = true;

            invalidateProperties();
        }

        private function setNewText():void
        {   
            if (_text == null)
            {
                textInput.text = "";
                textInput.setSelection( 0, 0 );

                showPrompt();
                hideClearIcon();
            }   
            else
            {
                hidePrompt();
                textInput.text = _text;                         
            }

            textInput.validateNow();
        }

        public function setTextSelected( value:Boolean ):void
        {
            var startPos:uint = value ? 0 : text.length;

            textInput.setSelection( startPos, text.length );
        }

        private function handleFocusIn( event:FocusEvent ):void
        {
            if (_drawFocusBorder)
            {
                drawFocus( true );                  
            }

            if (_isPromptSet)
            {
                hidePrompt();
            }
        }

        private function handleFocusOut( event:FocusEvent ):void
        {
            if (_drawFocusBorder)
            {
                drawFocus( false );
            }

            if (textInput.text.length == 0)
            {
                showPrompt();
            }
        }

        public function set drawFocusBorder( value:Boolean ):void
        {
            _drawFocusBorder = value;
        }

        private function handleChange( event:Event ):void
        {
            dispatchEvent( event );

            // this helps keep the input at a good 
            // horizontal scroll position
            var scrollPos:int       = textInput.horizontalScrollPosition;
            var maxScrollPos:int    = textInput.maxHorizontalScrollPosition;

            if (scrollPos - maxScrollPos > 50)
            {
                textInput.horizontalScrollPosition -= 50;
            }

            if (_isMouseOver)
            {
                if (text && text.length > 0)
                {
                    showClearIcon();
                }
                else
                {
                    hideClearIcon();
                }
            }                                                                       
        }

        private function handleMouseOver( event:MouseEvent ):void
        {
            _isMouseOver = true;

            if (text.length == 0)
            {
                return;
            }

            showClearIcon();
        }

        private function handleMouseOut( event:MouseEvent ):void
        {
            _isMouseOver = false;

            /*
            if (clearIcon.visible = true)
            {
                if (event.relatedObject == getChildAt(1))
                {
                    return;
                }                   

                hideClearIcon();
            }
            */

            hideClearIcon();
        }

        private function hideClearIcon():void
        {
            clearIcon.visible = false;
        }

        private function showClearIcon():void
        {
            if (_enableClearIcon)
            {
                clearIcon.visible = true;
            }                                                                           
        }

        private function handleClearClick():void
        {
            text = null;
            validateNow();
            textInput.text = null;
            hidePrompt();
            setFocus();

            textInput.dispatchEvent(new KeyboardEvent(KeyboardEvent.KEY_UP));
        }

        override public function setFocus():void
        {
            textInput.setFocus();
        }   

        public function get item():Object
        {
            return null;    
        }                       

        public function isEditable():Boolean
        {
            return true;    
        }       

        public function setTextFocus():void
        {
            textInput.setSelection( 0, 0 );
            setFocus();
        }   

        public function isCursorAtBeginning():Boolean
        {
            return selectionBeginIndex == 0;
        }               

        public function isCursorAtEnd():Boolean
        {
            return selectionBeginIndex == text.length;
        }

        public function setCursorPosition( value:int ):void
        {
            _setCursorPosition( value );
            callLater( _setCursorPosition, [value] );
        }   

        private function _setCursorPosition( value:int ):void
        {
            textInput.selectionBeginIndex = value;
            textInput.selectionEndIndex = value;
        }

    ]]>
</mx:Script>

<classes:ShorterTextInput id="textInput" width="100%" borderStyle="none" displayAsPassword="{ displayAsPassword }"/> 
<mx:Image id="clearIcon" source="@Embed('/com/hillelcoren/assets/icons/clear.png')" verticalAlign="middle" 
    visible="false" includeInLayout="{ _enableClearIcon }" click="handleClearClick()"/>
</mx:HBox>

在此背景下的任何帮助将不胜感激!!

先谢谢!!

Answer 1

我终于找到了解决这个问题的方法。它可能会帮助某人。自定义单选按钮，自定义工具栏或任何其他自定义按钮会出现此问题。解决方案是添加（focusAlpha =“0”）。

希望它会有所帮助。

自定义搜索组件的Flex-Cird突出显示

1 个答案: