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

Flex学习笔记_06 使用组件处理数据和交互_01常用组件（中）

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

文件内容如下：

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 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 version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
	<mx:Model id="images">
      <image>
        <item label="图片1" data="images/Baby01.gif"/>
        <item label="图片2" data="images/Baby02.gif"/>
        <item label="图片3" data="images/Baby03.gif"/>
        <item label="图片4" data="images/Baby04.gif"/>
      </image>
    </mx:Model>	
	<mx:List dataProvider="{images.item}" itemRenderer="ImageItem" x="41" y="52" height="235" width="130">
	</mx:List>
</mx:Application>

 

我们创建一个itemRenderer 上面的代码可调用。

itemRenderer="ImageItem" 证明我们使用刚创建的 itemRenderer 替换List默认的itemRendere 。

Flex是通过 data 属性将数据传递给 itemRenderer 的，在下面代码中直接调用data 就可以了，但并不对数据进行有效性验证。

这里的data代表了上面代码中的item元素。通过data.label来调用item的label属性。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Image width="32" height="32" source="{data.data}"/>
	<mx:Button x="38" y="40" label="{data.label}"/>	
</mx:HBox>

 

1.7 Alert 提示对话框

Alert 组件是一个带有提示信息的弹出式对话框。它出现之后，暂时中止当前的所有用户的交互动作，直到用户关闭窗口。

Alert.show(

  text,  提示信息

  title,  标题

  flags,  代表了窗口出现的按钮：Alert.OK | Alert.CANCEL | Alert.YES | Alert.NO

  parent,  对话框居中的参照对象

  closeHandle,  函数类型，用来捕捉用户的选择

  iconClass,  对话中出现的图标

  defaultButtonFlag  对话中默认处于被选状态的按钮

)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" fontSize="12">
<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import flash.events.MouseEvent
		import mx.events.CloseEvent;
		
		internal function initApp():void{
			btn.addEventListener(MouseEvent.CLICK,handler);
		}
		internal function handler(evt:MouseEvent):void{
			Alert.show("确定要删除所有的图片？","提示信息",Alert.YES | Alert.NO,this,selectHandler, null,Alert.NO);
		}
		internal function selectHandler(evt:CloseEvent):void{
			if (evt.detail==Alert.YES){
				status_txt.text = "选择的是：Yes"
			}else{
				status_txt.text = "选择的是：No"
			}
		}
	]]>
</mx:Script>
	<mx:Button id="btn" x="85" y="168" label="Delete All Images" width="187"/>
	<mx:Label id="status_txt" x="85" y="128" text="目前还没有选择" width="105"/>
	
</mx:Application>