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

Flex Tips – Le metatag [DefaultProperty] pour la création de composants MXML Flex

Voici un petit "tip" pour les développeurs Flex qui créent leurs propres composants Flex. Vous le savez, la plupart les classes de Flex peuvent être créées de manière déclarative en MXML. Il en va de même pour les classes AS ou MXML que vous créez vous-même.

Prenons un petit exemple. On crée une classe MenuItem.as qui nous servir à peupler une MenuBar:

package model
{
  import mx.collections.ArrayCollection;

  public class MenuItem
  {
    public var label:String = null;
    public var children:ArrayCollection = null;
    public function MenuItem()
    {
    }

  }
}

La classe est très très simple, on a simplement 2 propriétés, label et children, qui sont des valeurs clé pour Flex quand il va chercher une hiérarchie. En effet, si on donne comme dataProvider, un ArrayCollection contenant des MenuItem, il va chercher la propriété "label" pas défaut pour définir le nom à afficher si on ne lui donne pas de "labelField". Idem pour la propriété "children", c'est dans cette propriété qu'il va chercher des éléments fils.

Pour construire un simple menu tout en MXML, on aura donc:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" xmlns:model="model.*">
  <mx:MenuBar id="menuComponent">
    <mx:dataProvider>
      <model:MenuItem label="Menu1" >
        <model:children>
          <mx:ArrayCollection>
            <mx:Array>
              <model:MenuItem label="SubMenu1"/>
              <model:MenuItem label="SubMenu2">
                <model:children>
                  <mx:ArrayCollection>
                    <mx:Array>
                      <model:MenuItem label="SubSubMenu1"/>
                      <model:MenuItem label="SubSubMenu2"/>
                    </mx:Array>
                  </mx:ArrayCollection>
                </model:children>
              </model:MenuItem>
            </mx:Array>
          </mx:ArrayCollection>
        </model:children>
      </model:MenuItem>
      <model:MenuItem label="Menu2"/>
    </mx:dataProvider>
  </mx:MenuBar>
</mx:Application>

Cela fonctionne très bien, notre menu s'affiche comme on le voulait. On remarque cependant que c'est plutôt verbeux pour la création d'un menu à plusieurs étages. En effet, quand on veut ajouter des éléments fils, on doit déclarer la propriété "model:children" (ma classe se trouve dans le package "model", puis un mx:ArrayCollection puis un mx:Array.

Mais vous pouvez contourner cela pour alléger votre code en précisant une propriété par défaut (DefaultProperty). Cette propriété est déclarée à l'aide d'un Metatag sur votre classe comme ceci:

package model
{
  import mx.collections.ArrayCollection;

  [DefaultProperty("children")]
  public class MenuItem(){
....

Alors à quoi sert cette annotation? Et bien cette annotation sert à indiquer à Flex quel sera la propriété à utiliser par défaut quand on va ajouter un noeud MXML comme enfant à notre classe/composant. Ici, on précise que l'on souhaite utiliser "children" par défaut. Il n'est donc plus besoin de créer un tag model:children, Flex sait déjà que quand on ajoute des fils, on cherche à modifier la propriété "children".

Notre exemple précédent peut donc s'écrire:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" xmlns:model="model.*">
  <mx:MenuBar id="menuComponent">
    <model:MenuItem label="Menu1" >
      <mx:ArrayCollection>
        <mx:Array>
          <model:MenuItem label="SubMenu1"/>
          <model:MenuItem label="SubMenu2">
            <mx:ArrayCollection>
              <mx:Array>
                <model:MenuItem label="SubSubMenu1"/>
                <model:MenuItem label="SubSubMenu2"/>
              </mx:Array>
            </mx:ArrayCollection>
          </model:MenuItem>
        </mx:Array>
      </mx:ArrayCollection>
    </model:MenuItem>
    <model:MenuItem label="Menu2"/>
  </mx:MenuBar>
</mx:Application>

C'est déjà un peu plus clair . Vous remarquez que la déclaration mx:dataProvider sur MenuBar a aussi disparu. En effet, si on regarde dans le framework Flex, dans la classe MenuBar, on a:

[AccessibilityClass(implementation="mx.accessibility.MenuBarAccImpl")]

[DefaultBindingProperty(destination="dataProvider")]

[DefaultProperty("dataProvider")]

[DefaultTriggerEvent("change")]

[IconFile("MenuBar.png")]

[RequiresDataBinding(true)]

Les DefaultProperty sont en place sur la plupart des composants du Framework, ce que vous avez du utiliser sans vous en rendre compte. Par exemple le [DefaultProperty("text")] sur Label qui vous permet de faire:

<mx:Label>Mon Texte</mx:Label>