Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Modules – Utiliser l'évènement progress (ModuleEvent.PROGRESS)

Vous pouvez utiliser l'évènement progress (ModuleEvent.PROGRESS) pour connaitre la progression du chargement d'un module. Quand vous ajoutez un listener sur l'évènement PROGRESS, Flex appelle ce listener à intervalle régulier pendant le chargement du module. Chaque vous que le listener est chargé, vous pouvez regarder la propriété "bytesLoaded" de l'évènement que vous pouvez comparer à la propriété "bytesTotal" pour obtenir un pourcentage d'avancement (en ressortant la bonne vieille règle de 3).

L'exemple suivant indique le niveau de complétion pendant le téléchargement du module. Dans cet exemple, on a aussi une simple barre de progress (en texte) qui montre à l'utilisateur le temps qu'il lui reste à attendre:

<?xml version="1.0"?>
<!-- modules/SimpleProgressEventHandler.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                viewSourceURL="srcview/index.html">
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      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 = "";
      }

      private function onError(event:ModuleEvent):void {
        Alert.show("Impossible de charger le module: " + event.errorText);
      }
    ]]>
  </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="http://www.flex-tutorial.fr/wp-content/uploads/ModuleErrorEvent/modules/insurancemodules/AutoInsurance.swf"
                     progress="progressEventHandler(event)"
                     error="onError(event)"/>
  </mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application