0
Ich habe eine benutzerdefinierte Komponente, die zum Filtern von Daten auf dem Bildschirm verwendet wird, wie der Benutzer es eingibt. Diese Komponente wird in einem ResizableTitleWindow (einer anderen benutzerdefinierten Komponente, die sich von TitleWindow aus erstreckt) verwendet. Wenn dieses ResizableTitleWindow maximiert wird, ist die Hervorhebung perfekt.Flex- seltsame Hervorhebung für benutzerdefinierte Suche Komponente
Das Problem ist-wenn die ResizableTitleWindow Größe auf dem Standard gestellt wird und der Benutzer klickt auf dieser Komponente, die Fläche oberhalb der Komponente anstelle der Komponente Grenze hervorgehoben wird hervorgehoben zu werden ...
Dies ist der Code für die benutzerdefinierte Suche Komponente:
<?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>
Jede Hilfe in diesem Zusammenhang wird geschätzt werden !!
Vielen Dank im Voraus!