validation - 検証に失敗したときに 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、バリデーターのようにプログラムでフィールドを赤で強調表示する方法はありますか?

この回答を見てください。理解に役立つと思います

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>

そして、私もそれを持っているので、誰かがこの問題のより良い解決策に私を案内してくれれば幸いです=）