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