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

Flex Modules – Créer une application Flex modulaire

Pour créer une application Flex (ou Air) modulaire, vous devez séparer vos classes en modules Flex avec en plus, une application qui charge ces modules.

Pour créer une application modulaire:

• Créez un ou des modules. Un module crée en MXML est un fichier dont le tag XML principal est <mx:Module>. Les modules écrits en AS3 doivent hériter soit de Module, soit de ModuleBase.
• Compilez chaque module comme une application. Pour cela, vous pouvez utiliser le compilateur mxmlc en ligne de commande ou celui de Flash Builder
• Créez une classe Application. C'est typiquement un fichier MXML dont le tag principal est le tag <mx:Application>, mais cela peut aussi être un objet application Flex crée en ActionScript
• Dans l'application, utilisez le tag <mx:ModuleLoader> pour charger chacun des modules. Vous pouvez aussi charger les modules en utilisant les méthodes de mx.modules.ModuleLoader et mx.modules.ModuleManager.

Création de Modules Flex

Les modules sont des classes tout comme les fichiers de type Application. Vous pouvez les créer soit en ActionScript, ou en héritant d'une classe Flex en utilisant les tags MXML. Voici comment créer des modules en MXML et en ActionScript.

Création de modules en MXML

Pour créer un module en MXML, vous devez hériter de la classe mx.modules.Module et créant un nouveau fichier dont le tag principal est <mx:Module>. Dans ce tag, assurez-vous d'avoir bien ajouté les namespaces utilisés dans ce module. Vous devez aussi ajouter une déclaration de type XML tout au début du fichier comme ceci:

<?xml version="1.0"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
           width="100%"
           height="100%">
  <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 }]);
    ]]>
  </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:Module>

Après avoir crée un module, il faut le compiler (on verra la procédure dans un prochain tutorial). Une fois que votre module est compilé en un fichier SWF, vous pouvez le charger dans une application ou dans un autre module.

Pour créer un module MXML dans Flex Builder, il vous suffit de faire clic droit sur votre projet, New > MXML Module.

Création de modules en ActionScript

Pour créer un module en ActionScript, vous devez créer une classe qui hérite soit de mx.modules.Module, soit de mx.modules.ModuleBase.

Hériter de Module et utiliser le tag <mx:Module> reviennent à la même chose. Vous pouvez hériter de cette classe si votre module interagit avec le framework Flex, typiquement en ajouter des objets à la liste d'affichage ou en créant des interactions avec des objets visibles.

Si votre module n'inclut pas de code provenant du framework, vous pouvez créer une classe qui hérite de ModuleBase. Si vous utilisez ModuleBase, votre module sera plus petit que si vous utilisez un module basé sur la classe Module car il n'a aucune autre dépendance avec les classes du framework. L'exemple suivant crée un simple module que ne contient pas de code venant du framework et hérite donc de la classe ModuleBase:

package {
  import mx.modules.ModuleBase;
  public class SimpleModule extends ModuleBase {
   public function SimpleModule() {
     trace("SimpleModule created");
   }
   public function computeAnswer(a:Number, b:Number):Number {
     return a + b;
   }
  }
}

Ajouter un module crée à la liste des modules de l'application

Pour référencer un module dans un projet afin qu'il soit buildé automatiquement, faîtes un clic droit sur votre projet puis Properties. Dans la section Flex Modules, cliquez sur Add… pour spécifier le chemin vers votre module (MXML ou AS).