Flex中如何通过focusRoundedCorners样式在TextInput控件获得焦点后控制矩形对角圆滑与否的例子

改变TextInput输入框得到焦点时边框的颜色。其实不仅仅是颜色，有时候我们对着一成不变的矩形也会厌烦。接下来的例子就演示了Flex中如何通过focusRoundedCorners样式，在TextInput控件获得焦点后控制矩形对角圆滑与否，使简单的TextInput也更具个性化一些。

让我们先来看一下Demo（

）：

下面是完整代码(或点击这里察看)：
Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Script>
<![CDATA[
private function checkBox_change(evt:Event):void {
var corners:Array = [];
if (tLeft.selected) {
corners.push("tl");
}
if (tRight.selected) {
corners.push("tr");
}
if (bLeft.selected) {
corners.push("bl");
}
if (bRight.selected) {
corners.push("br");
}
var str:String = corners.join(" ");
textInput.setStyle("focusRoundedCorners", str);
focusManager.setFocus(textInput);
}
]]>
</mx:Script>

<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="top left (tl):">
<mx:CheckBox id="tLeft"
selected="true"
change="checkBox_change(event);" />
</mx:FormItem>
<mx:FormItem label="top right (tr):">
<mx:CheckBox id="tRight"
selected="true"
change="checkBox_change(event);" />
</mx:FormItem>
<mx:FormItem label="bottom left (bl):">
<mx:CheckBox id="bLeft"
selected="true"
change="checkBox_change(event);" />
</mx:FormItem>
<mx:FormItem label="top right (br):">
<mx:CheckBox id="bRight"
selected="true"
change="checkBox_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>

<mx:TextInput id="textInput"
focusThickness="10"
cornerRadius="10" />

</mx:Application>