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

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

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

 

下面是完整代码(或 点击这里察看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Script>
8.         <![CDATA[
9.             private function checkBox_change(evt:Event):void {
10.                 var corners:Array = [];
11.                 if (tLeft.selected) {
12.                     corners.push("tl");
13.                 }
14.                 if (tRight.selected) {
15.                     corners.push("tr");
16.                 }
17.                 if (bLeft.selected) {
18.                     corners.push("bl");
19.                 }
20.                 if (bRight.selected) {
21.                     corners.push("br");
22.                 }
23.                 var str:String = corners.join(" ");
24.                 textInput.setStyle("focusRoundedCorners", str);
25.                 focusManager.setFocus(textInput);
26.             }
27.         ]]>
28.     </mx:Script>
30.     <mx:ApplicationControlBar dock="true">
31.         <mx:Form styleName="plain">
32.             <mx:FormItem label="top left (tl):">
33.                 <mx:CheckBox id="tLeft"
34.                         selected="true"
35.                         change="checkBox_change(event);" />
36.             </mx:FormItem>
37.             <mx:FormItem label="top right (tr):">
38.                 <mx:CheckBox id="tRight"
39.                         selected="true"
40.                         change="checkBox_change(event);" />
41.             </mx:FormItem>
42.             <mx:FormItem label="bottom left (bl):">
43.                 <mx:CheckBox id="bLeft"
44.                         selected="true"
45.                         change="checkBox_change(event);" />
46.             </mx:FormItem>
47.             <mx:FormItem label="top right (br):">
48.                 <mx:CheckBox id="bRight"
49.                         selected="true"
50.                         change="checkBox_change(event);" />
51.             </mx:FormItem>
52.         </mx:Form>
53.     </mx:ApplicationControlBar>
55.     <mx:TextInput id="textInput"
56.             focusThickness="10"
57.             cornerRadius="10" />
59. </mx:Application>