InSync06:增加“松耦合”UI同步事件通知
一、运行DEMO:
1、运行程序:http://localhost:8400/spring-flex-testdrive/insync04/index.html;
2、单击Search按钮,从数据库获取所有的联系人。
3、在Search文本框输入几个字符,单击“Search”按钮,按名字来查找联系人。
4、双击DataGrid里的某个联系人,打开独立的Tab。
5、修改联系人的first name或last name,单击“Save”。注意到DataGrid会自动更新。
6、加入一个新的联系人,单击“Save”创建一个新联系人。注意到这个新联系人将会显示在DataGrid中。
7、删除一个联系人,注意到这个联系人为从DataGrid中被移除。
二、理解代码:
1、insync06.mxml:
在每新建一ContactForm Tab时,即添加监听:
var form:ContactForm = new ContactForm();
form.addEventListener(ContactEvent.CREATED,contactCreatedHandler);
form.addEventListener(ContactEvent.UPDATED,contactUpdatedHandler);
form.addEventListener(ContactEvent.DELETED,contactDeletedHandler);
tn.addChild(form);
form.contact = contact;
tn.selectedChild = form;
这三个事件处理都调用search()方法,重新刷新程序。
private function contactCreatedHandler(event:ContactEvent):void
{
??? search();???????????????
}
search()即:ro.findByName(searchStr.text);
2、ContactForm.mxml
ContactForm使用<fx:Metadata>定义了三个事件,?
??? <fx:Metadata>
??????? [Event(name="contactCreated",type="ContactEvent")]
??????? [Event(name="contactUpdated",type="ContactEvent")]
??????? [Event(name="contactDeleted",type="ContactEvent")]
??? </fx:Metadata>
当创建、更新和删除返回时,即派发这些事件。如:
dispatchEvent(new ContactEvent(ContactEvent.CREATED,contact));???
dispatchEvent(new ContactEvent(ContactEvent.UPDATED,contact));???
dispatchEvent(new ContactEvent(ContactEvent.DELETED,contact));
注:
<fx:Metadata>:
使用 <fx:Metadata> 标签可以在 MXML 文件中插入 metadata 标签。Metadata 标签为 Flex 编译器提供了描述在 Flex 应用程序中如何使用 MXML 组件的信息。Metadata 标签不会被编译为可执行代码,但提供了用于控制如何编译相应的代码部分的信息。
[Event(name="mxml控件事件的名称",type="事件的类型")]
dispatchEvent是ContactForm从父类中继承下来派发事件的方法。
3、ContactEvent.as:
自定义的事件类型,从Event下继承。
package
{
??? import flash.events.Event;
??? public class ContactEvent extends Event
??? {
??????? public static const CREATED:String = "contactCreated";
??????? public static const UPDATED:String = "contactUpdated";
??????? public static const DELETED:String = "contactDeleted";
??????? public var contact:Contact;
??????? public function ContactEvent(type:String,contact:Contact,bubbles:Boolean = true,cancelable:Boolean = false)
?????????? {
?????????????? this.contact = contact;
??????????? super(type,bubbles,cancelable);
??????? }
??? }
}
三、小结:
本DEMO与之前的DEMO不同的之处,在于使用事件同步更新UI中的控件。当联系人被创建、更新或者删除时,ContactForm派发事件。程序中的其它组件作为监听者注册这些事件,当联系人被创建、更新或删除时,按指定的任务处理。在这种情况下,主程序作为监听者注册这些事件,刷新联系人的DataGrid反映在ContactForm里做的改变。