ModuleLoader クラスは、setup、ready、loading、unload、progress、error および urlChanged を含むいくつかのイベントをトリガします。これらのイベントを使用して、ロードプロセスの状況を追跡し、モジュールがアンロードされたタイミングや ModuleLoader のターゲット URL が変更されたタイミングを判別することができます。

次の例では、カスタムの ModuleLoader コンポーネントを使用しています。このコンポーネントは、モジュールがメインアプリケーションによってロードされると、それらのモジュールのすべてのイベントを報告します。

カスタムの ModuleLoader：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- modules/CustomModuleLoader.mxml -->
<mx:ModuleLoader xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="init()">
  <mx:Script>
    <![CDATA[
    public function init():void {
        addEventListener("urlChanged", onUrlChanged);
        addEventListener("loading", onLoading);
        addEventListener("progress", onProgress);
        addEventListener("setup", onSetup);
        addEventListener("ready", onReady);
        addEventListener("error", onError);
        addEventListener("unload", onUnload);

        standin = panel;
        removeChild(standin);        
    }
    
    public function onUrlChanged(event:Event):void {
        if (url == null) {
            if (contains(standin))
                removeChild(standin);
        } else {
            if (!contains(standin))
                addChild(standin);
        }
        progress.indeterminate=true;
        unload.enabled=false;
        reload.enabled=false;
    }

    public function onLoading(event:Event):void {
        progress.label="Loading module " + url;
        if (!contains(standin))
            addChild(standin);

        progress.indeterminate=true;
        unload.enabled=false;
        reload.enabled=false;
    }
    
    public function onProgress(event:Event):void {
        progress.label="Loaded %1 of %2 bytes...";
        progress.indeterminate=false;
        unload.enabled=true;
        reload.enabled=false;
    }
    
    public function onSetup(event:Event):void {
        progress.label="Module " + url + " initialized!";
        progress.indeterminate=false;
        unload.enabled=true;
        reload.enabled=true;
    }
    
    public function onReady(event:Event):void {
        progress.label="Module " + url + " successfully loaded!";
        unload.enabled=true;
        reload.enabled=true;

        if (contains(standin))
            removeChild(standin);
    }
    
    public function onError(event:Event):void {
        progress.label="Error loading module " + url;
        unload.enabled=false;
        reload.enabled=true;
    }
    
    public function onUnload(event:Event):void {
        if (url == null) {
            if (contains(standin))
                removeChild(standin);
        } else {
            if (!contains(standin))
                addChild(standin);
        }
        progress.indeterminate=true;
        progress.label="Module " + url + " was unloaded!";
        unload.enabled=false;
        reload.enabled=true;
    }
    
    public var standin:DisplayObject;
    ]]>
  </mx:Script>

  <mx:Panel id="panel" width="100%">
    <mx:ProgressBar width="100%" id="progress" source="{this}"/>
    <mx:HBox width="100%">
      <mx:Button id="unload" 
        label="Unload Module" 
        click="unloadModule()"
      />
      <mx:Button id="reload" 
        label="Reload Module" 
        click="unloadModule();loadModule()"
      />
    </mx:HBox>
  </mx:Panel>
</mx:ModuleLoader>

メインアプリケーション：

<?xml version="1.0"?>
<!-- modules/EventApp.mxml -->
<mx:Application xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var selectedItem:Object;
        ]]>
    </mx:Script>
    <mx:ComboBox 
        width="215" 
        labelField="label" 
        close="selectedItem=ComboBox(event.target).selectedItem"
    >
        <mx:dataProvider>
            <mx:Object label="Select Coverage"/>        
            <mx:Object 
                label="Life Insurance" 
                module="insurancemodules/LifeInsurance.swf"
            />
            <mx:Object 
                label="Auto Insurance" 
                module="insurancemodules/AutoInsurance.swf"
            />          
            <mx:Object 
                label="Home Insurance" 
                module="insurancemodules/HomeInsurance.swf"
            />
        </mx:dataProvider>
    </mx:ComboBox>

    <mx:Panel width="100%" height="100%">
        <CustomModuleLoader id="mod" 
            width="100%" 
            url="{selectedItem.module}"
        />
    </mx:Panel>
    <mx:HBox>
        <mx:Button label="Unload" click="mod.unloadModule()"/> 
        <mx:Button label="Nullify" click="mod.url = null"/>
    </mx:HBox>  
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例で使用している保険のモジュールは、次のように単純な形式です。

<?xml version="1.0" encoding="utf-8"?>
<!-- modules/insurancemodules/AutoInsurance.mxml -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    backgroundColor="#ffffff" 
    width="100%" 
    height="100%"
>
    <mx:Label 
        x="147" 
        y="50" 
        text="Auto Insurance" 
        fontSize="28" 
        fontFamily="Myriad Pro"
    />
    <mx:Form left="47" top="136">
        <mx:FormHeading label="Coverage"/>
        <mx:FormItem label="Latte Spillage">
            <mx:TextInput id="latte" width="200" />
        </mx:FormItem>
        <mx:FormItem label="Shopping Cart to the Door">
            <mx:TextInput id="cart" width="200" />
        </mx:FormItem>
        <mx:FormItem label="Irate Moose">
            <mx:TextInput id="moose" width="200" />
        </mx:FormItem>
        <mx:FormItem label="Color Fade">
            <mx:ColorPicker />
        </mx:FormItem>
    </mx:Form>
</mx:Module>

エラーイベントの使用

error イベントは、何らかの理由でモジュールがロードされなかったときに、安全な方法で失敗させるための機会を与えます。次の例では、Button コントロールを使用して、モジュールをロードおよびアンロードします。error イベントをトリガするには、TextInput コントロールの URL を実在しないモジュールに変更します。エラーハンドラによりユーザーにメッセージが表示され、エラーメッセージがトレースログに書き込まれます。

<?xml version="1.0"?>
<!-- modules/ErrorEventHandler.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        import mx.events.ModuleEvent;
        import mx.modules.*;
        import mx.controls.Alert;
        
        private function errorHandler(e:ModuleEvent):void {
            Alert.show("There was an error loading the module." + 
                " Please contact the Help Desk.");
            trace(e.errorText);
        }
  
        public function createModule():void {
            if (chartModuleLoader.url == ti1.text) {
                // If they are the same, call loadModule.   
                chartModuleLoader.loadModule();
            } else {
                // If they are not the same, then change the url, 
                // which triggers a call to the loadModule() method.
                chartModuleLoader.url = ti1.text;
            }
        }
        
        public function removeModule():void {
            chartModuleLoader.unloadModule();
        }

        ]]>
    </mx:Script>

    <mx:Panel title="Module Example" 
        height="90%" 
        width="90%" 
        paddingTop="10" 
        paddingLeft="10" 
        paddingRight="10" 
        paddingBottom="10"
    >
        <mx:HBox>
            <mx:Label text="URL:"/>
            <mx:TextInput width="200" id="ti1" text="ColumnChartModule.swf"/>
            <mx:Button label="Load" click="createModule()"/>
            <mx:Button label="Unload" click="removeModule()"/>
        </mx:HBox>
        <mx:ModuleLoader id="chartModuleLoader" error="errorHandler(event)"/>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

progress イベントの使用

progress イベントを使用して、モジュールのロード状況を追跡できます。progress イベントのリスナーを追加すると、Flex は、モジュールのロードプロセスの間、リスナーを一定の間隔で呼び出します。リスナーが呼び出されるたびに、イベントの bytesLoaded プロパティを参照できます。この値と bytesTotal プロパティを比較することにより、完了のパーセント値を取得できます。

次の例では、モジュールのロードプロセスの間、完了の程度を報告します。また、ロードがどれほど完了に近づいたかをユーザーに示す、簡単なプログレスバーが作成されます。

<?xml version="1.0"?>
<!-- modules/SimpleProgressEventHandler.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        import mx.events.ModuleEvent;
        import flash.events.ProgressEvent;
        import mx.modules.*;
        
        [Bindable]
        public var progBar:String = "";
        [Bindable]
        public var progMessage:String = "";
        
        private function progressEventHandler(e:ProgressEvent):void {
            progBar += ".";
            progMessage = 
                "Module " +  
                Math.round((e.bytesLoaded/e.bytesTotal) * 100) + 
                "% loaded";
        }

        public function createModule():void {
            chartModuleLoader.loadModule();
        }
        
        public function removeModule():void {
            chartModuleLoader.unloadModule();
            progBar = "";
            progMessage = "";
        }
        ]]>
    </mx:Script>

    <mx:Panel title="Module Example" 
        height="90%" 
        width="90%" 
        paddingTop="10" 
        paddingLeft="10" 
        paddingRight="10" 
        paddingBottom="10"
    >        
        <mx:HBox>
            <mx:Label id="l2" text="{progMessage}"/>
            <mx:Label id="l1" text="{progBar}"/>
        </mx:HBox>  

        <mx:Button label="Load" click="createModule()"/>
        <mx:Button label="Unload" click="removeModule()"/>

        <mx:ModuleLoader 
            id="chartModuleLoader" 
            url="ColumnChartModule.swf" 
            progress="progressEventHandler(event)"
        />
    </mx:Panel>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

モジュールローダーを ProgressBar コントロールに接続することもできます。次の例では、ProgressBar コントロールが含まれる ModuleLoader 用のカスタムコンポーネントを作成します。ProgressBar コントロールは、モジュールのロード状況を表示します。

<?xml version="1.0"?>
<!-- modules/MySimpleModuleLoader.mxml -->
<mx:ModuleLoader xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[        
            private function clickHandler():void {
                if (!url) { 
                    url="ColumnChartModule.swf"; 
                } 
                loadModule();
            }        
        ]]>
    </mx:Script>

    <mx:ProgressBar 
        id="progress" 
        width="100%" 
        source="{this}"
    />
    <mx:HBox width="100%">
      <mx:Button 
        id="load" 
        label="Load" 
        click="clickHandler()"
      />
      <mx:Button 
        id="unload" 
        label="Unload" 
        click="unloadModule()"
      />
      <mx:Button 
        id="reload" 
        label="Reload" 
        click="unloadModule();loadModule();"
      />
    </mx:HBox>
</mx:ModuleLoader>

次の例に示すように、単純なアプリケーション内でこのモジュールを使用できます。

<?xml version="1.0"?>
<!-- modules/ComplexProgressEventHandler.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

    <mx:Panel title="Module Example" 
        height="90%" 
        width="90%" 
        paddingTop="10" 
        paddingLeft="10" 
        paddingRight="10" 
        paddingBottom="10"
    >        
        <mx:Label text="Use the buttons below to load and unload    
            the module."/>
        <local:MySimpleModuleLoader id="customLoader"/>
    </mx:Panel>
    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、すべてのイベントについて ProgressBar の label プロパティを変更するわけではありません。例えば、あるモジュールをロードしてからアンロードした場合、label プロパティは「LOADING 100%」のままです。label プロパティを調整するには、unload や error など、ModuleLoader イベント用の他のイベントハンドラを定義する必要があります。