Flex4学习笔记（一）－－基础控件的使用 .

于 2012-02-02 13:17:27 发布
阅读量450 收藏
点赞数
文章标签： flex button autoload image webkit object
 

1.一个最简单的例子，按钮点击事件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<fx:Script>
     <![CDATA[
         import mx.controls.Alert;
         protected function btn_clickHandler(event:MouseEvent): void
         {
             var btn:Button = event.target as Button;
             Alert.show(btn.id);
         }
     ]]>
</fx:Script>
 
<fx:Declarations>
     <!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Button x= "132" y= "179" label = "按钮1" id= "btn1" click= "btn_clickHandler(event)" />
<s:Button x= "280" y= "179" label = "按钮2" id= "btn2" click= "btn_clickHandler(event)" />

 

这个例子我添加了两个按钮，共用了同一个事件，在事件里可以通过event.target来判断到底点击的是哪一个按钮。

 

2.加载图片的例子，并且允许手工设置图片的宽和高

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<fx:Script>
     <![CDATA[
 
         protected function button1_clickHandler(event:MouseEvent): void
         {
             img.width = Number (imgWidth.text);
             img.height = Number (imgHeight.text);
         }
 
     ]]>
</fx:Script>
 
<fx:Declarations>
     <!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<mx:Image x= "106" y= "162" source= "@Embed('/test/1.jpg')" width= "211" height= "182" id= "img" />
<s:Button x= "220" y= "38" label = "设置" click= "button1_clickHandler(event)" />
<s:TextInput x= "109" y= "38" width= "35" id= "imgWidth" />
<s:TextInput x= "162" y= "38" width= "35" id= "imgHeight" />

 

我把1.jpg放到test包里了，写路径的话就需要这么写：@Embed('/test/1.jpg')，不然可以会出现“无法解析用于转换代码”的错误；

Number()用于将给定值转换成数字值，用法很简单；

如果需要让图片加载的时候宽度和高度跟图片原始宽高度一样，可以这么写：<mx:Image x="106" y="162" source="@Embed('/test/1.jpg')" width="100%" height="100%" id="img" autoLoad="true" scaleContent="false"/>

 

3.加载swf的例子

?
1
<mx:SWFLoader x= "5" y= "5" source= "@Embed('a.swf')" scaleContent= "false" autoLoad= "true" width= "600" height= "500" />

 

 

4.调色板的使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<fx:Script>
     <![CDATA[
         import mx.events.ColorPickerEvent;
 
         protected function colorpicker1_changeHandler(event:ColorPickerEvent): void
         {
             text1.setStyle( "color" ,event.color);
         }
 
     ]]>
</fx:Script>
 
<s:TextInput id= "text1" x= "114" y= "120" color= "#FF0000" />
<mx:ColorPicker x= "250" y= "120" change= "colorpicker1_changeHandler(event)" />

该例子有一个输入框，输入框内文字默认是红色，可以通过调色板修改输入框内字体颜色

 

5.下拉框DropDownList和ComboBox的使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<fx:Script>
     <![CDATA[
         import mx.collections.ArrayCollection;
         
         [Bindable]
         private var dp:ArrayCollection = new ArrayCollection([{id: 1 ,name: '苹果' },{id: 2 ,name: '梨' },{id: 3 ,name: '香蕉' }]);
         
         protected function func(item: Object ): String
         {
             return "水果：" + item.name;
         }
 
     ]]>
</fx:Script>
 
<s:DropDownList x= "157" y= "89" dataProvider= "{dp}" labelField= "name" selectedIndex= "0" />
<s:DropDownList x= "157" y= "159" dataProvider= "{dp}" labelFunction= "func" selectedIndex= "0" />
 
<s:ComboBox x= "291" y= "89" dataProvider= "{dp}" labelField= "name" selectedIndex= "0" />
<s:ComboBox x= "291" y= "159" dataProvider= "{dp}" labelFunction= "func" selectedIndex= "0" />

 

使用DropDownList控件，下拉框是只读的，使用ComboBox控件的话，下拉框的内容可以输入；

使用[Bindable]，表示定义的数据可以做为数据源引用，在Flex4中不添加该内容也没有问题，只是代码会有警告提示，建议使用

 

6.使用控件MenuBar添加一个菜单，并且在子菜单点击时执行事件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<fx:Script>
     <![CDATA[
         import mx.controls.Alert;
         import mx.events.MenuEvent;
 
         protected function menubar1_itemClickHandler(event:MenuEvent): void
         {
             Alert.show(event.item.@ label );
         }
 
     ]]>
</fx:Script>
 
<mx:MenuBar x= "118" y= "124" labelField= "@label" itemClick= "menubar1_itemClickHandler(event)" >
     <mx:dataProvider>
         <mx:XMLListCollection>
             <fx:XMLList xmlns= "" >
                 <menu label = "aa" >
                     <item label = "aa1" />
                     <item label = "aa2" />
                 </menu>
                 <menu label = "bb" >
                     <item label = "bb1" />
                     <item label = "bb2" />
                 </menu>                  
             </fx:XMLList>
         </mx:XMLListCollection>
     </mx:dataProvider>
</mx:MenuBar>

 

7.日期控件DateField以及DateChooser的简单用法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<fx:Script>
     <![CDATA[
         import mx.events.CalendarLayoutChangeEvent;
 
         protected function datechooser1_changeHandler(event:CalendarLayoutChangeEvent): void
         {
             text1.text = event.newDate.getFullYear().toString() + "-" + (event.newDate.getMonth()+ 1 ).toString() + "-" + event.newDate.getDate().toString();
         }
 
     ]]>
</fx:Script>
 
<mx:DateField x= "110" y= "128" formatString= "YYYY-MM-DD" />
<mx:DateChooser x= "374" y= "128" change= "datechooser1_changeHandler(event)" />
<s:TextInput x= "374" y= "98" id= "text1" />

1.一个最简单的例子，按钮点击事件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<fx:Script>
     <![CDATA[
         import mx.controls.Alert;
         protected function btn_clickHandler(event:MouseEvent): void
         {
             var btn:Button = event.target as Button;
             Alert.show(btn.id);
         }
     ]]>
</fx:Script>
 
<fx:Declarations>
     <!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Button x= "132" y= "179" label = "按钮1" id= "btn1" click= "btn_clickHandler(event)" />
<s:Button x= "280" y= "179" label = "按钮2" id= "btn2" click= "btn_clickHandler(event)" />

 

这个例子我添加了两个按钮，共用了同一个事件，在事件里可以通过event.target来判断到底点击的是哪一个按钮。

 

2.加载图片的例子，并且允许手工设置图片的宽和高

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<fx:Script>
     <![CDATA[
 
         protected function button1_clickHandler(event:MouseEvent): void
         {
             img.width = Number (imgWidth.text);
             img.height = Number (imgHeight.text);
         }
 
     ]]>
</fx:Script>
 
<fx:Declarations>
     <!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<mx:Image x= "106" y= "162" source= "@Embed('/test/1.jpg')" width= "211" height= "182" id= "img" />
<s:Button x= "220" y= "38" label = "设置" click= "button1_clickHandler(event)" />
<s:TextInput x= "109" y= "38" width= "35" id= "imgWidth" />
<s:TextInput x= "162" y= "38" width= "35" id= "imgHeight" />

 

我把1.jpg放到test包里了，写路径的话就需要这么写：@Embed('/test/1.jpg')，不然可以会出现“无法解析用于转换代码”的错误；

Number()用于将给定值转换成数字值，用法很简单；

如果需要让图片加载的时候宽度和高度跟图片原始宽高度一样，可以这么写：<mx:Image x="106" y="162" source="@Embed('/test/1.jpg')" width="100%" height="100%" id="img" autoLoad="true" scaleContent="false"/>

 

3.加载swf的例子

?
1
<mx:SWFLoader x= "5" y= "5" source= "@Embed('a.swf')" scaleContent= "false" autoLoad= "true" width= "600" height= "500" />

 

 

4.调色板的使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<fx:Script>
     <![CDATA[
         import mx.events.ColorPickerEvent;
 
         protected function colorpicker1_changeHandler(event:ColorPickerEvent): void
         {
             text1.setStyle( "color" ,event.color);
         }
 
     ]]>
</fx:Script>
 
<s:TextInput id= "text1" x= "114" y= "120" color= "#FF0000" />
<mx:ColorPicker x= "250" y= "120" change= "colorpicker1_changeHandler(event)" />

该例子有一个输入框，输入框内文字默认是红色，可以通过调色板修改输入框内字体颜色

 

5.下拉框DropDownList和ComboBox的使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<fx:Script>
     <![CDATA[
         import mx.collections.ArrayCollection;
         
         [Bindable]
         private var dp:ArrayCollection = new ArrayCollection([{id: 1 ,name: '苹果' },{id: 2 ,name: '梨' },{id: 3 ,name: '香蕉' }]);
         
         protected function func(item: Object ): String
         {
             return "水果：" + item.name;
         }
 
     ]]>
</fx:Script>
 
<s:DropDownList x= "157" y= "89" dataProvider= "{dp}" labelField= "name" selectedIndex= "0" />
<s:DropDownList x= "157" y= "159" dataProvider= "{dp}" labelFunction= "func" selectedIndex= "0" />
 
<s:ComboBox x= "291" y= "89" dataProvider= "{dp}" labelField= "name" selectedIndex= "0" />
<s:ComboBox x= "291" y= "159" dataProvider= "{dp}" labelFunction= "func" selectedIndex= "0" />

 

使用DropDownList控件，下拉框是只读的，使用ComboBox控件的话，下拉框的内容可以输入；

使用[Bindable]，表示定义的数据可以做为数据源引用，在Flex4中不添加该内容也没有问题，只是代码会有警告提示，建议使用

 

6.使用控件MenuBar添加一个菜单，并且在子菜单点击时执行事件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<fx:Script>
     <![CDATA[
         import mx.controls.Alert;
         import mx.events.MenuEvent;
 
         protected function menubar1_itemClickHandler(event:MenuEvent): void
         {
             Alert.show(event.item.@ label );
         }
 
     ]]>
</fx:Script>
 
<mx:MenuBar x= "118" y= "124" labelField= "@label" itemClick= "menubar1_itemClickHandler(event)" >
     <mx:dataProvider>
         <mx:XMLListCollection>
             <fx:XMLList xmlns= "" >
                 <menu label = "aa" >
                     <item label = "aa1" />
                     <item label = "aa2" />
                 </menu>
                 <menu label = "bb" >
                     <item label = "bb1" />
                     <item label = "bb2" />
                 </menu>                  
             </fx:XMLList>
         </mx:XMLListCollection>
     </mx:dataProvider>
</mx:MenuBar>

 

7.日期控件DateField以及DateChooser的简单用法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<fx:Script>
     <![CDATA[
         import mx.events.CalendarLayoutChangeEvent;
 
         protected function datechooser1_changeHandler(event:CalendarLayoutChangeEvent): void
         {
             text1.text = event.newDate.getFullYear().toString() + "-" + (event.newDate.getMonth()+ 1 ).toString() + "-" + event.newDate.getDate().toString();
         }
 
     ]]>
</fx:Script>
 
<mx:DateField x= "110" y= "128" formatString= "YYYY-MM-DD" />
<mx:DateChooser x= "374" y= "128" change= "datechooser1_changeHandler(event)" />
<s:TextInput x= "374" y= "98" id= "text1" />

查看评论

  暂无评论

发表评论
haichuanhappy
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值