Flex学习笔记（六）——数据的绑定（Binding）

Flex可以将对象绑定到组件上或者将两个组件的值进行绑定。

1、

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init()">

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			
	
			import mx.binding.utils.BindingUtils;			
			
			internal var mylabel:mx.controls.Label=new mx.controls.Label();
			
			[Bidable]  
			private var xml:XML =   
				<users>  
					<user>  
						<name>EladElrom</name>  
						<address>1 Wall Street</address>  
					</user>  
				</users>;  
			
			internal function init():void{
				
				this.addElement(mylabel);
				mylabel.x=300;
				mylabel.y=100;
				mylabel.width=200;
				mylabel.height=50;
				mylabel.text="10";				
				
				//BindingUtils.bindProperty(mylabel,"text",fsize,"value");	
				BindingUtils.bindSetter(setTxt,fsize,"value");
			}
			
			internal function setTxt(txt:String):void{
				mylabel.text=txt;
			}
			
		]]>
	</fx:Script>

	<mx:HSlider x="47" y="170" width="283" id="fsize" minimum="10" maximum="50" />
	<mx:Label x="47" y="34" text="中国加油！" fontSize="{fsize.value}" width="306" height="91" id="msg"/>
	<s:Label x="47" y="100" id="label" text="{xml.user.name}" />  
	
</s:Application>

显示结果如下：

label的文本时xml的一个节点的值。

中国加油的字体根据滑动组件的值而变化。讲组件HSlider的值绑定到msg的属性上。

2、

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
		
			import com.classes.BindClass;
			internal var bc:BindClass=new BindClass();	
			
	
//			[Bindable]
//			private var n:int;				
			

			//[Bindable(event="maxFontSizeChanged")]
//			public function get N():int{
//				return n;
//			}	
//			
//			public function set N(x:int):void{
//				n=x;
//			}		
							
			
			internal function square(num:int):int{
				return num*num;
			}		
		]]>
	</mx:Script>
	
	
	<mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
		 snapInterval="1" id="s_num" change="{bc.n=s_num.value}"/>
	<mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(bc.n)}"/>
	<mx:Label x="66" y="53" text="结果" width="48" fontSize="12" fontWeight="bold"/>
	
</mx:Application>

BindClass.as

package com.classes
{

	[Bindable]
	public class BindClass
	{
		
		public var n:int;		
		
		
		public function BindClass()
		{
		}	
		
		//[Bindable]
		public function get N():int{
				return n;
		}	
		
			
		public function set N(x:int):void{
				n=x;

		}	
		

	}
}

显示结果如下：

将组件s_num的值绑定到bc.n上。然后计算平方。

3、

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" creationComplete="init()">
	
	<mx:Model id="books">
		<books>
			<book>
				<name>FLEX教程</name>
				<author>张三</author>
			</book>
			<book>
				<name>JAVA教程</name>
				<author>WANGWU</author>
			</book>
		</books>
	</mx:Model>
	
	<mx:Binding source="books.book[1].name" destination="txt_name.text"/>
	<mx:Binding source="books.book[1].author" destination="txt_author.text"/>
	
	<mx:Script>
		<![CDATA[
			import com.classes.DymObject;
			
			public var o:Object=new Object();
			public var a:DymObject=new DymObject();
			
			internal function init():void{
				o.name="zhangsan";
				o.age=20;
				
				a.address="beijing";
				
				//trace(o.name+":"+o.age);
				trace(a.address);
			}
		]]>
	</mx:Script>
	
	<mx:Panel x="44" y="24" width="379" height="178" layout="absolute" title="图书信息">
		<mx:Label x="58" y="36" text="书名" fontSize="12" fontWeight="bold"/>
		<mx:Label x="58" y="71" text="作者" fontSize="12" fontWeight="bold"/>
		<mx:TextInput x="111" y="36" id="txt_name"/>
		<mx:TextInput x="111" y="71" id="txt_author"/>
	</mx:Panel>
</mx:Application>

DymObject.as：

package com.classes
{
	public dynamic class DymObject
	{
		public function DymObject()
		{
		}

	}
}

DymObject是一个动态的类。可以在使用的时候添加变量：

a.address="beijing";

结果显示：

4、

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	creationComplete="init()" width="874.5455" height="524.5455" >

	
	<mx:Script>
		<![CDATA[
			
			import com.classes.Person;
			import mx.styles.StyleManager;
			import mx.styles.IStyleManager2;
			import mx.styles.CSSStyleDeclaration;
			
			[Bindable]
			internal var currentItem:Person;
						
			internal function init():void{
				
					list_yg.setStyle("borderColor","#FF0000");
					var cs:CSSStyleDeclaration=new CSSStyleDeclaration("mystyle");
					cs.setStyle("color","blue");
					cs.setStyle("borderColor","#FF0000");
					cs.setStyle("backgroundColor","green");
					cs.setStyle("fontSize",25);				
					
					var manager:IStyleManager2 = StyleManager.getStyleManager(null);
					manager.setStyleDeclaration("Panel",cs,true);
					
					
					var p1:Person=new Person();
					p1.name="老张";
					p1.age=40;
					p1.address="北京";
					p1.job="公务员";
					var item1:listItem=new listItem();
					item1.p=p1;
					item1.addEventListener("selectItem",selectHandler);
					list_yg.addChild(item1);
					item1.y=0;
					
					
					var p2:Person=new Person();
					p2.name="小李";
					p2.age=20;
					p2.address="上海";
					p2.job="程序员";
					var item2:listItem=new listItem();
					item2.p=p2;
					item2.addEventListener("selectItem",selectHandler);
					list_yg.addChild(item2);
					item2.y=item1.height*1;
					
					var p3:Person=new Person();
					p3.name="大刘";
					p3.age=20;
					p3.address="南京";
					p3.job="职员";
					var item3:listItem=new listItem();
					item3.p=p3;
					item3.addEventListener("selectItem",selectHandler);
					list_yg.addChild(item3);
					item3.y=item1.height*2;							
			}
			
			internal function selectHandler(evt:Event):void{
				
				if(evt.target==evt.currentTarget){
					currentItem=listItem(evt.target).p;
					
				}
			}
			
		]]>
	</mx:Script>
	<mx:Panel x="229" y="39" width="352" height="329" layout="absolute"
		  styleName="panelRight" title="员工信息" cornerRadius="6">
		<mx:Label x="35" y="39" text="姓名：" fontSize="12" fontWeight="bold"/>
		<mx:Label x="35" y="84" text="年龄：" fontSize="12" fontWeight="bold"/>
		<mx:Label x="35" y="136" text="住址：" fontSize="12" fontWeight="bold"/>
		<mx:Label x="35" y="188" text="职业：" fontSize="12" fontWeight="bold"/>
		<mx:TextInput x="102" y="37" id="txt_name" fontSize="12" fontWeight="bold" text="{currentItem.name}"/>
		<mx:TextInput x="102" y="82" id="txt_age" fontSize="12" fontWeight="bold" text="{currentItem.age}"/>
		<mx:TextInput x="102" y="134" id="txt_addr" fontSize="12" fontWeight="bold" text="{currentItem.address}"/>
		<mx:TextInput x="102" y="186" id="txt_job" fontSize="12" fontWeight="bold" text="{currentItem.job}"/>
	</mx:Panel>
	<mx:Panel  styleName="panelLeft"  x="49" y="39" width="161" height="329" layout="absolute" title="员工列表" fontSize="12" id="list_yg">
	</mx:Panel>
	<mx:Canvas x="589" y="22" width="200" height="200">
	</mx:Canvas>
	<mx:TextArea x="589" y="230"/>
	<mx:HSlider x="589" y="299"/>
	<mx:Button x="589" y="329" label="Button"/>
	
	
</mx:Application>

Person.as

package com.classes
{
	[Bindable]
	public class Person
	{
		
		public var name:String;
		public var age:int;
		public var address:String;
		public var job:String;		
		
		public function Person()
		{
		}

	}
}

listItem.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" width="91"  height="20" 
	click="onClick(event)" text="{p.name}">

	<mx:Script>
		<![CDATA[
			import com.classes.Person;			
			
			[Bindable]
			public var p:Person;
			
			internal function onClick(evt:MouseEvent):void{
				dispatchEvent(new Event("selectItem"));
				
			}
						
		]]>
	</mx:Script>	
</mx:Label>

运行结果：

根据显示选择的员工显示员工的信息。