The following example shows how you can toggle which sides of a Flex TextInput control display the borderSides and borderStyle styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/08/displaying-a-border-on-specific-sides-of-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function setBorderSides():void {
var arr:Array = [];
if (leftCheckBox.selected) {
arr.push("left");
}
if (rightCheckBox.selected) {
arr.push("right");
}
if (topCheckBox.selected) {
arr.push("top");
}
if (bottomCheckBox.selected) {
arr.push("bottom");
}
textInput.setStyle("borderSides", arr.join(" "));
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="left:">
<mx:CheckBox id="leftCheckBox"
selected="true"
change="setBorderSides();" />
</mx:FormItem>
<mx:FormItem label="right:">
<mx:CheckBox id="rightCheckBox"
selected="true"
change="setBorderSides();" />
</mx:FormItem>
<mx:FormItem label="top:">
<mx:CheckBox id="topCheckBox"
selected="true"
change="setBorderSides();" />
</mx:FormItem>
<mx:FormItem label="bottom:">
<mx:CheckBox id="bottomCheckBox"
selected="true"
change="setBorderSides();" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TextInput id="textInput"
borderSides="left right"
borderColor="red"
borderStyle="solid" />
</mx:Application>
{ 1 comment… read it below or add one }
Step 1. On focusIn, left side of flex textinput control become light blue,
Step 2. At the validation, entire control border become red and left side of the control become, thick red vertical line,
Step 3. Now when I gradually delete additional letters from the textinput control, entire red outline border automatically removed, but I can see red think line of the left side of the textinput control is still there,
My requirements are,
1. Validation colors need to change.
2. After validation, remain left red think vertical line need to change to normal focusIn color(light blue)
Can anyone help me to achieve this, is that event fire, CSS changes, function overwrite.
Thanks in advanced.