errorSkin on Spark TextInput validation

Question

I might be taking crazy pills but has anyone actually gotten the errorSkin feature to work? I am not doing anything crazy, just extending TextInput (spark) and setting the errorSkin property.

I have tried creating a skin using SparkSkin, did nothing. I have tried creating a skin using ProgrammaticSkin, did nothing.

TextInput is always a red border. I know you can set errorColor and errorString but I am obviously looking to do more than just change the color of the border. I am compiling using Flex 4.1.

Any ideas?

Implimentation:

<components:PromptedTextInput id="txt"
        width="200"
        horizontalCenter="0"
        verticalCenter="0"
        errorSkin="skins.TestSkin" />

Class

public class PromptedTextInput extends TextInput
{

    public function PromptedTextInput()
    {
        super();
    }

}

Error Skin:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
    <![CDATA[

    [HostComponent("spark.components.TextInput")]

    ]]>
</fx:Metadata>

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
    <s:State name="error" />
</s:states>

<!-- fill -->
<s:Rect id="background"
        left="1" right="1" top="1" bottom="1">
    <s:fill>
        <!--- Defines the background fill color. -->
        <s:SolidColor id="bgFill"
                color="#66CC66" />
    </s:fill>
</s:Rect>
</s:SparkSkin>

Another Error Skin Attempt:

public class TestSkin extends ProgrammaticSkin
{
    public function TestSkin()
    {
        super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        graphics.clear();
        graphics.beginFill(0x33CC33);
        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
        graphics.endFill();
    }
}

Answer 1

Have you tried to create a skin based on the ErrorSkin (not the TextInput skin) found in \Flex 4.1\frameworks\projects\spark\src\spark\skins\spark\ErrorSkin.as ?

Answer 2

Well, it is not pretty but it looks like there are two skins that have to change. ErrorSkin and FocusSkin. The good news is that you can just make them the same. For the skins, just to test, I just copied Adobe's ErrorSkin class entirely. Sadly, even by hard-coding the color into the skin, I can still see one pixel of red peaking through in the corners of the border. I'll try to update this if I fix it. Thanks all.

<s:TextInput id="txt"
            width="200"
            focusSkin="skins.NewErrorSkin"
            horizontalCenter="0"
            verticalCenter="0"
            errorSkin="skins.NewErrorSkin" />

UPDATE

Sounds dumb and it prolly is but just set the errorColor style in the ErrorSkin's processBitmap() function. Here I am hard-coding the error border to be 0x99CC66

override protected function processBitmap():void
{
     // Apply the glow filter
     rect.x = rect.y = 0;
     rect.width = bitmap.bitmapData.width;
     rect.height = bitmap.bitmapData.height;

     target.setStyle("errorColor", 0x99cc66);
     glowFilter.color = 0x99cc66;

     bitmap.bitmapData.applyFilter(bitmap.bitmapData, rect, filterPt, glowFilter);
}