查看上一章
Flex学习笔记(三)Flex组件 Part .1
拥有丰富的用户组件是Flex的一大特色。除了传统的数据输入控件(Text InputTextArea,CheckBox,RadioButton,ComboBox等等),还包括了一些高级组件,用于维护结构化数据(Tree 组件)和大数据集(DataGrid 组件)。
1、此段代码介绍了RadioButton(RadioButtonGroup),Alert,CheckBox,ComboBox,List这5个常用控件
先看一下代码:

Code
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语法:

Code
<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语法:

Code
<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语法:

Code
<mx:CheckBox
label="No default."
labelPlacement="right|left|bottom|top"
selected="false|true"
click="Event handler; no default."
/>
跟RadionButton基本相同
ComboBox语法:

Code
<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语法:

Code
<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效果:
(文/alps 出处/blogjava)
| 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。 |