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

Flex Modules – Communication découplée entre modules avec EventBroker

On l'a vu dans les articles précédents, la communication avec les modules Adobe Flex peut se révéler difficile s'il on essaie de découpler complètement les modules de l'application Flex. Pour cela, on peut utiliser une interface ActionScript qui va permettre de brider la transaction à certaines méthodes identifiées. Cette méthode permet déjà de découpler le module de l'application de manière significative. Mais pour une communication dans les deux sens, cela peut devenir assez coûteux.

Une solution que j'utilise en environnement professionnel consiste à se servir de l'excellente classe EventBroker de Development Arc. Celle-ci permet en effet d'utiliser le Design Pattern Mediator pour avoir un objet commun (Singleton Facade) qui va s'occuper uniquement du transit des évènements dans l'application. Cette classe que vous pouvez utiliser simplement dans votre application va nous servir de point d'entrée pour la communication module/application ou application/module ou même module/module.

En utilisant simplement cette classe et quelques évènements personnalisés, vous pourrez créer cette communication de manière aisée. Voyons un petit d'exemple d'application:

Application Principale

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import events.ApplicationEvent;
      import mx.controls.Alert;
      import events.ProductTypeSelectionEvent;
      import util.EventBroker;

      private function onFirstModuleReady():void {
        EventBroker.subscribe(ProductTypeSelectionEvent.USER_SELECTION, onProductSelectionEvent);
      }

      private function onProductSelectionEvent(event:ProductTypeSelectionEvent):void {
        var selectedItem:String = event.selectedItem;
        Alert.show("Application::Selection dans le Module FirstModule: " + selectedItem);
      }

      private function onSendEventToModules():void {
        var selectedNumber:int = magicNumberStepper.value;
        var event:ApplicationEvent = new ApplicationEvent(ApplicationEvent.ON_MAGIC_NUMBER, selectedNumber);
        EventBroker.broadcast(event);
      }
    ]]>
  </mx:Script>
  <mx:HBox width="100%"
           height="100%">

    <mx:Panel title="Application Principale"
              paddingLeft="10"
              paddingRight="10"
              paddingTop="10">
      <mx:Text text="Le nombre choisi sera envoyé vers les deux modules par un evènement de type ApplicationEvent"
               width="350"/>
      <mx:Button label="Envoyer un Event depuis l'application"
                 click="onSendEventToModules();"/>
      <mx:NumericStepper id="magicNumberStepper"
                         value="38"/>
    </mx:Panel>
    <mx:ModuleLoader url="FirstModule.swf"
                     ready="onFirstModuleReady();"/>
  </mx:HBox>
  <mx:HBox width="100%"
           height="100%">
    <mx:ModuleLoader url="SecondModule.swf"/>
  </mx:HBox>
</mx:Application>

Pour cette application de démonstration, on écoute un évènement de type ProductTypeSelectionEvent.USER_SELECTION qui sera envoyé par un module. Au clic sur le bouton, on va envoyer en broadcast, un évènement de type ApplicationEvent.ON_MAGIC_NUMBER, qui va contenir le nombre choisi dans le NumericStepper.