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

12oct/090

Flex Modules – Pré-chargement de modules (preloading)

Quand vous lancez pour la première fois une application qui utilise des modules, la taille du SWF de l'application devrait être plus petite qu'une application n'utilisant pas de modules. Vous devriez donc avoir une réduction tu temps d'attente car l'application peut être chargée en mémoire et se lancer dans Flash Player avant même que les fichiers SWF des modules soient téléchargés. Cependant, il y aura un délai lorsque l'utilisateur va naviguer vers la partie de l'application qui utilise des modules. En effet, par défaut, les modules ne sont pas préchargés, mais chargés à la volée quand ils sont demandés pour la première fois.

Quand un module est chargé par l'application Flex pour la première fois, le fichier SWF du module est téléchargé puis conservé dans le cache du navigateur. Si l'application Flex décharge le module puis le recharge, l"utilisateur attendra moins car Flash Player va charger le module depuis le cache plutôt que de le re-télécharger.

Les fichiers SWF des modules, comme tous les SWF, restent dans le cache du browser jusqu'à ce qu'un utilisateur les enlève. C'est pourquoi, les modules peuvent être chargés par l'application mère sur plusieurs sessions, en réduisant le temps de téléchargement (suivant la fréquence de vidage du cache).

Vous pouvez effectuer un preloading des modules à n'importe quel moment pour avoir les SWF en mémoire, même sans les utiliser.

Pour précharger un module au démarrage de l'application, utilisez la méthode load() de la classe IModuleInfo. Cela charge le module en mémoire sans créer une instance du module.

Exemple d'application

L'exemple suivant charge le module BarChartModule.swf au démarrage de l'application, même s'il n'est affiché que lorsque l'utilisateur navigue sur le deuxième onglet du TabNavigator. Sans le preloading, l'utilisateur devrait attendre que le fichier SWF soit téléchargé quand il clique sur le second onglet:

<?xml version="1.0"?>
<!-- modules/PreloadModulesApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="preloadModules()">
  <mx:Script>
    <![CDATA[
      import mx.events.ModuleEvent;
      import mx.modules.ModuleManager;
      import mx.modules.IModuleInfo;

      private function preloadModules():void {
// Get a reference to the module's interface.
        var info:IModuleInfo = ModuleManager.getModule("BarChartModule.swf");
        info.addEventListener(ModuleEvent.READY, modEventHandler);
// Load the module into memory. The module will be
// displayed when the user navigates to the second
// tab of the TabNavigator.
        info.load();
      }

      private function modEventHandler(e:ModuleEvent):void {
        trace("module event: " + e.type); // "ready"
      }
    ]]>
  </mx:Script>
  <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>
<?xml version="1.0"?>
<!– modules/PreloadModulesApp.mxml –>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="preloadModules()">
<mx:Script>
<![CDATA[
import mx.events.ModuleEvent;
import mx.modules.ModuleManager;
import mx.modules.IModuleInfo;

private function preloadModules():void {
// Get a reference to the module's interface.
var info:IModuleInfo = ModuleManager.getModule("BarChartModule.swf");
info.addEventListener(ModuleEvent.READY, modEventHandler);
// Load the module into memory. The module will be
// displayed when the user navigates to the second
// tab of the TabNavigator.
info.load();
}

private function modEventHandler(e:ModuleEvent):void {
trace("module event: " + e.type); // "ready"
}
]]>
</mx:Script>
<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>

Articles similaires

Commentaires (0) Trackbacks (0)

Aucun commentaire pour l'instant


Leave a comment

(required)

Aucun trackbacks pour l'instant