Flex 3 组件与数据间的双向绑定-优快云博客

本文介绍了一个使用Flex进行数据与组件绑定的实际案例。通过创建自定义面板MyPanel，并利用BindingUtils实现数据与界面元素间的双向绑定，实现了动态更新界面内容的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近才开始学Flex，感觉还真是一个很不错的东西！
关于数据与组件之间的绑定，自己研究了几天，外加其他几位大大的分享，才有所建树，至少是现在做的项目可以完成了。记录在这里，免得以后忘记了，也给初学者分享一下！

MyTest.xmxl


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" styleName="panelControlBar" creationComplete="init()" xmlns:my="my.*" xmlns:ns1="*">
	<mx:Panel x="10" y="10" width="546" height="489" layout="absolute">
	<mx:TileList x="10" y="10" width="438" height="429" rowCount="5" columnCount="5" id="tile_list"
	 dataProvider="{arrayCon}">
	 <mx:itemRenderer>
	  <mx:Component>

	  	<my:MyPanel title="{data.title}"
	  		creationComplete="BindingUtils.bindProperty(data, 'good', this, 'good');
	  		BindingUtils.bindProperty(data,'title',this,'title');">
	  		<mx:Script>
	  			<![CDATA[
	  				import mx.binding.utils.BindingUtils;
	  			]]>
	  		</mx:Script>
	  	</my:MyPanel>
	  </mx:Component>
	 </mx:itemRenderer>
	 </mx:TileList>
	</mx:Panel>
	<mx:Button x="10" y="510" label="show ArrayCollection" click="onClick()"/>
	<mx:Script>
	<![CDATA[
		import mx.utils.ObjectProxy;
		import mx.controls.Alert;
		import mx.binding.utils.BindingUtils;
		import my.MyPanel;
		import mx.containers.Panel;
		import mx.controls.Button;
		import mx.collections.ArrayCollection;

		[Bindable]
		private var arrayCon:ArrayCollection=new ArrayCollection();

		private function init():void {
			for(var i:Number=0;i<9;i++) {
				var op:ObjectProxy=new ObjectProxy();
				op.title="Title";
				op.good="123";
				this.arrayCon.addItem(op);
			}
		}

		private function onClick():void {
			var str:String = "";
			for (var i:int = 0; i < arrayCon.length; i++) {
				var o:ObjectProxy=arrayCon.getItemAt(i) as ObjectProxy;
				str += o.title + "    "+o.good+"      ";
			}
			mx.controls.Alert.show(str);	

		}
	]]>
	</mx:Script>
</mx:Application>

MyPanel.as


package my {	
	import flash.events.Event;
	import flash.events.MouseEvent;

	import mx.binding.utils.BindingUtils;
	import mx.containers.Panel;
	import mx.controls.Label;	
	public class MyPanel extends Panel {

		private var _str:String="111";

		public function MyPanel() {			
			super();
			var label:Label=new Label();
			label.text=_str;
			BindingUtils.bindProperty(label,"text",this,"good");
			this.addChild(label);
			this.addEventListener(MouseEvent.CLICK,changeTitle);		
		}

		private function changeTitle(evt:MouseEvent):void{			
			this.title="good";	
			this.good="study";			
		}


		public function set good(str:String):void{//需要绑定的自定义属性
			_str=str;
			dispatchEvent(new Event("changeNIMAIPI"));
		}

		[Bindable(event="changeNIMAIPI")]
		public function get good():String{
			return _str;
		}

	}
}