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

AIR Mobile – Modifier la classe NavigationStack pour effectuer un "popToView"

Difficile de trouver un bon titre pour cet article . On va voir ici un "petit hack" qui peut vous rendre bien des services dans certains cas. Cela va en fait simplifier votre code lorsque vous avez une grosse utilisation des pushView, popView etc. pour naviguer dans votre pile de vues.

J'avais en fait déjà parlé de ce problème dans un article (avec une référence à Justin Beiber que *personne* n'a remarqué):

AIR Mobile – Le cycle de vie des View (destructionPolicy, viewActivate, …)

Le problème avec destructionPolicy="never"

Je vous répète donc le problème:

Pour reprendre l'expression de notre ami chevelu, il ne faut jamais dire jamais. En effet, même si votre vue a une "destructionPolicy" fixée à "never", dans certains cas, la vue va être recrée.

Dans mon application, par exemple, j'ai les vues suivantes:

• Map
• Recherche
• Resultats
• Fiche Info

Si l'utilisateur fait le cheminement suivant:

Map > Search > BACK (popView) > Map

Parfait, notre vue Map n'a pas été détruite et on a bien pu la récupérer. Prenons maintenant le cheminement suivant, en réalisant un "pushView" à chaque étape:

Map > Search > Result > Info Sheet > Map

Et bien dans ce cas, le ViewNavigator va créer une nouvelle vue Map. Pour résumer, lorsque vous faîtes appel à pushView, même si vous lui donnez une Class qui a déjà été instanciée auparavant, ViewNavigator va créer une nouvelle vue et peu importe la destructionPolicy de celle-ci.

Il faut noter que le cheminement suivant ne détruit pas la vue:

Map > Search > Result > Info Sheet > popView();popView();popView(); > Map

Mais ce n'est pas une vraie solution.

Modifier le comportement interne du SDK Flex

Je ne le dirai jamais assez mais le truc excellent avec Flex, c'est que vous pouvez aller voir les sources pour voir comment le SDK fonctionne, et cela depuis toujours. En parcourant un peu le SDK, vous allez découvrir que l'implémentation de pushView se situe dans la classe spark.components.supportClasses.NavigationStack:

    /**
     *  Adds a view to the top of the navigation stack.
     *  Pushing a view changes the display of the application to
     *  the new view on the stack.
     *
     *  @param viewClass The class of the View to create.
     *
     *  @param data The data object to pass to the view when it is created.
     *  The new view accesses this Object by using
     *  the <code>View.data</code> property.
     *
     *  @param context The context identifier to pass to the view when
     *  it is created.
     *
     *  @return The data structure that represents the current view.
     *
     *  @langversion 3.0
     *  @playerversion Flash 10
     *  @playerversion AIR 2.5
     *  @productversion Flex 4.5
     */
    public function pushView(viewClass:Class, data:Object, context:Object = null):ViewDescriptor
    {
        var viewData:ViewDescriptor = new ViewDescriptor(viewClass, data, context);
        _source.push(viewData);

        return viewData;
    }

Code plutôt simple, sans aucune réutilisation. Pour résoudre notre problème, il faut en fait aller récupérer la vue qui se situe dans la pile courante et la renvoyer. Vous pouvez faire cela de plusieurs manières, cela va dépendre de votre code métier que vous voulez obtenir. Vous pouvez par exemple passer dans la variable "context" (un peu fourre-tout), si la vue doit être ré-utilisée ou non.

Voici une version simple permettant de réutiliser la classe si elle se trouve dans la pile:

package spark.components.supportClasses
{
  import mx.core.mx_internal;

  use namespace mx_internal;

  /**
  *  The NavigationStack class is a data structure that is internally used by
  *  ViewNavigator to track the current set of views that are being managed
  *  by the navigator.
  *
  *  @see spark.components.ViewNavigator
  *
  *  @langversion 3.0
  *  @playerversion Flash 10
  *  @playerversion AIR 2.5
  *  @productversion Flex 4.5
  */
  public class MyNavigationStack extends NavigationStack
  {

    //--------------------------------------------------------------------------
    //
    //  Constructor
    //
    //--------------------------------------------------------------------------

    /**
    *  Constructor.
    *
    *  @langversion 3.0
    *  @playerversion Flash 10
    *  @playerversion AIR 2.5
    *  @productversion Flex 4.5
    */
    public function MyNavigationStack(){
      super();
    }
    /**
    * Returns the index of the view if it already exists or -1 if not.
    * */
    public function hasView(viewClass:Class):int{
      for (var i:int;i<source.length;i++) {
        if (ViewDescriptor(source[i]).instance is viewClass) {
          return i;
        }
      }

      return -1;
    }

    /**
    * Returns the first instance of the view of the class specified or null if no instance is found
    * */
    public function getViewDescriptor(viewClass:Class):ViewDescriptor{
      for each (var viewDescriptor:ViewDescriptor in source) {
        if (viewDescriptor.instance is viewClass) {
          return viewDescriptor;
        }
      }
      return null;
    }

    /**
    * Same as pushView but adds reuseExistingInstance to pop to the view of the viewClass already exists
    * */
    override public function pushView(viewClass:Class, data:Object, context:Object = null):ViewDescriptor
    {
      var reuseExistingInstance:Boolean = true;
      var viewData:ViewDescriptor;
      var index:int = reuseExistingInstance ?  hasView(viewClass) : -1;

      if (reuseExistingInstance && index!=-1) {
        viewData = getViewDescriptor(viewClass);
        source.length = index + 1;
      }
      else {
        viewData = new ViewDescriptor(viewClass, data, context);
        source.push(viewData);
      }

      return viewData;

    }
  }
}

Le code est simple. Si on trouve une vue du même type dans la pile, on la renvoie. L'assignation suivante:

source.length = index + 1;

Est une manière simple (et rapide) de dépiler un tableau en AS3 jusqu'à une certaine longueur. Comme si on avait fait des pop() successifs.

Utilisation de la classe MyNavigationStack pour remplacer NavigationStack

Vous avez donc votre classe mais pour l'instant, elle n'est pas utilisée. Pour cela, il faut attendre l'évènement "applicationComplete" et réaliser l'assignation suivante:

import mx.core.mx_internal;
private function onAppComplete():void {
  navigator.mx_internal::navigationStack = new MyNavigationStack;
  ...
}

Vous pourrez ensuite réaliser des pushView() qui vont aller récupérer une vue existante dans la pile si possible et ainsi sauver des ressources.

Voilà, un petit hack bien pratique !