14.7.创建个性化可绑定的属性

2023-07-22 12:39:03

字体：大中小

来源：转载

供稿：网友

14.7.1 问题
我想创建一个基于某种特殊的而非依赖于propertyChange 事件的数据绑定。
14.7.2. 解决办法
设置[Bindable]标签的event 属性，使用一个字符串做为类型的参数来进行事件的分发。
14.7.3. 讨论
Flex 框架中的数据绑定的基础其实是一个基于事件的系统。默认的数据绑定的事件类型是分发到propertyChange 事件。在框架内部，对于目标属性数据的更新并不一定是直接由数据绑定的源直接分发过去的。你可以在一个数据绑定语句中自定义一个事件类型，通过使用[Bindable]标签的event 属性。例如：

-ActionScript

[Bindable(event="myValueChanged")]

当你覆盖了默认的[Bindable]标签的event 属性的定义，你必须分布指定的事件来使数据绑定生效。

接下来的例子使用了自定义的绑定事件来更新目标属性的值。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
private var _firstName:String;
private var _lastName:String;
public static const FIRST_NAME_CHANGED:String = "firstNameChanged";
public static const LAST_NAME_CHANGED:String = "lastNameChanged";
private function clickHandler():void
{
firstName = fnInput.text;
lastName = lnInput.text;
}
[Bindable(event="firstNameChanged")]
public function get firstName():String
{
return _firstName;
}
public function set firstName( str:String ):void
{
_firstName = str;
dispatchEvent( new Event( FIRST_NAME_CHANGED ) );
}
[Bindable(event="lastNameChanged")]
public function get lastName():String
{
return _lastName;
}
public function set lastName( str:String ):void
{
_lastName = str;
dispatchEvent( new Event( LAST_NAME_CHANGED ) );
}

]]>
</mx:Script>
<mx:Panel title="User Entry."
paddingLeft="5" paddingRight="5"
paddingTop="5" paddingBottom="5">
<mx:HBox>
<mx:Label text="First Name:" />
<mx:TextInput id="fnInput" />
</mx:HBox>
<mx:HBox>
<mx:Label text="Last Name:" />
<mx:TextInput id="lnInput" />
</mx:HBox>
<mx:Button label="submit" click="clickHandler();" />
<mx:HRule width="100%" />
<mx:Label text="You Entered:" fontWeight="bold" />
<mx:HBox>
<mx:Label text="First Name:" />
<mx:Text text="{firstName}" />
</mx:HBox>
<mx:HBox>
<mx:Label text="Last Name:" />
<mx:Text text="{lastName}" />
</mx:HBox>
</mx:Panel>
</mx:Application>

当用户提交了输入的数据，属性firstName 和lastName 得到了更新。在各自的setter 方法，对应的在[Bindable]中定义的事件被触发，从而更新了目标的值。

自定义的绑定属性的一个好处是可以自由支配何时来对目标数据进行更新。因为数据绑定是基于一个事件模型，使用自定义的绑定为你提供一种更好的手段来判断何时或者是否该事件是否需要触发。

接下来你的例子添加了一个记时器来推迟分发一个数据绑定的事件：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initHandler();">
<mx:Script>
<![CDATA[
private var _timer:Timer;
private var _firstName:String;
private var _lastName:String;
public static const FIRST_NAME_CHANGED:String = "firstNameChanged";
public static const LAST_NAME_CHANGED:String = "lastNameChanged";
private function initHandler():void
{
_timer = new Timer( 2000, 1 );
_timer.addEventListener( TimerEvent.TIMER_COMPLETE,
timerHandler );
}
private function clickHandler():void
{
firstName = fnInput.text;
lastName = lnInput.text;
}
private function timerHandler( evt:TimerEvent ):void
{
dispatchEvent( new Event( FIRST_NAME_CHANGED ) );
}
[Bindable(event="firstNameChanged")]
public function get firstName():String
{
return _firstName;
}
public function set firstName( str:String ):void
{
_firstName = str;
_timer.reset();
_timer.start();
}
[Bindable(event="lastNameChanged")]
public function get lastName():String
{
return _lastName;
}
public function set lastName( str:String ):void
{
_lastName = str;
dispatchEvent( new Event( LAST_NAME_CHANGED ) );
}

]]>
</mx:Script>
<mx:Panel title="User Entry."
paddingLeft="5" paddingRight="5"
paddingTop="5" paddingBottom="5">
<mx:HBox>
<mx:Label text="First Name:" />
<mx:TextInput id="fnInput" />
</mx:HBox>
<mx:HBox>
<mx:Label text="Last Name:" />
<mx:TextInput id="lnInput" />
</mx:HBox>
<mx:Button label="submit" click="clickHandler();" />
<mx:HRule width="100%" />
<mx:Label text="You Entered:" fontWeight="bold" />
<mx:HBox>
<mx:Label text="First Name:" />
<mx:Text text="{firstName}" />
</mx:HBox>
<mx:HBox>
<mx:Label text="Last Name:" />
<mx:Text text="{lastName}" />
</mx:HBox>
</mx:Panel>
</mx:Application>

事件类型还是定义在firstName 属性隐含的getter 方法，但是事件分放则是由一个计时器实例来实现了。当你运行这段程序时，数据绑定到lastName 属性会立即生效，因为自定义的事件分放是setter 方法的属性。然而对于firstName 属性的目标的数据更新，则会2 秒后才生效，因为计时器实例被设置用于分发自定义的firstNameChanged 事件。

上一篇：17.4.从共享对象中读取数据

下一篇：14.8.绑定到一个一般的对象