转载:Flex学习笔记(四)

转自:小胖&大胖,作者:Alps Wong,文章链接: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=(initHeightslider.value/100);
10 }
11
12 function doChange2():void {
13 pic2.width=(initWidth slider2.value/100);
14 pic2.height=(initHeightslider2.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效果:

       Alps Wong
2008年8月2日14:33:52