Search code examples
validationapache-flexerror-handlingtextinputflex-spark

Set Spark TextInput Background when fail validation


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?


Solution

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