Set Spark TextInput Background when fail validation - validation

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

Answer 2

you should use errorString property to activate error state
Flex, any way to programmatically highlight a field in red the way the validators do?
have a look on this answer, I think it will help you to understand

Answer 3

As far as I know, there's no easy way to achieve this. The problem is that in error state component doesn't change it's own skin, it's just adds instance of errorSkin as new child. Here's code from 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;
}
}
If you are adding errorSkin and extend it from SparkSkin it will have zero sizes. Of course you can set its width and height properties to parent component, but then it will overlap this parent component.
Mostly the same thing will happen if you are using skin inherited from ErrorSkin. But you need to do something with it's bitmap property. And still it will be over your main component. Yes, you can interchange error skin and main skin then make main skin transparent and maybe achieve what you need, but I advice to create your own component kinda like this:
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>
And I will appreciate if someone will guide me to better solution of this problem, because I have it too =)