Flex学习笔记_06 使用组件处理数据和交互_01常用组件(上)

数据处理,实现交互动作的组件在mx.controls包中。

 

1. 常用组件的使用

 

1.1 Button 按钮

btn.addEventListener(MouseEvent.CLICK.doClick); 为按钮添加鼠标单击事件监听器。

所有可视化组件都有addEventListener方法 ,用于添加对特定事件的监听函数。它有5个参数:

type:String, 事件的类型

listener:Function, 执行的函数名

useCapture:Boolean=false,

priority:int=0,

useWeakReference:Boolean=false

 

MouseEvent 包含所有的鼠标事件。

 

使用<mx:Style>为程序设置样式,以下定义了整个程序的字体为12,背景颜色。

 

在按钮上插入图标: 点选按钮,找到Icon属性,在这里选择图标。对应的MXML代码:icon="@Embed('expand.gif')"。 必须将图标嵌入到SWF中。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">  
  3. <mx:Style>  
  4.     Application{   
  5.         fontSize:12;       
  6.         backgroundGradientColors: #c0c0c0, #c0c0c0   
  7.     }   
  8. </mx:Style>  
  9. <mx:Script>  
  10.     <![CDATA[  
  11.         import mx.core.MovieClipAsset;  
  12.         [Embed(source="expand.gif")]  
  13.         [Bindable]   
  14.         public var myIcon:Class;  
  15.  
  16.  
  17.         import flash.events.MouseEvent;  
  18.           
  19.         internal function initApp():void{  
  20.             btn.addEventListener(MouseEvent.CLICK,doClick);  
  21.         }  
  22.         internal function doClick(evt:MouseEvent):void{  
  23.             btn.enabled = false;  
  24.             label_tip.text = "我是点击后的标签";  
  25.         }  
  26.     ]]>  
  27. </mx:Script>  
  28.     <mx:Button id="btn" x="26" y="74" label="Button" width="76" fillColors="[#004080, #8080ff]" borderColor="#000000" icon="{myIcon}"/>      
  29.     <mx:Label id="label_tip" x="26" y="121" text="我是一个标签" width="258" height="31"/>  
  30. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Style>
	Application{
		fontSize:12;	
		backgroundGradientColors: #c0c0c0, #c0c0c0
	}
</mx:Style>
<mx:Script>
	<![CDATA[
		import mx.core.MovieClipAsset;
		[Embed(source="expand.gif")]
		[Bindable] 
   		public var myIcon:Class;


		import flash.events.MouseEvent;
		
		internal function initApp():void{
			btn.addEventListener(MouseEvent.CLICK,doClick);
		}
		internal function doClick(evt:MouseEvent):void{
			btn.enabled = false;
			label_tip.text = "我是点击后的标签";
		}
	]]>
</mx:Script>
	<mx:Button id="btn" x="26" y="74" label="Button" width="76" fillColors="[#004080, #8080ff]" borderColor="#000000" icon="{myIcon}"/>	
	<mx:Label id="label_tip" x="26" y="121" text="我是一个标签" width="258" height="31"/>
</mx:Application>

 

1.2 CheckBox 复选框

由一段可选的文字和表示状态的图标组成,继承自Button。

记录用户的行为状态(是否选中),文字可选位置:位于组件的左边、右边(默认)、顶部、底部。

visible="{myCheck.selected}" 将visible和myCheck.selected绑定,一旦myCheck.selected变化,visible也会跟着变化。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="340" height="300" fontSize="12" backgroundGradientColors="[#c0c0c0, #c0c0c0]">  
  3.     <mx:CheckBox id="myCheck" x="52" y="247" label="窗口不可见" selected="true" width="111" labelPlacement="right"/>  
  4.     <mx:Panel id="myPanel" x="52" y="30" width="250" height="200" layout="absolute" title="窗口" visible="{myCheck.selected}">  
  5.     </mx:Panel>      
  6. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="340" height="300" fontSize="12" backgroundGradientColors="[#c0c0c0, #c0c0c0]">
	<mx:CheckBox id="myCheck" x="52" y="247" label="窗口不可见" selected="true" width="111" labelPlacement="right"/>
	<mx:Panel id="myPanel" x="52" y="30" width="250" height="200" layout="absolute" title="窗口" visible="{myCheck.selected}">
	</mx:Panel>	
</mx:Application>
 

1.3 RadioButton 单选框

一组Button的集合,供用户多选一。

要保证RadioButton 成为一组,使得选择的结果具有唯一性,groupName属性必须相同。

或者使用RadioButtonGroup组件也可以实现,可以控制一组RadioButton的状态,在监听用户行为时非常方便。RadioButton的groupName属性必须与RadioButtonGroup的id同名。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" label="Radio" fontSize="12">     
  3.     <mx:RadioButtonGroup id="flex"/>  
  4.        
  5.     <mx:RadioButton groupName="flex" x="67" y="106" label="1999" id ="item1"/>  
  6.     <mx:RadioButton groupName="flex" x="67" y="184" label="2004" id ="item2"/>  
  7.     <mx:RadioButton groupName="flex" x="67" y="210" label="2005" id ="item3"/>  
  8.     <mx:RadioButton groupName="flex" x="67" y="132" label="2001" id ="item4"/>  
  9.     <mx:RadioButton groupName="flex" x="67" y="158" label="2003" id ="item5"/>  
  10.     <mx:Label x="55" y="78" text="Flex是哪一年发布的?"/>  
  11.        
  12.     <mx:Label id="answer_txt"  x="159" y="258" width="139"/>  
  13.     <mx:Button x="55" y="257" label="提交" click="answer_txt.text =(flex.selection == item2?'正确!':'错误')"/>  
  14. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" label="Radio" fontSize="12">	
	<mx:RadioButtonGroup id="flex"/>
	
	<mx:RadioButton groupName="flex" x="67" y="106" label="1999" id ="item1"/>
	<mx:RadioButton groupName="flex" x="67" y="184" label="2004" id ="item2"/>
	<mx:RadioButton groupName="flex" x="67" y="210" label="2005" id ="item3"/>
	<mx:RadioButton groupName="flex" x="67" y="132" label="2001" id ="item4"/>
	<mx:RadioButton groupName="flex" x="67" y="158" label="2003" id ="item5"/>
	<mx:Label x="55" y="78" text="Flex是哪一年发布的?"/>
	
	<mx:Label id="answer_txt"  x="159" y="258" width="139"/>
	<mx:Button x="55" y="257" label="提交" click="answer_txt.text =(flex.selection == item2?'正确!':'错误')"/>
</mx:Application>

 

1.4 ButtonBar

也是Button的集合,提供导航功能。

适合只有若干个相关选择,不需要记录用户的状态的情况下使用。

btns.dataProvider = data_arr; 利用AS给ButtonBar传递数据源。根据数据源自动显示。

MXML代码中对ButtonBard的itemClick事件进行了监听。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">  
  3. <mx:Style source="style.css"/>           
  4. <mx:Script>  
  5.     <![CDATA[  
  6.         import mx.events.ItemClickEvent;          
  7.         internal function initUI():void{  
  8.             var data_arr:Array = new Array();  
  9.             data_arr.push("Flex");  
  10.             data_arr.push("Flash");  
  11.             data_arr.push("Flash Media Server");  
  12.             data_arr.push("Flex Data Server");  
  13.               
  14.             btns.dataProvider = data_arr;  
  15.         }  
  16.           
  17.         internal function btn_click_handler(evt:ItemClickEvent):void{  
  18.             tip_txt.text = "点击的按钮:"+evt.index+":"+evt.label;  
  19.         }  
  20.     ]]>  
  21. </mx:Script>  
  22.   
  23.     <mx:ViewStack id="vs">  
  24.         <mx:VBox label="Accounts"/>  
  25.         <mx:VBox label="Leads"/>  
  26.     </mx:ViewStack>    
  27.        
  28.     <mx:ButtonBar id="btns" styleName="Btns"  horizontalGap="5" x="10" y="122" itemClick="btn_click_handler(event)"/>  
  29.     <mx:Label id="tip_txt" x="10" y="193" text="没有点击按钮" height="27" width="261"/>  
  30.     <mx:TabBar x="69" y="276">  
  31.     </mx:TabBar>  
  32.   
  33. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">
<mx:Style source="style.css"/>		
<mx:Script>
	<![CDATA[
		import mx.events.ItemClickEvent; 		
		internal function initUI():void{
			var data_arr:Array = new Array();
			data_arr.push("Flex");
			data_arr.push("Flash");
			data_arr.push("Flash Media Server");
			data_arr.push("Flex Data Server");
			
			btns.dataProvider = data_arr;
		}
		
		internal function btn_click_handler(evt:ItemClickEvent):void{
			tip_txt.text = "点击的按钮:"+evt.index+":"+evt.label;
		}
	]]>
</mx:Script>

	<mx:ViewStack id="vs">
        <mx:VBox label="Accounts"/>
        <mx:VBox label="Leads"/>
    </mx:ViewStack> 
    
	<mx:ButtonBar id="btns" styleName="Btns"  horizontalGap="5" x="10" y="122" itemClick="btn_click_handler(event)"/>
	<mx:Label id="tip_txt" x="10" y="193" text="没有点击按钮" height="27" width="261"/>
	<mx:TabBar x="69" y="276">
	</mx:TabBar>

</mx:Application>

 

<mx:Style source="style.css"/> 从外部引入CSS样式表。

.Btns 定义一个样式。在组件的styleName可以设置,如:styleName="Btns"

文件内容如下:

Js代码 复制代码
  1. Application{   
  2.     fontSize:12;       
  3. }   
  4. .Btns{   
  5.     buttonStyleName: "mybuttonBarButtonStyle";   
  6.     firstButtonStyleName: "mybuttonBarFirstButtonStyle";   
  7.     lastButtonStyleName: "mybuttonBarLastButtonStyle";   
  8. }   
  9.   
  10. .mybuttonBarButtonStyle {   
  11.     color: #990000;   
  12. }   
  13.   
  14. .mybuttonBarFirstButtonStyle {   
  15.     cornerRadius: 4;   
  16. }   
  17.   
  18. .mybuttonBarLastButtonStyle {   
  19.     cornerRadius: 4;   
  20. }  
Application{
	fontSize:12;	
}
.Btns{
   	buttonStyleName: "mybuttonBarButtonStyle";
   	firstButtonStyleName: "mybuttonBarFirstButtonStyle";
   	lastButtonStyleName: "mybuttonBarLastButtonStyle";
}

.mybuttonBarButtonStyle {
   	color: #990000;
}

.mybuttonBarFirstButtonStyle {
   	cornerRadius: 4;
}

.mybuttonBarLastButtonStyle {
   	cornerRadius: 4;
}

  LinkBar和ButtonBar 用法相似。不过他是将LinkButton组合在一起。

 

1.5 ComboBox 下拉选择框

使用ComboBox 重点要理解 DropdownEvent 事件。在列表被弹出或收回时,会分别触发DropdownEvent 的OPEN 和 CLOSE 事件。

bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler) 对CLOSE事件进行了监听。

利用 selectedItem 属性,可以跟踪到用户当前的选择项,层级关系: ComboBox -> ComboBase -> UICompoent

 

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">  
  3.     <mx:Script>  
  4.         <![CDATA[  
  5.             import mx.events.DropdownEvent;           
  6.               
  7.             internal function initUI():void{  
  8.                 var info:Array = new Array();  
  9.                 info.push({label:"Book 1" ,data:"1"});  
  10.                 info.push({label:"Book 2" ,data:"2"});  
  11.                 info.push({label:"Book 3" ,data:"3"});  
  12.                 bookList.dataProvider = info;  
  13.                   
  14.                 bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler)  
  15.             }  
  16.             internal function chooseHandler(evt:DropdownEvent):void{  
  17.                 var item:Object = bookList.selectedItem;                  
  18.                 tip_txt.text = "Select:Label:"+item.label+":data:"+item.data;  
  19.             }  
  20.         ]]>  
  21.     </mx:Script>  
  22.     <mx:ComboBox id="bookList" x="30" y="86" width="160"></mx:ComboBox>  
  23.     <mx:TextArea id="tip_txt" x="30" y="129" height="182" width="178"/>      
  24.        
  25. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">
	<mx:Script>
		<![CDATA[
			import mx.events.DropdownEvent;			
			
			internal function initUI():void{
				var info:Array = new Array();
				info.push({label:"Book 1" ,data:"1"});
				info.push({label:"Book 2" ,data:"2"});
				info.push({label:"Book 3" ,data:"3"});
				bookList.dataProvider = info;
				
				bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler)
			}
			internal function chooseHandler(evt:DropdownEvent):void{
				var item:Object = bookList.selectedItem;				
				tip_txt.text = "Select:Label:"+item.label+":data:"+item.data;
			}
		]]>
	</mx:Script>
	<mx:ComboBox id="bookList" x="30" y="86" width="160"></mx:ComboBox>
	<mx:TextArea id="tip_txt" x="30" y="129" height="182" width="178"/>	
	
</mx:Application>
 

1.6 List 列表组件

层级关系: List ->ListBse ->ScrollControlBase ->UICompoent

在获得数据源后,List组件会分析数据,将每条数据以默认的形式展现出来,这种用来控制数据表现形式的机制称之为 itemRenderer

可以定义自己的itemRenderer 对象,覆盖默认的属性。

拥有data属性是 可以用来作为 itemRenderer 的组件的特点。

Model 标签主要用于定义数据,这些数据经过编译被转化为一般的AS数据对象,可以用做数据绑定。不同的是这些数据不可修改,并且没有明确的数据类型。

image.item 包括了XML数据中所有节点为item的数据,通过dataProvider 属性将数据传递给List组件。

Xml代码 复制代码
  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:Model id="images">  
  4.       <image>  
  5.         <item label="图片1" data="images/Baby01.gif"/>  
  6.         <item label="图片2" data="images/Baby02.gif"/>  
  7.         <item label="图片3" data="images/Baby03.gif"/>  
  8.         <item label="图片4" data="images/Baby04.gif"/>  
  9.       </image>  
  10.     </mx:Model>      
  11.     <mx:List dataProvider="{images.item}" itemRenderer=
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值