查看上一章Flex學習筆記(三)
Flex組件 Part .1
擁有豐富的用戶組件是Flex的一大特色。除了傳統的數據輸入控件（Text InputTextArea，CheckBox，RadioButton，ComboBox等等），還包括了一些高級組件，用于維護結構化數據（Tree 組件）和大數據集（DataGrid 組件）。
1、此段代碼介紹了RadioButton（RadioButtonGroup），Alert，CheckBox，ComboBox，List這5個常用控件
先看一下代碼：
1
<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" creationComplete="initCombox()">
3 <mx:Script>
4 <![CDATA[
5 import mx.events.DropdownEvent;
6 import mx.validators.ValidationResult;
7 import mx.events.ItemClickEvent;
8 import mx.controls.Alert;
9
10 function checkCard():void {
11 if(card1.selected) {
12 Alert.show('我使用銀聯卡！');
13 } else if(card2.selected) {
14 Alert.show('我使用Visa卡!');
15 } else if(card3.selected) {
16 Alert.show('我使用MasterCard卡！');
17 }
18
19 }
20
21 function addBreakFast():void {
22 breakfast.text="";
23 if(milk.selected) {
24 breakfast.text+="牛奶" +'\n';
25 }
26 if(egg.selected) {
27 breakfast.text+="雞蛋"+'\n';
28 }
29 if(bread.selected) {
30 breakfast.text+="面包"+'\n';
31 }
32 }
33
34 function initCombox():void {
35 var info:Array = new Array();
36 info.push({label:"春",data:"1"});
37 info.push({label:"夏",data:"2"});
38 info.push({label:"秋",data:"3"});
39 info.push({label:"冬",data:"4"});
40 season.dataProvider=info;
41 }
42
43 function closehandle(eve:DropdownEvent):void {
44 sea.text="您選擇了:"+season.selectedItem.label;
45 seavalue.text="值是:"+season.selectedItem.data;
46 }
47 ]]>
48 </mx:Script>
49 <mx:Panel height="90%" width="90%" title="Simple" paddingBottom="10" paddingLeft="10" paddingRight="10"
50 paddingTop="10">
51 <mx:VBox height="100%" width="100%">
52 <mx:HDividedBox height="100%" width="100%">
53 <mx:Panel height="100%" width="50%" title="使用RadionButton" id="p1">
54 <mx:Label text="第29屆夏季奧運會舉辦城市"/>
55 <mx:RadioButton groupName="OlyGame" id="option1" label="BeiJing" paddingLeft="5"/>
56 <mx:RadioButton groupName="OlyGame" id="option2" label="Tokyo" paddingLeft="5"/>
57 <mx:RadioButton groupName="OlyGame" id="option3" label="Moscow" paddingLeft="5"/>
58 <mx:RadioButton groupName="OlyGame" id="option4" label="Singapore" paddingLeft="5"/>
59
60 <mx:Button label="提交" click="Alert.show(option1.selected?'正確的！':'錯誤的！','您的回答是')"/>
61 </mx:Panel>
62
63 <mx:Panel height="100%" width="50%" title="使用RadionButtonGroup" id="p2">
64 <mx:Label text="您的信用卡是"/>
65 <mx:RadioButtonGroup id="card" itemClick="checkCard()"/>
66 <mx:RadioButton groupName="card" id="card1" label="銀聯" paddingLeft="5"/>
67 <mx:RadioButton groupName="card" id="card2" label="Visa" paddingLeft="5"/>
68 <mx:RadioButton groupName="card" id="card3" label="MasterCard" paddingLeft="5"/>
69 </mx:Panel>
70 </mx:HDividedBox>
71 <mx:HDividedBox height="100%" width="100%">
72 <mx:Panel height="100%" width="50%" title="CheckBox的例子" layout="horizontal">
73 <mx:VBox>
74 <mx:CheckBox id="milk" label="牛奶" click="addBreakFast()"/>
75 <mx:CheckBox id="egg" label="雞蛋" click="addBreakFast()"/>
76 <mx:CheckBox id="bread" label="面包" click="addBreakFast()"/>
77 </mx:VBox>
78 <mx:VBox>
79 <mx:Label text="我的早餐"/>
80 <mx:TextArea id="breakfast" verticalScrollPolicy="off" height="60"/>
81 </mx:VBox>
82 </mx:Panel>
83
84 <mx:Panel height="100%" width="50%" title="ComboBox,List的例子" layout="horizontal">
85 <mx:VBox>
86 <mx:Label text="您最喜歡的季節是"/>
87 <mx:ComboBox id="season" width="60" close="closehandle(event)"/>
88 <mx:Label text="您選擇了：" id="sea"/>
89 <mx:Label text="值是：" id="seavalue"/>
90 </mx:VBox>
91 <mx:Spacer width="20%"/>
92 <mx:Box>
93 <mx:Label text="您最熟悉的技術"/>
94 <mx:List height="60" width="90"
95 change="tech.text='您選擇了：'+listField.selectedItem.label" id="listField">
96 <mx:Array>
97 <mx:Object label="Java" data="1"/>
98 <mx:Object label="Flex" data="2"/>
99 <mx:Object label="Struts2.0" data="3"/>
100 </mx:Array>
101 </mx:List>
102 <mx:Label id="tech" text="您選擇了："/>
103 </mx:Box>
104 </mx:Panel>
105 </mx:HDividedBox>
106 </mx:VBox>
107 </mx:Panel>
108</mx:Application>
現在讓我們一個一個的學習。
RadioButton語法：
<mx:RadioButton
groupName="No default."
label="No default."
labelPlacement="right|left|top|bottom"
selected="false|true"
selectedData="No default."
toggle="false|true"
click="Event handler; no default"
/>
幾個關鍵的解釋一下
groupName：通過有多個相同groupName的radioButton組成一個radioButtonGroup組。
Label：需要radionButton顯示的文字，默認的情況顯示在radioButton的右邊。
labelPlacement：控制顯示文字的位置。上下左右任選。
Selected：true表示radionButotn被選中。默認是false。
Toggle：true表示按下但不彈起。False表示按下后馬上彈起（這里效果不明顯，大家可以換成button看看效果）
RadioButtonGroup語法：
<mx:RadioButtonGroup
id="Required - No default."
enabled="true|false"
groupName="No default.
labelPlacement="right|left|bottom|top"
selection="true|false"
click="Event handler; no default."
/>
enabled：控制整組radioButton是否可選。True可選，false不可選。
其他的屬性跟RadioButton一致。
Alert語法:
show(text:String, title:String, flags:Number, parent:MovieClip, listener, icon:String, defButton:Number) : Alert
text：顯示提示內容的字符串
title：提示框的標題
flags：提示框中出現的Button（YES,NO,CHANEL,OK），可以選多個，通過“|”來連接（Alert.YES|Alert.NO）
parent: 對話框居中的參照對象
listener：監聽事件的函數。
Icon：對話框中的圖標
defButton：用來設置光標默認放在那個button上。
CheckBox語法：
<mx:CheckBox
label="No default."
labelPlacement="right|left|bottom|top"
selected="false|true"
click="Event handler; no default."
/>
跟RadionButton基本相同
ComboBox語法：
<mx:ComboBox
dataProvider="No default."
dropdownWidth="Size wide enough to hold text."
editable="false|true"
labelField="No default."
labelFunction="No default."
rowCount="5"
selectedIndex="No default."
selectedItem="No default."
change="Event handler; no default."
close="Event handler; no default."
enter="Event handler; no default."
itemRollOver="Event handler; no default."
itemRollOut="Event handler; no default."
open="Event handler; no default."
scroll="Event handler; no default."
/>
dropdownWidth：下拉列表的寬度（注意不是控件的寬度，而是點擊combox出現的下拉列表的寬度）
editable：true表示下拉列表里面的值都可以修改
rowCount:表示下拉列表中最多可以看見的元素個數，超過這個個數就會出現縱向滾動條。
selectedIndex：返回選中的index值，從0開始。
selectedItem：返回從dataProvide選中的值得引用（這個屬性很重要，利用 selectedItem 屬性，可以跟蹤到用戶當前的選擇項）。
Close，open：是兩個很關鍵的時間監聽。打開觸發Open事件，縮回出發Close事件（相當于DropdownEvent.OPEN和DropdownEvent.CLOSE）
List語法:
<mx:List
alternatingRowColors="No default."
change="Event handler; no default."
rollOverColor="No default."
selectionColor="No default."
selectionEasing="No default."
textDisabledColor="0xFFFFF"
textRollOverColor="0x2B333C"
textSelectedColor="0x05F33"
/>
Chage：點擊時觸發的事件。
其他的都和comboBox相同，只是增加了許多顏色的控制
Flex效果：
2、HSlider，VSlider
看一下代碼
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
3 <mx:Script>
4 <![CDATA[
5 private var initWidth:Number=0;
6 private var initHeight:Number=0;
7 function doChange():void {
8 pic.width=(initWidth* slider.value/100);
9 pic.height=(initHeight*slider.value/100);
10 }
11
12 function doChange2():void {
13 pic2.width=(initWidth* slider2.value/100);
14 pic2.height=(initHeight*slider2.value/100);
15 }
16 ]]>
17 </mx:Script>
18 <mx:Panel width="100%" height="100%">
19 <mx:HDividedBox>
20 <mx:Panel layout="vertical" title="這是HSlider的效果，并且liveDragging=true">
21 <mx:Image source="@Embed('pic/Nokia_7610.png')" id="pic" creationComplete="initWidth=pic.width;initHeight=pic.height;"/>
22 <mx:Label text="拖動滾動條來縮放圖片。"/>
23 <mx:HSlider maximum="100" minimum="1" value="100" snapInterval="1" tickInterval="10" id="slider"
24 labels="['0%','50%','100%']" allowTrackClick="true" liveDragging="true" change="doChange()"/>
25 </mx:Panel>
26 <mx:Panel layout="horizontal" title="這是VSlider的效果，并且liveDragging=false">
27 <mx:Image source="@Embed('pic/Nokia_sm_v_keypad.png')" id="pic2" creationComplete="initWidth=pic.width;initHeight=pic.height;"/>
28 <mx:HBox>
29 <mx:Label text="拖動滾動條來縮放圖片。"/>
30 <mx:VSlider maximum="100" minimum="1" value="100" snapInterval="1" tickInterval="10" id="slider2"
31 labels="['0%','50%','100%']" allowTrackClick="true" liveDragging="false" change="doChange2()"/>
32 </mx:HBox>
33 </mx:Panel>
34 </mx:HDividedBox>
35 </mx:Panel>
36</mx:Application>
HSlider，VSlider語法:
<mx:tagname
allowTrackClick="true|false"
change="Event handler; no default."
labels="Array of strings"
liveDragging="true|false"
maximum="10"
minimum="0"
showToolTip="true|false"
slideDuration="300"
snapInterval="0""
tickInterval="0"
tickThickness="1"
value="Set to minimum"
/>
allowTrackClick：true表示滑條可以定位到鼠標點擊的地點。False則不行，必須手動拖拉滑條到指定地點。
Labels：用array數組來創建滑條的標簽。
liveDragging：true的時候，元素在拖動的時候就會不斷的調整位置。 false的時候，元素只有在鼠標松開的時候才調整位置。默認的情況是false。
Maximum：滑條的最大值
Minimum：滑條的最少值
showToolTip：默認創建的滑動桿都有提示（拖動了多少），如果不需要把此屬性設置為false。
snapInterval：最小滑動間隔
tickInterval：間隔多少顯示距離標記。
Value：滑條的初始值。
Flex效果：
TileList、HorizontalList
TileList 和HorizontalList涉及的屬性和上面基本相同。可以參考上面寫的內容。
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
3 <mx:Panel width="100%" height="100%" title="">
4 <mx:HDividedBox height="100%">
5 <mx:Panel height="100%">
6 <mx:Label text="這是HorizontalList的效果"/>
7 <mx:HorizontalList id="horList" height="70%" columnCount="3" columnWidth="125">
8 <mx:dataProvider>
9 <mx:Array>
10 <mx:Object label="Nokia 6630" icon="@Embed(source='pic/Nokia_6630.png')"/>
11 <mx:Object label="Nokia 6680" icon="@Embed(source='pic/Nokia_6680.png')"/>
12 <mx:Object label="Nokia 7610" icon="@Embed(source='pic/Nokia_7610.png')"/>
13 <mx:Object label="Nokia LGV" icon="@Embed(source='pic/Nokia_lg_v_keypad.png')"/>
14 <mx:Object label="Nokia SMV" icon="@Embed(source='pic/Nokia_sm_v_keypad.png')"/>
15 </mx:Array>
16 </mx:dataProvider>
17 </mx:HorizontalList>
18 </mx:Panel>
19 <mx:Panel height="100%">
20 <mx:Label text="這是TileList的效果"/>
21 <mx:TileList maxColumns="2" columnWidth="125" rowHeight="250" height="50%" width="55%">
22 <mx:dataProvider>
23 <mx:Array>
24 <mx:Object label="Nokia 6630" icon="@Embed(source='pic/Nokia_6630.png')"/>
25 <mx:Object label="Nokia 6680" icon="@Embed(source='pic/Nokia_6680.png')"/>
26 <mx:Object label="Nokia 7610" icon="@Embed(source='pic/Nokia_7610.png')"/>
27 <mx:Object label="Nokia LGV" icon="@Embed(source='pic/Nokia_lg_v_keypad.png')"/>
28 <mx:Object label="Nokia SMV" icon="@Embed(source='pic/Nokia_sm_v_keypad.png')"/>
29 </mx:Array>
30 </mx:dataProvider>
31 </mx:TileList>
32 </mx:Panel>
33 </mx:HDividedBox>
34 </mx:Panel>
35</mx:Application>
Flex效果：
查看下一章Flex學習筆記(五)
PS：抱怨一下，連續工作兩個禮拜了，該死的加班，真他媽的！
Alps Wong
2008年8月2日14:33:52