案例学习BlazeDS+Spring之八InSync06“松耦合”UI同步事件通知

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里做的改变。