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

Flex Modules – Communication Module vers Application

Dans l'article précédent, on a vu comment communiquer entre une application Flex et un module. Voyons maintenant comment créer une communication entre un module et l'application qui le charge.

Les modules peuvent accéder aux propriétés et aux méthodes de l'application parente en utilisant une référence vers la propriété "parentApplication".

L'exemple suivant accède à la propriété "expenses" de l'application parente au chargement du module. Le module utilise ensuite cette propriété, un ArrayCollection, comme source pour la donnée du graphique. Quand l'utilisateur clique sur le bouton, le module appelle la méthode getNewData() de l'application parente qui renvoie un nouvel ArrayCollection pour le Chart:

Le code du module

<?xml version="1.0"?>
<!-- modules/ChartChildModule.mxml -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
           width="100%"
           height="100%"
           creationComplete="getDataFromParent()">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      private var expenses:ArrayCollection;

// Access properties of the parent application.
      private function getDataFromParent():void {
        expenses = parentApplication.expenses;
      }
    ]]>
  </mx:Script>
  <mx:ColumnChart id="myChart"
                  dataProvider="{expenses}">
    <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{expenses}"
                       categoryField="Month"/>
    </mx:horizontalAxis>
    <mx:series>
      <mx:ColumnSeries xField="Month"
                       yField="Profit"
                       displayName="Profit"/>
      <mx:ColumnSeries xField="Month"
                       yField="Expenses"
                       displayName="Expenses"/>
    </mx:series>
  </mx:ColumnChart>
  <mx:Legend dataProvider="{myChart}"/>
  <mx:Button id="b1"
             click="expenses = parentApplication.getNewData();"
             label="Get New Data"/>
</mx:Module>

L'application parente qui va être appelée

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      public var expenses:ArrayCollection = new ArrayCollection([{ Month: "Jan", Profit: 2000, Expenses: 1500 }, { Month: "Feb", Profit: 1000, Expenses: 200 }, { Month: "Mar", Profit: 1500, Expenses: 500 }]);

      public function getNewData():ArrayCollection {
        return new ArrayCollection([{ Month: "Apr", Profit: 1000, Expenses: 1100 }, { Month: "May", Profit: 1300, Expenses: 500 }, { Month: "Jun", Profit: 1200, Expenses: 600 }]);
      }
    ]]>
  </mx:Script>
  <mx:ModuleLoader url="http://www.flex-tutorial.fr/wp-content/uploads/ModuleCommWithApp/ExempleModule.swf"
                   id="m1"/>
</mx:Application>

L'application en ligne

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

Vous pouvez aussi appeler des méthodes et accéder aux propriétés d'autres modules. L'inconvénient avec cette approche est que l'on crée une dépendance avec l'application parente dans le module. En plus de cela, les modules ne sont plus portables sur plusieurs application, sauf si vous avez un comportement dupliqué.

Pour éviter cela, vous devez utiliser des interfaces ActionScript qui assurent la bonne communication entre l'application et ses modules. Cette interface va définir les méthodes et les propriétés auxquelles vous pouvez accéder. Avoir une interface permet de réutiliser l'application et les modules, tant que vous gardez l'interface à jour.