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

Lier directement un ModuleLoader à une ProgressBar

Dans l'exemple ci-dessus, on définit soit même les valeurs des champs texte suivant ce que nous renvoie l'évènement progress. Flex donne la possiblité de connecter directement un ModuleLoader à une ProgressBar. L'exemple suivant crée un composant custom à partir de ModuleLoader qui inclut un composant ProgressBar. Cette ProgressBar indique le taux de chargement du module:

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

Vous pourrez ensuite utiliser ce module dans une application comme dans cet exemple:

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

Cet exemple ne modifie pas la propriété "label" de la ProgressBar pour tous les évènements. Par exemple, si vous chargez puis décharger un module, la propriété "label"va rester à "LOADING 100%". Pour ajuster cette valeur de label, vous devez définir des handlers pour les autres évènements de ModuleLoader tels que unload ou error.