查看上一章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