Flex数据绑定陷阱:常见的误用和错误(二)
作者:medcl 类型:编译 来源:9RIA.com天地会
原文地址:http://www.adobe.com/devnet/flex/articles/databinding_pitfalls_03.html
第一条
第二条
尝试绑定一个没有包含IPropertyChangeNotifier接口的类
实现IPropertyChangeNotifier接口的类,必须在类改变属性时派发事件并且任何嵌套类必须作为公共属性被曝光。因此,你能发现类里的属性何时改变了。例如,让我们来看一下UIComponent类的签名(见图3)。UIComponent类确实实现了发布属性改变事件,这个一旦某个属性被改变就会派发一个事件的接口。

图3.UIComponent类的签名
现在看下下面这个控制用户信息的类:
{
public final class UserInfo
{
public var userName:String;
public var password:String;
public function UserInfo()
{
}
}
}
如果你尝试绑定用户信息类的某个属性刀Label的text属性上,按照下面的说明这么写的话,这个绑定将不会成功:
<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"
minWidth="1024" minHeight="768"
creationComplete="creationCompleteHandler()">
<fx:Script>
<![CDATA[
import vo.UserInfo;
[b][Bindable][/b]
private var userInfo:UserInfo = new UserInfo();
protected function creationCompleteHandler():void
{
userInfo.userName = "EladElrom";
}
]]>
</fx:Script>
<s:Label id="lbl" text="{userInfo.userName}" />
</s:Application>
因为这段代码尝试去绑定一个没有实现IPropertyChangeNotifier接口的类,绑定机制将不会工作。在这个例子中,你将看到问题窗口下的以下提示信息(见图4):数据绑定将不能实现侦测userName的任务。

图4.问题面板显示的警告信息
要让前面的数据绑定能够工作,你可以将[Bindable]标签加到类声明前面。这将使得这个类的所有公共属性能够被绑定。Flex的编译器将会为你生成公共的getter和setter方法,这些将会包含使绑定工作的所有必要代码。或者如果你不希望使类的所有属性都可以绑定,你可以将[Bindable]标签加到特定的属性前面。
{
[Bindable]
public final class UserInfo
{
public var userName:String;
public var password:String;
public function UserInfo()
{
}
}
}
ObjectProxy类
数据绑定要求被绑定的类实现IPropertyChangeNotifier接口,否则该对象将不能被绑定。
尽管如此,类/属性或变量,如原始变量,没有标记[Bindable]标签不能实现这个接口。
如果这个类是你自己写的类,你所需要做的就是添加[Bindable]元数据标签。
如果不是你自己的类,你又希望绑定它,或你只是希望运行时添加绑定功能,你可以使用ObjectProxy类。
ObjectProxy封装一个没有绑定的类并在这个被绑定类的任何属性改变时派发属性改变事件,
使得你能监听你程序里的该对象的属性改变。
你可以在Adobe Flex 4语言参考里找到更多关于ObjectProxy类的更多信息。
下面的例子使用了ObjectProxy类。我创建了一个ObjectProxy的实例并把我希望看到的对象传给它,在这个例子里是UserInfo。接着我添加了一个事件监听,来跟踪UserInfo各项的改变。
<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"
minWidth="1024" minHeight="768"
creationComplete="creationCompleteHandler()">
<fx:Script>
<![CDATA[
import mx.events.PropertyChangeEvent;
import mx.utils.ObjectProxy;
import vo.UserInfo;
private var userInfo:UserInfo = new UserInfo();
private var objectProxy:ObjectProxy;
protected function creationCompleteHandler():void
{
objectProxy = new ObjectProxy( userInfo );
objectProxy.addEventListener( PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChange );
objectProxy.userName = "EladElrom";
objectProxy.password = "123";
}
private function onPropertyChange( event:PropertyChangeEvent ):void
{
lbl.text = event.newValue.toString();
}
]]>
</fx:Script>
<s:Label id="lbl" />
</s:Application>
- 上一篇:
- Flex数据绑定陷阱:常见的误用和错误(
- 没有相关教材
- 最近更新
