flex-----数据绑定

1.	
<mx:Label x="64" y="28" text="中国加油" width="207" height="92"  id="msg" fontSize="{fsize.value}"/>
	<mx:HSlider x="64" y="174" width="291" height="24" id="fsize" minimum="10" maximum="50"/>


2.使用绑定变量

<mx:Script>
		<![CDATA[
			[Bindable]
			private var n:int;
			
			
			internal function square(num:int):int{
				return num*num;
			}
		]]>
	</mx:Script>
	<mx:Label x="50" y="53" text="结果" width="59" height="29" fontSize="12"/>
	<mx:TextInput x="103" y="53" id="txt" text="{square(n)}"/>
	<mx:HSlider x="90" y="148" width="353" height="24" id="s_num" minimum="1" maximum="10" snapInterval="1"
		change="{n=s_num.value}"/>

这里使用了[Bindable]标签

3. 固定标签做数据源
<mx:Model id="books">
		<books>
			<book>
			   <name>Flex数据</name>
			   <author>张三</author>
			</book>
		</books>
	</mx:Model>
	
	<mx:Binding source="books.book.name" destination="text_name.text"/>
	<mx:Binding source="books.book.author" destination="text_author.text"/>
	
	
	<mx:Panel x="70" y="43" width="375" height="201" layout="absolute" title="图书信息">
		<mx:Label x="32" y="33" text="书名" width="76" fontSize="12"/>
		<mx:Label x="32" y="61" text="作者" fontSize="12"/>
		<mx:TextInput x="97" y="33" id="text_name"/>
		<mx:TextInput x="97" y="61" id="text_author"/>
	</mx:Panel>


4。通过一个类，绑定类

package com.zhe
{	[Bindable] //这个标签对所有public变量都有绑定
	public class BindClass
	{
		private var n:int;
		public function BindClass()
		{
		}
	
	  // [Bindable]
	    public function get N():int{
	    	return n;
	    }
	    
	    public function set N(x:int):void{
	    	n = x;
	    }
	}
}



	<mx:Script>
		<![CDATA[
			import com.zhe.BindClass;
			internal var br:BindClass = new BindClass();
			
			internal function square(num:int):int{
				return num*num;
			}
			
		]]>
	</mx:Script>
	
	<mx:Label x="50" y="53" text="结果" width="59" height="29" fontSize="12"/>
	<mx:TextInput x="103" y="53" id="txt" text="{square(br.N)}"/>
	<mx:HSlider x="90" y="148" width="353" height="24" id="s_num" minimum="1" maximum="10" snapInterval="1"
		change="{br.N=s_num.value}"/>

6。 小例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import com.zhe.Person;
			[Bindable]
			internal var currentItem:Person; //这是一个传递值的对象
			
			internal function init():void{
				var p1:Person = new Person();
				p1.name = "老张";
				p1.age = 65;
				p1.address="北京";
				p1.job="公务员";
				var item1:listItem=new listItem();
				item1.height=20;
				item1.p = p1;
				item1.addEventListener("selectItem",selectHandler);
				list_yg.addChild(item1);
				item1.y=0;
				
				var p2:Person = new Person();
				p2.name="小李";
				p2.age=10;
				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;//listItem(evt.target)是强制转换
			}
			
		]]>
	</mx:Script>
	
	
	<mx:Panel x="281" y="98" width="303" height="263" layout="absolute" title="员工信息" fontSize="12">
		<mx:Label x="24" y="33" text="姓名:" width="49"/>
		<mx:Label x="24" y="76" text="年龄"/>
		<mx:Label x="28" y="128" text="住址"/>
		<mx:Label x="28" y="166" text="职业"/>
		<mx:TextInput x="81" y="33" id="txt_name" text="{currentItem.name}"/>
		<mx:TextInput x="81" y="128" id="txt_addr" text="{currentItem.address}"/>
		<mx:TextInput x="81" y="166" id="txt_job" text="{currentItem.job}"/>
		<mx:TextInput x="81" y="76" id="txt_age" text="{currentItem.age}"/>
	</mx:Panel>
	<mx:Panel x="40" y="83" width="201" height="278" layout="absolute" title="员工列表" fontSize="12" id="list_yg">
	</mx:Panel>
	
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" 
	click="onClick(event)" text="{p.name}">
	
	<mx:Script>
		<![CDATA[
		//事件，表单，数据元素都集成在一起了，通过evt.target可以拿到表单，通过表单.p可以拿到Person
			import com.zhe.Person;
			public var p:Person; //一个item就是一个拥有员工信息的对象，其实这是使得标签和类绑定了
			
			internal function onClick(evt:MouseEvent):void{
				dispatchEvent(new Event("selectItem"));
			}
		]]>
	</mx:Script>
	
</mx:Label>

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

	}
}