flex-----数据绑定

[code]
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()
{
}

}
}

[/code]