Flex学习笔记(四)

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

Flex学习笔记(四)

你可能感兴趣的:(Flex学习笔记(四))