Flex Custom отправка событий и прослушивание с помощью стека просмотра

Question

Я получил вопрос об отправке и отправке событий в 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 выглядит как

события пакета {import flash.events.Event;открытый класс LoginEventComplete extends Event {public 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

Answer 1

Я могу вам сказать, что отправленные события перемещаются только вверх по иерархической цепочке.Похоже, на основе вашего первого сегмента кода вы пытаетесь заставить его двигаться в сторону.

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

Итак, одно из решений состоит в том, чтобы иметь прослушиватель в главном компоненте для события, которое затем выполняетпубличный метод в comp2.Вероятно, это самый простой маршрут.

Другим решением может быть сохранение значения в глобальном объекте;на которые оба компонента имеют ссылки.

Answer 2

Вы понимаете одну из проблем, с которой любая иерархическая структура представления должна передавать информацию. Эта проблема может быть решена несколькими способами, но я чувствую, что должен сказать вам, что вам может понадобиться изучить структуру приложения, если ваше приложение станет большим. Один как Петрушка или RobotLegs .

Теперь перейдем к решению. Вы не сможете использовать всплывающее окно для перехода от одного родственного компонента к другому, поскольку всплывающее окно переходит на вверх список отображения (дочерний к родительскому и т. Д.) Вы можете прослушать событие у общего родителя, а затем отправить информацию другому брату, но это добавляет много логики в родительский контейнер.

Простым решением было бы создание модели (класса, который просто имеет открытые свойства для хранения информации), который можно привязать к родительскому элементу и связать с обоими братьями и сестрами. Затем, если один из них меняет информацию, другой может получить эту же информацию (или использовать привязки).

Например:

<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>