[Flex] Use Custom Event in MXML

http://livedocs.adobe.com/flex/3/html/help.html?content=createevents_3.html

Content in Green Text Must Be the Same

package testclass
{
import flash.events.Event;

public class FileServiceEvent extends Event
{
public static const FILE_SERVICE_LOAD_COMPLETE:String = "fileServiceLoadComplete";
public function FileServiceEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

Event we want to trigger:
package testclass
{
import flash.events.Event;

public class FileServiceLoadCompleteEvent extends FileServiceEvent
{

public function FileServiceLoadCompleteEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

class that may dispatch the event we want to trigger:
package testclass
{
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.filesystem.File;
import flash.net.FileFilter;
import flash.utils.ByteArray;

import mx.controls.Alert;

import testclass.FileServiceLoadCompleteEvent;
        //the following 2 lines are important
[Event(name="fileServiceLoadComplete", type="testclass.FileServiceLoadCompleteEvent")]
[DefaultTriggerEvent("fileServiceLoadComplete")]
public class FileService extends EventDispatcher
{
public static const LOAD_ANY:uint = 0;
public static const LOAD_IMAGE:uint = 1;
public var aaa:uint;
public var fileServiceLoadComplete:FileServiceLoadCompleteEvent;
private var fileLoad:File;
public function FileService()
{
setupFileLoad();

}
private function setupFileLoad():void
{
fileLoad = null;
fileLoad = new File();
fileLoad.addEventListener(Event.SELECT, selectFile);
fileLoad.addEventListener(Event.COMPLETE, loadComplete);
}
public function loadFile(load_type:uint = LOAD_ANY):void
{
switch(load_type)
{
case LOAD_ANY:
fileLoad.browseForOpen("Select a file");
break;
case LOAD_IMAGE:
var filter:Array = [];
filter.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
fileLoad.browseForOpen("Select a image file", filter);
break;
default:
Alert.show("argument 'load_type' wrong");
break;
}
}
private function selectFile(event:Event):void
{
fileLoad.load();
}
private function loadComplete(event:Event):void
{
//dispatchEvent(new Event(Event.COMPLETE));
                        //dispatch our custom event
dispatchEvent(new FileServiceLoadCompleteEvent(FileServiceEvent.FILE_SERVICE_LOAD_COMPLETE));
}

public function getLoadedData():ByteArray
{
if((fileLoad.data == null) || (fileLoad.data.length == 1))
{
Alert.show("getLoadedData Error, data is null");
return null;
}
return fileLoad.data;
}
}
}

in MXML:
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<testclass:FileService id="fileService" fileServiceLoadComplete="fileServiceLoadComplete(event)"/>
<!--<testclass:FileService id="fileService" aaa="5"/>-->
</fx:Declarations>
        //the red part is needless if we declare the red part in the event dispatcher class
<!--<fx:Metadata>
[Event(name="fileServiceLoadComplete", type="testclass.FileServiceLoadCompleteEvent")]
</fx:Metadata>-->
<fx:Script>
<![CDATA[
import testclass.FileServiceLoadCompleteEvent;
import mx.controls.Alert;

private function fileServiceLoadComplete(event:FileServiceLoadCompleteEvent):void
{
//Alert.show("load complete");
img.source = fileService.getLoadedData();
}
]]>
</fx:Script>