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

Flex Modules – Utiliser ModuleLoader pour charger et décharger des modules

Il y a principalement 2 techniques pour charger / décharger des modules dans une application Flex: utiliser le ModuleLoader ou le ModuleManager.

On va tout d'abord voir comment charger un module avec le ModuleLoader.

Charger un module avec le ModuleLoader

Vous pouvez utiliser la classe ModuleLoader pour charger un module dans une application ou dans un autre module. Le plus simple pour cela dans une application MXML est d'utiliser le tag <mx:ModuleLoader>. Il suffit de fixer la valeur de la propriété "url" pour qu'elle pointe vers l'emplacement du fichier SWF du module. L'exemple suivant charge le module au démarrage de l'application:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:ModuleLoader url="ColumnChartModule.swf"/>
</mx:Application>

Vous pouvez choisir à quel moment le module va être chargé. Pour cela, il vous suffit de modifier la propriété "url" au moment auquel vous voulez que le module soit chargé.

Modifier la propriété "url" d'un ModuleLoader déclenche un appel à la méthode loadModule(). Cela se passe quand vous créez pour la première fois un ModuleLoader avec la propriété url fixée. Cela se passe aussi si vous modifiez la valeur de cette propriété.

Si vous fixez la valeur de la propriété "url" à une chaine vide (""), le ModuleLoader va décharger le module courant.

Vous pouvez avoir de multiples instance du ModuleLoader dans une même application. L'exemple suivant charge les modules quand l'utilisateur navigue dans l'onglet approprié du TabNavigator:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Panel
		title="Module Example"
		height="90%"
		width="90%"
		paddingTop="10"
		paddingLeft="10"
		paddingRight="10"
		paddingBottom="10"
		>
		<mx:Label width="100%" color="blue"
			text="Select the tabs to change the panel."/>
		<mx:TabNavigator id="tn"
			width="100%"
			height="100%"
			creationPolicy="auto"
			>
			<mx:VBox id="vb1" label="Column Chart Module">
				<mx:Label id="l1" text="ColumnChartModule.swf"/>
				<mx:ModuleLoader url="ColumnChartModule.swf"/>
			</mx:VBox>
			<mx:VBox id="vb2" label="Bar Chart Module">
				<mx:Label id="l2" text="BarChartModule.swf"/>
				<mx:ModuleLoader url="BarChartModule.swf"/>
			</mx:VBox>
		</mx:TabNavigator>
	</mx:Panel>
</mx:Application>

Vous pouvez aussi utiliser l'API du ModuleLoader en ActionScript pour charger et décharger des modules par les méthodes loadModule() et unloadModule(). Ces méthodes ne prennent pas de paramètres, le ModuleLoader charge ou décharge le module définit par la propriété "url".

L'exemple suivant charge et décharge la module spécifié par la valeur d'un label quand vous cliquez sur le bouton:

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

      public function createModule(m:ModuleLoader, s:String):void {
        if (!m.url) {
          m.url = s;
          return;
        }
        m.loadModule();
      }

      public function removeModule(m:ModuleLoader):void {
        m.unloadModule();
      }
    ]]>
  </mx:Script>
  <mx:Panel title="Module Example"
            height="90%"
            width="90%"
            paddingTop="10"
            paddingLeft="10"
            paddingRight="10"
            paddingBottom="10">
    <mx:TabNavigator id="tn"
                     width="100%"
                     height="100%"
                     creationPolicy="auto">
      <mx:VBox id="vb1"
               label="Column Chart Module">
        <mx:Button label="Load"
                   click="createModule(chartModuleLoader, l1.text)"/>
        <mx:Button label="Unload"
                   click="removeModule(chartModuleLoader)"/>
        <mx:Label id="l1"
                  text="ColumnChartModule.swf"/>
        <mx:ModuleLoader id="chartModuleLoader"/>
      </mx:VBox>
      <mx:VBox id="vb2"
               label="Form Module">
        <mx:Button label="Load"
                   click="createModule(formModuleLoader, l2.text)"/>
        <mx:Button label="Unload"
                   click="removeModule(formModuleLoader)"/>
        <mx:Label id="l2"
                  text="FormModule.swf"/>
        <mx:ModuleLoader id="formModuleLoader"/>
      </mx:VBox>
    </mx:TabNavigator>
  </mx:Panel>
</mx:Application>

Lorsque vous chargez un module, Flex s'assure qu'il n'y a qu'une seule copie du module chargé, peu importe le nombre de fois où vous appelez la méthode load() de ce module.

Les modules sont chargés comme enfant du domaine de votre application (application domain). Vous pouvez spécifier un "application domain" différent en utilisant la propriété "applicationDomain" de la classe ModuleLoader.
Quand deux classes ont le même nom mais que différentes implémentations sont chargées, la première chargée est celle utilisée.