Passer les données entre les composants flex

Question

Je suis nouveau à flex, alors pardonnez-moi si c'est une question stupide.

Actuellement, j'utilise des événements personnalisés pour transmettre des données d'un composant à un autre. Mon problème est que les événements ne font que grimper. Comment puis-je transmettre des données à un composant qui n'est pas un parent du composant qui distribue l'événement?

Voici la configuration de base. J'essaye d'obtenir des données du composant 1 passé au composant 3.

Application MXML 
    Component 1 
    Component 2 
      Component 3 

Answer 1

Si un élément de données est requis par tous les composants d'un graphique/arbre, le mieux est d'exposer une propriété publique pouvant être liée sur chacun d'eux. Laissez les composants enfant envoyer un événement de bulle qui est géré par le parent, qui peut définir la nouvelle valeur de la propriété bindable. Si vous liez la propriété du parent à l'enfant, cela se répercutera en cascade sur les autres composants.

<!-- in root application --> 
<Component1 myData="{myData}"/> 

Si vous avez besoin d'invoquer une logique supplémentaire, vous pouvez définir un getter/setter au lieu de var public et ajouter une logique au poseur:

[Bindable] private var _myData; 
public function set myData(value:Object):void 
{ 
    _myData = value; 
    doSomeLogic(); 
} 

Encore mieux serait d'utiliser le cadre de infirmation Flex pour optimiser les performances:

_myDataChanged : Boolean = false; 
[Bindable] private var _myData; 
public function set myData(value:Object):void 
{ 
    if (_myData != value) { 
     _myData = value; 
     _myDataChanged = true; 
    } 
    invalidateProperties(); 
} 

override protected function commitProperties() : void { 
    super.commitProperties(); 
    if (_myDataChanged) { 
     _myDataChanged = false; 
     doSomeLogic() 
    } 
} 

Ce motif est utilisé partout dans tous les composants UIC qui constituent la structure Flex. Vous pouvez également avoir besoin de surcharger updateDisplayList (...) pour positionner les éléments.

Answer 2

Le moyen le plus facile est juste d'accéder à l'autre composant.

<Component1 name="component1/> 

<Component2 name="component2" onClick="onClickHandler()"/> 

private function onClickHandler(event:MouseEvent):void 
{ 
    component1.property1 = "Random data"; 
    component1.sendData("Random Data"); 
} 

Lorsque vous définissez une propriété publique bindable dans composant1, il soulèvera une PropertyChangedEvent, que vous pouvez gérer aussi bien.

Vous avez beaucoup d'options ici, voyez laquelle est la meilleure dans le contexte de ce que vous essayez de faire.

EDIT: Pour en savoir plus sur ce que je pense que vous essayez de faire, vous essayez d'accéder à component3 à partir de component2, mais component3 n'est pas facilement visible par component1? Il devrait néanmoins être accessible via component2 (les composants ont tendance à être des membres publics).

private function component1OnClickHandler(event:MouseEvent):void 
{ 
    component2.component3.property1 = "Random data"; 
} 

Espérons que cela aide!

Answer 3

J'ai récemment rencontré ce problème !! Alors voici comment je l'ai surmonté au cas où quelqu'un en aurait besoin 5 ans plus tard ;-)

Cette link résout le problème beaucoup.

---

• Créer une classe Event personnalisée avec des données qui doivent être transmises en tant que membres de cette catégorie (comme le montre here).

• Transmet un événement personnalisé de Component1

  dispatchEvent(new CustomEvent("customEvent",myData)); 
  

• Créer une méthode Component2 qui prend myData comme argument
• Ajouter EventListener dans le composant parent et appeler la méthode Component2 passant event.myData