在
上一篇讨论了flex中数据绑定的原理,这里看一下实际的例子,代码如下:
<?
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 mx.events.PropertyChangeEvent;
import test.BindableClass;
[Bindable]
private var intValue:int = 100;
private var bc:BindableClass = new BindableClass();
private function init():void{
this.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,onChange);
bc.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,onChange);
}
private function onChange(event:PropertyChangeEvent){
msgText.text = msgText.text+"src="+
event.source+" target="+
event.target+" curentTarget="+
event.currentTarget+" newValue="+
event.newValue+" ";
}
]]>
</
mx:Script
>
<
mx:Button
id
="btn1"
width
="{intValue}"
label
="{bc.str+String(intValue)}"
/>
<
mx:Button
x
="200"
width
="{300-btn1.width}"
/>
<
mx:Button
y
="30"
label
="Button"
click
="intValue+=1;"
/>
<
mx:Button
x
="100"
y
="30"
label
="Button"
click
="bc.str+='a';"
/>
<
mx:TextArea
id
="msgText"
y
="60"
height
="300"
width
="550"
/>
</
mx:Application
>
test.BindableClass如下:
package test
{
[Bindable]
public class BindableClass
{
public var str:String = "width=";
}
}
flex中的数据绑定主要通过mxml中标签的属性定义实现,将属性值设置为用大括号“{}”标识的数据源,则该数据源指向的数据就被绑定到组件的属性上。
在上面的例子中,使用了几种数据源:
1. mxml的Script中定义的变量(该变量已声明[Bindable]标记): width ="{intValue}"
2. ActionScript类中定义的变量(该类已经声明[Bindable]标记): label ="{bc.str+String(intValue)}"
3. mxml中其他组件的属性: width ="{300-btn1.width}"
4. 可以将运算的结果作为数据源.
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
test.BindableClass如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
flex中的数据绑定主要通过mxml中标签的属性定义实现,将属性值设置为用大括号“{}”标识的数据源,则该数据源指向的数据就被绑定到组件的属性上。
在上面的例子中,使用了几种数据源:
1. mxml的Script中定义的变量(该变量已声明[Bindable]标记): width ="{intValue}"
2. ActionScript类中定义的变量(该类已经声明[Bindable]标记): label ="{bc.str+String(intValue)}"
3. mxml中其他组件的属性: width ="{300-btn1.width}"
4. 可以将运算的结果作为数据源.