Flex学习笔记(四)

最新推荐文章于 2018-06-19 18:00:42 发布

原创最新推荐文章于 2018-06-19 18:00:42 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flex #radiobutton #nokia #encoding #button #datagrid

本文档详细介绍了Flex中的常见组件，包括RadioButton, CheckBox, ComboBox, List以及HSlider和VSlider的使用方法和相关属性。通过示例代码展示了如何操作这些组件，如响应事件、改变属性等，帮助开发者了解Flex组件的基本功能。" 51934241,4964923,Octave基础操作指南,"['数值计算', '编程语言', '科学计算', '矩阵运算', '数据处理']

Flex组件 Part .1
拥有丰富的用户组件是Flex的一大特色。除了传统的数据输入控件（Text InputTextArea，CheckBox，RadioButton，ComboBox等等），还包括了一些高级组件，用于维护结构化数据（Tree 组件）和大数据集（DataGrid 组件）。

1、此段代码介绍了RadioButton（RadioButtonGroup），Alert，CheckBox，ComboBox，List这5个常用控件
先看一下代码：

<? 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

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

}
20

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

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

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

< mx:Button label ="提交" click ="Alert.show(option1.selected?'正确的！':'错误的！','您的回答是')" />
61

</ mx:Panel >
62

< 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

< 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
看一下代码

<? 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

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涉及的属性和上面基本相同。可以参考上面写的内容。

<? 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学习笔记(五)