Flex 自定义消息发布及接受

　　今天在写一个Flex小程序，希望实现如下功能：主页面提供一个输入框供用户输入信息，并且可以选择一个图片和信息一起上传到服务器。我在做图片选择的时候单独写了一个组件，主要功能是让用户选择本地文件并且上传，该组件在主页面中用PopUpManager进行管理，但是当遇到如下需求时出现了问题：如果用户想在文件上传完毕之后能够立即预览到相关信息(例如用户上传一个头像，在上传结束之后用户希望可以看到头像的预览效果)。显然，在Flex中用消息的方法来处理这个问题最合适不过了。

　　我们首先写一个event类。

 

package event
 2 {
 3     import flash.events.Event;
 4     public class ImageUploadedEvent extends flash.events.Event
 5     {
 6         public var image:Object;
 7         public function ImageUploadedEvent()
 8         {
 9             super("ImageUploaded", true, false);
10         }
11     }
12 }

　　注意，我们在这里事先定义好了这个event的type，就是ImageUploaded，这样做可以为后面定义省一些事。

 

　　然后在组件中dispatch这个消息，因为这个组件在选择完文件并且上传之后就关闭了，所以我们最好在组件关闭的时候调用dispatch方法。

 

private function titleWindow_close():void
 2 {                
 3    if(image_uploaded)
 4    {
 5       var evt:ImageUploadedEvent = new ImageUploadedEvent();
 6       evt.image = fileRef.data;
 7       this.dispatchEvent(evt);
 8    }
 9    PopUpManager.removePopUp(this);
10 }

 

　　image_uploaded是判断文件是否已经上传的Boolean值，如果没有上传，我们当然不用发送这个消息，因为即使发送了消息而且主页面也接受了，我们也没有内容可以供用户预览。

 

　　接下来是主页面的部分，我们首先在建立组件的时候给他添加监听器

 

private function popUpImage(evt:MouseEvent):void
2 {
3    var pop_image:PopUpImage = new PopUpImage();
4    pop_image.addEventListener("ImageUploaded",imageUploadedHandler);
5    PopUpManager.addPopUp(pop_image,this,true);
6 }

 

　　然后是imageUploadedHandler函数，其中image是一个Image对象。

 

 

private function imageUploadedHandler(evt:ImageUploadedEvent):void
2 {
3    image.source = evt.image;
4 }

 

　　至此，我们自定一个消息就可以完美的运行了。另外多说几句，网上有很多文章讲到自定义的消息发送和接受，但是很多都没有使用addEventListener的方法，而是将组件以mxml的方式添加到主页面中，然后在组件的属性中添加监听事件。这种做法要注意以下几点：

 

　　1. 组件中一定要有 [Event(name="ImageUploaded",type="event.ImageUploadedEvent")]，这样这个组件才会有这个“属性”

　　2. 主页面中要用一下方式定义监听和组件

　　　　<ns1:YourComponent ImageUploaded="imageUploadedHandler(event)" width="60" height="60">

　　　　 其中xmlns:ns1="*" 定义在application中。