Flex中Event与Bindable

Categories: Flex; Tagged with: ; @ September 29th, 2008 21:28

[小站博客均为原创, 转载请保留以下信息:

作者:http://liguoliang.com 欢迎访问:Adobe上海用户组: http://riashanghai.com ]

Event:

1.事件派发 Dispatching

Flash.events.EventDispacher类提供了事件dispatch函数,如果需要dispatch事件,则应该考虑继承该类或其子类.如果不能继承该类,则应事先IEventDispatcher接口

2.监听事件 Listening to Events

在监听事件时应首先考虑是否要使用weak referenced.如果事件监听与派发与监听函数有共同的生命周期,则可以使用strong referenced,在其他的大部分情况下,则应使用weak referenced.
需要注意的是, 如果事件派发者属性为Public, 则在任何允许的地方都可以增加监听函数, 从而达到低内聚, 更易于操作.

Bindable的三种实现方式:

1.使用Event实现.

2.MXML中使用大括号实现.

3.AS中使用ChangeWatcher实现.

Event与Bindable举例:

image

有一个Person类:

package com.insprise
{
import flash.events.Event;
import flash.events.EventDispatcher;
import mx.events.PropertyChangeEvent; 

public class Person extends EventDispatcher
{
private var _name:String;
private var _age:int;
private var _desc:String;
/**
* 构造函数
*/
public function Person()
{
super();
}
/**
* Get&Set Name SetName时dispatch一个PropertyChangeEvent事件
*/
[Bindable(event="propertyChange")]
public function get name():String {
trace("Get name: " + _name);
return _name;
}
public function set name(name_:String):void {
if(name_ == _name) {
return;
}
var old:String = this._name;
this._name = name_;
trace("Set Name to: " + name_);
dispatchEvent(PropertyChangeEvent.createUpdateEvent(this,"name",old,name_));
}
/**
* Get&Set age; age被Set的时候会dispatch一个ageChanged事件.
*/
[Bindable(event="ageChanged")]
public function get age():int {
trace("Get age: " + _age);
return _age;
}
public function set age(age_:int):void {
if(age_ == _age) {
return;
}
var old:int = this._age;
this._age = age_;
trace("Set Age to: " + age_);
dispatchEvent(new Event("ageChanged"));

}
/**
* Get&Set Desc;desc被set时会自动dispatch一个PropertyChangeEvent.
*/
[Bindable]
public function get desc():String {
trace("Get desc: " + _desc);
return _desc;
}
public function set desc(desc_:String):void {
if(desc_ == _desc) {
return;
}
var old:String = this._desc;
this._desc = desc_;
trace("Set desc to: " + desc_);
}
}
}

现在我们通过上面提到的三种方式实现Bindable:

1.使用Event Bindable:

import mx.events.PropertyChangeEvent;
import com.insprise.Person;
var person:Person = new Person();
/**
* 监听PropertyChangeEvent与ageChanged事件
*/
private function init():void {
person.addEventListener("propertyChange",propertyChangeHandler);
person.addEventListener("ageChanged",ageChangedHandler);
}

/**
* 通过对PropertyChangeEvent.property判断是name还是desc被监听,更新屏幕
*/
private function propertyChangeHandler(e:PropertyChangeEvent):void {
if(e.property == "name") {
textArea_Name.text = e.newValue.toString();
}else if(e.property == "desc") {
textArea_Desc.text = e.newValue.toString();
}else {
return;
}
trace("view: " + e.property + " Changed");
}

/**
* set age之后更新屏幕
*/
private function ageChangedHandler(e:Event):void {
textArea_Age.text = String(person.age);
}

2.MXML使用大括号:

3.使用AS中的ChangeWatcher

private function init():void {

    var nameWatcher:ChangeWatcher;

    var ageWatcher:ChangeWatcher;

    var descWatcher:ChangeWatcher;

    var canWatche:ChangeWatcher;

    //nameWatcher = BindingUtils.bindProperty(textArea_Name,"text",person,"name");

    ChangeWatcher.watch(person,"name",nameSetter);

    ageWatcher = BindingUtils.bindProperty(textArea_Age,"text",person,String("age"));

    descWatcher = BindingUtils.bindProperty(textArea_Desc,"text",person,"desc",true);

}

private function nameSetter(e:PropertyChangeEvent):void {

    if(e==null) {

        return;

    }

    textArea_Name.text = e.newValue.toString();

    trace("Name Changed by nameSetter on the Event " + e + " to " + e.newValue);

} 


private function ageSetter(e:Event):void {

    //textArea_Age.text = String(person.age);

    trace("Age is setted by ageSetter on the Event " + " to " + person.age);

}

<->



// Proudly powered by Apache, PHP, MySQL, WordPress, Bootstrap, etc,.