验证失败时设置 Spark TextInput 背景

Question

如何指定 TextInput 在错误状态下的样子？关于这个主题的文档似乎真的很稀缺！

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

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

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, any way to programmatically highlight a field in red the way the validators do?

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

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 扩展它，它将具有零大小。当然你可以把它的width和height属性设置为父组件，但是这样会和这个父组件重叠。

如果您使用从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>

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