Flex自定义事件调度和使用Viewstack监听

如何解决Flex自定义事件调度和使用Viewstack监听

| 我有一个关于事件调度和flex调度的问题。我的目标是传递在一个组件（Comp1）中捕获的电子邮件地址，然后传递到另一个组件（Comp2）。这两个组件是视图堆栈的导航器内容。自定义事件从Comp1正确分发了电子邮件，但不知何故无法到达Comp2。该应用程序（主要）如下所示：

<fx:Script>
    <![CDATA[
        import events.LoginEventComplete;

        protected function loginHandler(event:LoginEventComplete):void
        {
            myViewStack.selectedChild = idViewMain;
        }
    ]]>
</fx:Script>

<s:Panel width=\"100%\" height=\"100%\">
    <mx:ViewStack id=\"myViewStack\" selectedindex=\"0\" width=\"100%\" height=\"100%\">
        <views:Comp1 id=\"idViewLogin\" login=\"loginHandler(event)\"/>
        <views:Comp2 id=\"idViewMain\"/>
    </mx:ViewStack>
</s:Panel>

Comp1看起来像

<fx:Metadata>
    [Event(name=\"login\",type=\"events.LoginEventComplete\")]
</fx:Metadata>
<fx:Script>
    <![CDATA[
        import events.LoginEventComplete;

        protected function bnLogIn_clickHandler(event:MouseEvent):void{
            var e:LoginEventComplete = new LoginEventComplete(\"login\");
            e.workemail = tiWorkEmail.text;
            dispatchEvent(e);
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g.,services,value objects) here -->
</fx:Declarations>

<s:layout>
    <s:VerticalLayout verticalAlign=\"middle\" horizontalAlign=\"center\"/>
</s:layout>

<s:Panel width=\"400\" height=\"500\">
    <s:Label text=\"Email\" x=\"130\" y=\"150\"/>
    <s:TextInput id=\"tiWorkEmail\" top=\"140\" left=\"180\" right=\"60\"/>
    <s:Button 
        id=\"bnLogIn\"
        label=\"Log In\"
        top=\"220\" left=\"180\"
        click=\"bnLogIn_clickHandler(event)\"/>
</s:Panel>

Comp2看起来像

<fx:Script>
    <![CDATA[
        import events.LoginEventComplete;

        import valueObjects.Employee;

        protected function init():void
        {
            this.addEventListener(LoginEventComplete.LOGIN,mainHandler);
        }

        private function mainHandler(event:LoginEventComplete):void{
            tiWorkEmail.text = event.workemail;
        }

    ]]>
</fx:Script>

<fx:Declarations>

</fx:Declarations>

<s:layout>
    <s:VerticalLayout verticalAlign=\"middle\" horizontalAlign=\"center\"/>
</s:layout>

<s:Label id=\"idWorkEmail\" text=\"Email\"/>
<s:TextInput id=\"tiWorkEmail\"/>

自定义事件LoginEventComplete看起来像包装事件 { 导入flash.events.Event; 公共类LoginEventComplete扩展Event { 公共var workemail：String;

public static const LOGIN:String = \"login\";

public function LoginEventComplete(type:String)
{
  super(type,true,false);
  this.workemail = workemail; 
}

override public function clone():Event
{
  var newEvent:LoginEventComplete = new LoginEventComplete(type);
  newEvent.workemail = workemail;
  return newEvent;
}

} } 有人可以帮忙吗？非常感谢！最佳戴维W

解决方法

您正在意识到任何分层视图结构都必须传递信息的问题之一。这个问题可以通过多种方式解决，但是我认为我应该告诉您，如果您的应用程序要变大，您可能需要研究应用程序框架。比如欧芹或机器人腿。现在，进入解决方案。您将无法使用冒泡从一个兄弟组件转到另一个兄弟组件，因为冒泡在显示列表中向上移动（子对象到父对象，依此类推）。您可以在公共父级上侦听事件，然后将信息推送到另一个同级中，但这在父级容器上增加了很多逻辑。一个简单的解决方法是创建一个可在父级上绑定并绑定到两个同级中的模型（一个仅具有公共属性来存储信息的类）。然后，如果一个更改信息，另一个可以接收相同的信息（或使用绑定）。例如：

<fx:Script>
    <![CDATA[
        import events.LoginEventComplete;

        [Bindable] private var someData:SomeModel = new SomeModel();

        protected function loginHandler(event:LoginEventComplete):void
        {
            myViewStack.selectedChild = idViewMain;
        }
    ]]>
</fx:Script>

<s:Panel width=\"100%\" height=\"100%\">
    <mx:ViewStack id=\"myViewStack\" selectedIndex=\"0\" width=\"100%\" height=\"100%\">
        <views:Comp1 id=\"idViewLogin\" login=\"loginHandler(event)\" data=\"{someData}/>
        <views:Comp2 id=\"idViewMain\" data=\"{someData}/>
    </mx:ViewStack>
</s:Panel>

, 我可以告诉您，调度事件仅在层次结构链中向上移动。听起来，根据您的第一个代码段，您正在尝试使其横向移动。

<mx:ViewStack id=\"myViewStack\" selectedIndex=\"0\" width=\"100%\" height=\"100%\">
    <views:Comp1 id=\"idViewLogin\" login=\"loginHandler(event)\"/>
    <views:Comp2 id=\"idViewMain\"/>
</mx:ViewStack>

因此，一种解决方案是在事件的主要组件中包含一个侦听器，然后在comp2中执行一个公共方法。这可能是最简单的路线。另一个解决方案可能是将值存储在全局对象中。这两个组件都有参考。