验证失败时设置火花文本输入背景

Question

如何指定文本输入在错误状态下的外观？关于这个主题的文件似乎非常稀缺！

没有错误状态，但有一个可以指定的 errorSkin（它必须是 ErrorSkin 的子类吗？）。

我想设置文本输入的背景颜色，并在验证失败时增加边框的粗细。我该怎么做？

Answer 1

这是我最终得到的：

public class ObviousErrorSkin extends ErrorSkin
{
    private static var glowFilter:GlowFilter = new GlowFilter(0xFF0000, 0.85, 8, 8, 3, 1, true, true);
    private static var rect:Rectangle = new Rectangle();
    private static var filterPt:Point = new Point();
    override protected function processBitmap():void
    {
        rect.x = rect.y = 0;
        rect.width = bitmap.bitmapData.width;
        rect.height = bitmap.bitmapData.height;
        glowFilter.color = target.getStyle("errorColor");
        bitmap.bitmapData.applyFilter(bitmap.bitmapData, rect, filterPt, glowFilter);
    }
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        // Early exit if we don't have a target object
        if (!target)
            return;
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        graphics.clear();
        graphics.beginFill(target.getStyle("errorColor"), 0.25);
        graphics.drawRect(bitmap.x, bitmap.y, bitmap.width, bitmap.height);
        graphics.endFill();
    }
}

Answer 2

您应该使用 errorString 属性来激活错误状态

Flex，有什么方法可以像验证者那样以编程方式突出显示红色字段？

看看这个答案，我想它会帮助你理解

Answer 3

据我所知，没有简单的方法可以实现这一目标。问题是在错误状态组件中不会更改它自己的皮肤，它只是将 errorSkin 的实例添加为新的子级。这是来自SkinnableComponent的代码

mx_internal function updateErrorSkin():void
{
    if (errorString != null && errorString != "" && getStyle("showErrorSkin"))
    {
        if (!errorObj)
        {
            var errorObjClass:Class = getStyle("errorSkin");
            if (errorObjClass)
                errorObj = new errorObjClass();
            if (errorObj)
            {
                if ("target" in errorObj)
                    errorObj["target"] = this;
                super.addChild(errorObj);
            }
        }
    }
    else
    {
        if (errorObj)
            super.removeChild(errorObj);
        errorObj = null;
    }
}

如果要添加 errorSkin 并从SparkSkin扩展它，它的大小将为零。当然，您可以将其宽度和高度属性设置为父组件，但随后它将与此父组件重叠。

如果您使用的是从ErrorSkin继承的皮肤，大多数情况下也会发生同样的事情。但是你需要对它bitmap属性做点什么。它仍然会超过您的主要组件。是的，您可以互换错误皮肤和主皮肤，然后使主皮肤透明，也许可以实现您需要的，但我建议创建自己的组件，如下所示：

TextInputWithError.as

package
{
    import spark.components.TextInput;
    [SkinState("error")]
    public class TextInputWithError extends TextInput
    {
        public function TextInputWithError()
        {
            super();
        }
        protected var useErrorSkin:Boolean;
        override public function set errorString(value:String):void
        {
            super.errorString = value;
            setStyle("errorSkin", null);
            if (value != "")
                useErrorSkin = true;
            else
                useErrorSkin = false;
            invalidateProperties();
        }
        override protected function commitProperties():void
        {
            super.commitProperties();
            if (useErrorSkin != "")
                skin.currentState = "error";
            else
                skin.currentState = getCurrentSkinState();
        }
    }
}

TextInputWithErrorSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
    alpha.disabledStates="0.5" blendMode="normal">
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("TextInputWithError")]
    ]]>
    </fx:Metadata> 
    <s:states>
        <s:State name="normal"/>
        <s:State name="error"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="normalWithPrompt"/>
        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
    </s:states>
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor id="bgFill" color="0xFFFFFF" color.error="0x00FF00" />
        </s:fill>
    </s:Rect>
    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>     
            <s:SolidColorStroke id="borderStroke" weight="1" weight.error="2" color.error="0xFF0000" />
        </s:stroke>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1" id="shadow">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />
    <s:Label id="promptDisplay" maxDisplayedLines="1"
                verticalAlign="middle"
                mouseEnabled="false" mouseChildren="false"
                includeIn="normalWithPrompt,disabledWithPrompt" 
                includeInLayout="false"
                />
</s:SparkSkin>

如果有人能指导我更好地解决这个问题，我将不胜感激，因为我也有=）