Adobe Flex Tutorial - Adobe Flex Tutorial

13oct/090

Flex Modules – Les évènements de ModuleLoader (ready, loading, …)

La classe ModuleLoader propage plusieurs évènements, dont "setup", "ready", "loading", "unload", "progress", "error", "urlChanged". Vous pouvez utiliser ces évènements pour vérifier la progression du chargement, savoir quand le module a été déchargé et quand la propriété '"url" du moduleloader a été modifiée.

L'exemple suivant utilise un composant ModuleLoader personnalisé. Ce composant va redispatcher tous les évènements des modules pendant qu'ils sont chargés par l'application principale:

Le ModuleLoader Custom:

<?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>

L'application principale

<?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="Auto Insurance"
                 module="modules/insurancemodules/AutoInsurance.swf"/>
      <mx:Object label="Home Insurance"
                 module="modules/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>

Un exemple de module chargé

<?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>