2009-05-08 20 views
3

Ich bin neu zu flex, also vergib mir, wenn das eine dumme Frage ist.Pass Daten zwischen Flex-Komponenten

Momentan verwende ich benutzerdefinierte Ereignisse, um Daten von einer Komponente zu einer anderen zu übergeben. Mein Problem ist, dass Ereignisse nur sprudeln. Wie kann ich Daten an eine Komponente übergeben, die nicht die übergeordnete Komponente der Komponente ist, die das Ereignis versendet?

Hier ist das grundlegende Layout. Ich versuche, Daten von Komponente 1 an Komponente 3 übergeben.

Application MXML 
    Component 1 
    Component 2 
      Component 3 

Antwort

10

Wenn ein Teil der Daten von allen Komponenten in einem Diagramm/Baum benötigt wird, ist es am besten, eine öffentlich bindbare Eigenschaft auf jedem Objekt verfügbar zu machen. Lassen Sie die untergeordneten Komponenten ein Bubbling-Ereignis auslösen, das vom übergeordneten Element verarbeitet wird, das den neuen Wert der bindbaren Eigenschaft festlegen kann. Wenn Sie die Eigenschaft vom übergeordneten Element an das untergeordnete Objekt binden, "kaskadiert" dies zu den anderen Komponenten.

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

Wenn Sie zusätzliche Logik aufrufen müssen, können Sie eine get/set Paar statt public var definieren und fügen Logik der Setzer:

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

Noch besser wäre Flex Ungültigkeits Framework zu verwenden um die Leistung zu optimieren:

_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() 
    } 
} 

Dieses Muster wird überall in allen UIComponents verwendet, aus denen das Flex-Framework besteht. Möglicherweise müssen Sie updateDisplayList (...) auch für Positionselemente überschreiben.

+0

ah, das ist was ich brauche. Ich mag auch diesen Ungültigkeitsrahmen. – KevMo

2

Der einfachste Weg ist nur auf die andere Komponente zugreifen.

<Component1 name="component1/> 

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

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

Wenn Sie eine bindungsfähige öffentliches Eigentum in Komponente1 gesetzt ist, wird es eine PropertyChangedEvent erhöhen, die Sie als gut umgehen kann.

Sie haben viele Optionen hier, sehen Sie, welche ist am besten im Zusammenhang mit dem, was Sie versuchen zu tun.

EDIT: Lesen Sie weiter über was ich denke, Sie versuchen, zu tun, versuchen Sie auf Component3 von Component2 zugreifen, aber Component3 ist nicht sichtbar für Component1? Es sollte jedoch weiterhin über Komponente 2 zugänglich sein (Komponenten sind in der Regel öffentliche Mitglieder).

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

Hoffe, das hilft!

+0

das scheint für mich zu arbeiten. Ist es eine schlechte Idee, wenn ich eine gerade von einer Komponente innerhalb der Komponente 1 versenden, die in der Anwendung MXML abfangen und dann die Daten in Komponente 3 festlegen? Es funktioniert, aber es scheint nicht der beste Weg zu sein, Dinge zu tun. – KevMo

+0

macht nichts, sieht aus wie das Binden der Daten ist die Lösung Ich bin nach – KevMo

0

Ich bin kürzlich auf dieses Problem gestoßen !! Also hier ist, wie ich es überwunden habe, falls jemand es 5 Jahre auf der ganzen Linie braucht ;-)

Dieses link löst das Problem sehr.


  • eine benutzerdefinierte Event-Klasse erstellen mit den erforderlichen Daten als Mitglieder dieser Klasse übergeben werden (wie here gezeigt).
  • ab Werk ein benutzerdefiniertes Ereignis aus Component1

    dispatchEvent(new CustomEvent("customEvent",myData)); 
    
  • ein Verfahren in Component2 erstellen, die
  • hinzufügen Eventlistener in der übergeordneten Komponente und rufen Sie die Methode in Component2 vorbei event.myData myData als Argument nimmt