Donner à Flex MXML des vues de leurs dépendances

Question

Je suis habitué à créer des applications utilisant l'AS3 pur. Je passe toujours des dépendances dans le constructeur des classes que je crée, mais cette méthode ne semble pas fonctionner correctement pour les vues Flex MXML.

Il semble que je devrais définir des setters sur la classe MXML, qui correspondent aux attributs de l'instanciation tag/classe. Mais en utilisant cette méthode, je ne peux pas spécifier quelles propriétés sont requises et dans quel ordre je les attend, etc.

Quelle est la méthode préférée pour donner à une vue Flex ses dépendances?

Answer 1

Un modèle que j'ai utilisé quelques fois consistait à définir une méthode publique init() dans le MXML qui prend l'argument qui aurait normalement disparu dans le constructeur. Ensuite, quel que soit instancié, ce composant MXML est chargé d'appeler init() avant de l'utiliser. Une autre façon serait de créer des setters pour les propriétés comme vous l'avez mentionné.

Dans ces setters stocker les valeurs qui sont passées, puis appelez invalidateProperties(). Remplacez ensuite la méthode commitProperties() dans le fichier MXML et la première fois que vous l'appelez initialisez (et lancez une exception si les propriétés requises n'ont pas été fournies). Tant que l'utilisateur de votre classe définit toutes les propriétés avant d'ajouter le composant à la liste d'affichage, il fonctionnera correctement (je ne crois pas commitProperties() est appelé jusqu'à ce qu'un composant soit ajouté à la liste d'affichage, soit en étant déclaré en MXML ou en le passant à un appel addChild()).

Je n'ai jamais essayé cette deuxième méthode (seulement juste pensé maintenant), mais cela devrait fonctionner.

Answer 2

Vous ne pouvez pas forcer les utilisateurs à utiliser des paramètres dans le constructeur, mais vous pouvez forcer ensuite à définir les propriétés avant d'ajouter l'élément à la scène.

Comment est ceci:

<mx:HBox 
     added="{checkProps()}"> 

    <mx:Script> 
     <![CDATA[ 
      public var prop1:String; 
      public var prop2:String; 

      private function checkProps():void 
      { 
       if(!(prop1 && prop2)) 
       { 
        throw new Error("Prop1 and prop2 must be set before "+ 
            "adding this to the stage"); 
       } 
      } 
     ]]> 
    </mx:Script> 

</mx:HBox> 

De façon réaliste, si vous êtes intéressé à forcer les gens à faire quelque chose avant de l'ajouter à la liste d'affichage, alors vous allez devoir faire quelque chose comme ça de toute façon.

Answer 3

Il y a quelques choses dans Flex que vous pouvez surcharger ou écouter qui sont vraiment importantes.

1. FlexEvent.CREATION_COMPLETE - définir un eventListener pour cela (je le fais habituellement dans le constructeur mais vous pouvez le faire en MXML comme creationComplete attribut) et il agit comme votre constructeur. Utilisez les getters et setters pour passer des références à vos dépendances en tant qu'attributs MXML et les stocker localement puis, à l'intérieur de ce gestionnaire, vous les appliquerez.
2. override protected function createChildren - ceci est appelé quand il est temps d'ajouter des éléments de liste d'affichage au composant. Vous ne devriez pas faire cela pendant le constructeur ou les gestionnaires de creationComplete. Il est toujours tentant de addChild en dehors de cette fonction, mais la meilleure pratique Adobe est seulement pour le faire directement dans cette fonction.
3. override protected function updateDisplayList - c'est là que votre logique de dessin devrait arriver (s'il y en a) ou le positionnement/alpha/rotation/etc des enfants. Cela sera appelé si une propriété CSS change, si un enfant change de taille ou de position ou quoi que ce soit d'autre que le framework Flex pense que vous pourriez vouloir redessiner l'écran.Vous pouvez forcer un updateDisplayList à être appelé en appelant invalidateDisplayList
4. override protected function commitProperties - ceci est appelé lorsque le fournisseur de données pour une classe est modifié. Chaque fois que des données dans le composant signifie que vous souhaitez mettre à jour les structures de données internes, cela doit être appelé. Vous pouvez forcer l'appel à l'aide de invalidateProperties.
5. FlexEvent.ADDED_TO_STAGE - Si vous avez besoin de savoir quand le composant est réellement ajouté à la scène, vous pouvez l'écouter. Dans la pratique, je ne me souviens jamais réellement utiliser ...

Rappelez-vous toujours appeler les super équivalents - oubliant de le faire sera souvent la cause de la composante à ne pas apparaître du tout (cela arrive à moi à au moins 4 ou 5 fois un projet). Sachez également que si vous commencez par invalidateProperties puis commitProperties, puis invalidateDisplayList, puis updateDisplayList, vous verrez peut-être des signes de surmenage ... c'est-à-dire, invalidateDisplayList dès que vous saurez que vous voulez un rafraîchissement pour éviter tout retard.

De même, ne vous investissez pas trop dans Flex 3 puisque Flex 4 est juste au coin de la rue et c'est un peu différent. J'ai le sentiment que beaucoup de ceci ne s'appliquera plus dans le nouveau framework de composants (noms Spark).

---

modifier un talon de classe typique:

package 
{ 
import mx.containers.Canvas; 
import mx.events.FlexEvent; 

public class TestComponent extends Canvas 
{ 
    public function TestComponent() 
    { 
     super(); 

     addEventListener(FlexEvent.CREATION_COMPLETE, init); 
    } 

    // acts as constructor 
    private function init(event:FlexEvent):void 
    { 
     // might as well be clean 
     removeEventListener(FlexEvent.CREATION_COMPLETE, init); 

     // do init stuff here 
    } 

    override protected function createChildren():void 
    { 
     super.createChildren(); 
     // do any addChilds here that are necessary 
    } 

    override protected function commitProperties():void 
    { 
     super.commitProperties(); 
     // update internal state when data changes 
    } 

    override protected function updateDisplayList(w:Number, h:Number):void 
    { 
     super.updateDisplayList(w, h); 
     // do any drawing, positioning, rotation etc. 
    } 
} 

}