Flex中如何通过borderStyle和borderSides样式设置NumericStepper控件特定边框(上下左右边)的例子

接下来的例子演示了Flex中如何通过borderStyle和borderSides样式设置NumericStepper控件特定边框(上下左右边)。和前面 Flex中如何通过borderThickness样式设置NumericStepper控件边框厚度的例子一样，只有在 borderStyle被设置为“solid”的情况下，才支持 borderSides样式。Demo中分别通过上下左右的CheckBox框设置相应边的显示。

让我们先来看一下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 sidesStr:String;
11.                 var sidesArr:Array = [];
12.                 if (leftCheckBox.selected) {
13.                     sidesArr.push("left");
14.                 }
15.                 if (rightCheckBox.selected) {
16.                     sidesArr.push("right");
17.                 }
18.                 if (topCheckBox.selected) {
19.                     sidesArr.push("top");
20.                 }
21.                 if (bottomCheckBox.selected) {
22.                     sidesArr.push("bottom");
23.                 }
24.                 sidesStr = sidesArr.join(" ");
25.                 numericStepper.setStyle("borderSides", sidesStr);
26.             }
27.         ]]>
28.     </mx:Script>
30.     <mx:ApplicationControlBar dock="true">
31.         <mx:Form styleName="plain">
32.             <mx:FormItem label="border left:">
33.                 <mx:CheckBox id="leftCheckBox"
34.                         selected="true"
35.                         change="checkBox_change(event);" />
36.             </mx:FormItem>
37.             <mx:FormItem label="border right:">
38.                 <mx:CheckBox id="rightCheckBox"
39.                         selected="true"
40.                         change="checkBox_change(event);" />
41.             </mx:FormItem>
42.             <mx:FormItem label="border top:">
43.                 <mx:CheckBox id="topCheckBox"
44.                         selected="true"
45.                         change="checkBox_change(event);" />
46.             </mx:FormItem>
47.             <mx:FormItem label="border bottom:">
48.                 <mx:CheckBox id="bottomCheckBox"
49.                         selected="true"
50.                         change="checkBox_change(event);" />
51.             </mx:FormItem>
52.             <mx:FormItem label="borderThickness:">
53.                 <mx:HSlider id="slider"
54.                         minimum="0"
55.                         maximum="10"
56.                         value="4"
57.                         snapInterval="1"
58.                         tickInterval="1"
59.                         liveDragging="true" />
60.             </mx:FormItem>
61.         </mx:Form>
62.     </mx:ApplicationControlBar>
64.     <mx:NumericStepper id="numericStepper"
65.             borderStyle="solid"
66.             borderThickness="{slider.value}"
67.             borderSides="left right top bottom" />
69. </mx:Application>