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扩展它，它将具有零大小。当然，您可以将其宽度和高度属性设置为父组件，但它将与此父组件重叠。

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

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

失败验证时设置Spark TextInput Background

3 个答案: