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

Flex MenuBar – Bug lors de l'utilisation de sous-menus multiples ne comportant qu'un enfant

Voici un bug de Flex 3 "quasi" impossible à corriger. Après y avoir passé une après-midi complète, j'ai trouvé une solution de remplacement, pas très belle mais qui fonctionne (sous certaines conditions). J'ai pourtant bien cherché sur le net, il semble que personne ne soit tombé sur ce bug, pourtant facile à reproduire.

Si vous avez une solution plus "propre", n'hésitez pas à la soumettre .

Le Bug en question se produit lors de l'utilisation d'un composant MenuBar. Celui-ci prend un dataProvider hiérarchique (XML ou ArrayCollection).

Notez que les classes suivantes ont été créées pour l'exemple. Dans la vraie vie, on fera peut-être plus attention sur certains points.

Dans notre exemple, on va prendre la classe Model suivante:

package {
  import mx.collections.ArrayCollection;

  [Bindable]
  [DefaultProperty("children")]
  public class MenuItem {
    public function MenuItem() {
    }

    public var label:String = null;
    public var type:String = null;
    public var children:ArrayCollection = null;

  }
}

On a ensuite notre application utilisant une MenuBar. Celle-ci est remplie avec des MenuItem, de manière hiérarchique:

• Menu 1
• Menu 2
  • Sub Item 1
    • Sub Sub Menu 1
      • Sub Sub Sub Menu 1
• Menu 3

Dans notre application, on construit donc ce menu:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
                viewSourceURL="srcview/index.html">
  <mx:MenuBar>
    <local:MenuItem label="Menu 1"/>
    <local:MenuItem label="Menu 2">
      <mx:ArrayCollection>
        <local:MenuItem label="Sub Menu 1">
          <mx:ArrayCollection>
            <local:MenuItem label="Sub Sub Menu 1">
              <mx:ArrayCollection>
                <local:MenuItem label="Sub Sub Sub Menu 1"/>
              </mx:ArrayCollection>
            </local:MenuItem>
          </mx:ArrayCollection>
        </local:MenuItem>
      </mx:ArrayCollection>
    </local:MenuItem>
    <local:MenuItem label="Menu 3"/>
  </mx:MenuBar>
</mx:Application>

Et voici le résultat:

Flex Source Code Download: Télécharger le code source complet de l'application

Vous l'avez peut-être remarqué, on a perdu "Sub Sub Menu 1" en route! Mais voici un deuxième exemple plus troublant. On rajoute un item au même niveau que Sub Sub Menu 1, que l'on va appeler Sub Sub Menu 2:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
                viewSourceURL="srcview/index.html">
  <mx:MenuBar>
    <local:MenuItem label="Menu 1"/>
    <local:MenuItem label="Menu 2">
      <mx:ArrayCollection>
        <local:MenuItem label="Sub Menu 1">
          <mx:ArrayCollection>
            <local:MenuItem label="Sub Sub Menu 1">
              <mx:ArrayCollection>
                <local:MenuItem label="Sub Sub Sub Menu 1"/>
              </mx:ArrayCollection>
            </local:MenuItem>
            <local:MenuItem label="Sub Sub Menu 2"/>
          </mx:ArrayCollection>
        </local:MenuItem>
      </mx:ArrayCollection>
    </local:MenuItem>
    <local:MenuItem label="Menu 3"/>
  </mx:MenuBar>
</mx:Application>

Voici le résultat:

Flex Source Code Download: Télécharger le code source complet de l'application

Notre "Sub Sub Menu 1" est de retour... C'est à partir de ce moment, qu'il faut commencer à s'accrocher car comme vous l'avez vu, on utilise le composant de base de Flex 3 MenuBar. Pour trouver la cause du problème, il va donc falloir aller fouiller dans le code source de Flex à grands coups de point d'arrêt.