Question

How do I specify what a TextInput looks like in the error state? There appears to be a real scarcity of documentation on the subject!

There isn’t an error state, but there is an errorSkin which you can specify (does it have to be a subclass of ErrorSkin?).

I want to set the TextInput’s background color and increase the thickness of the border when validation fails. How do I do this?

Answer 1

Here’s what I ended up with:

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();
    }
}