17 Replies Latest reply on Jan 7, 2009 9:09 AM by Gregory Lafrance

    Dispatching Events from a PopUp.

    denisputnam
      Can someone tell me how to dispatch an event from a PopUp to the parent application?
        • 1. Re: Dispatching Events from a PopUp.
          Gregory Lafrance Level 6
          I think you just dispatch the event in the popup, and then listen for it in the parent application. I don't think you can dispatch an event "to" the parent application. You might need to create a custom event for this. FB3 help sts will give the info.
          • 2. Re: Dispatching Events from a PopUp.
            dimival Level 1
            In the parent app:

            yourPopup.addEventListener('myEvent', myHandler);

            public function myHandler(event:Event):void {
            // your code
            }

            in the popup:

            dispatchEvent(new Event('myEvent'));

            That's a very simple example, you can in fact dispatch a custom event with the data you want to send in the event.
            • 3. Re: Dispatching Events from a PopUp.
              denisputnam Level 1
              Hi Greg,

              Have you seen this:
              http://www.munkiihouse.com/?p=45

              Apparently, popups do not belong to the parent tree, they belong to the system manager tree, so therefore the events to do not propagate to the parent application. Unfortunately, the website does not provide an example, which is what I need.

              I have and advanced data grid that renders a button, that renders the popup. I need to send the data back to the parent so that it remembers what the popup did.

              I can get the custom TitleWindow to see the event, but not outside of it.

              If you got to:

              http://freedom.dynalias.org:8080/moveit/MoveIt.html

              You can see my application. Click on the Encryption button in the advanced data grid after you open it.

              Perhaps you can direct me to a link with a good example.

              Below is the code. The handler in the main application does not get invoked and it doesn't in the button code either.

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Button xmlns:mx=" http://www.adobe.com/2006/mxml" label="Encrytion" enabled="true" click="encryptionPopUp()">
              <mx:Script>
              <![CDATA[
              import com.moveit.EncryptPopUpEvent;
              import mx.collections.*;
              import mx.containers.TitleWindow;
              import mx.managers.PopUpManager;

              private var myData:Object;

              [Inspectable]
              public var myTitleWindow:EncryptionTitleWindow;
              override public function set data(value:Object):void
              {
              super.data = value;
              myData = value;
              }

              private function encryptionPopUp():void
              {
              trace( "EncryptButton:encryptionPopUp(): Entered..." );
              myTitleWindow = new EncryptionTitleWindow();

              this.addEventListener( EncryptPopUpEvent.ENCRYPT_COMPLETE, this.popUpHandler );

              myTitleWindow.init(this.myData);
              PopUpManager.addPopUp(myTitleWindow, this, true);
              }
              public function popUpHandler(evt:EncryptPopUpEvent):void
              {
              trace( "EncryptionButton:popUpHandler(): Entered..." );
              }

              ]]>
              </mx:Script>
              </mx:Button>

              <?xml version="1.0" encoding="utf-8"?>
              <mx:TitleWindow xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="Encryption">
              <mx:Script>
              <![CDATA[
              import mx.collections.ArrayCollection;
              import mx.managers.PopUpManager;
              import mx.events.FlexEvent;
              import com.moveit.EncryptPopUpEvent;

              private var myARR:Array = [ "none", "pgp", "gpg" ];
              private var encryptName:String;
              private var mySelection:String;
              private var myKey:String;
              private var password:String;
              private var signature:String;
              [Bindable]
              private var myAC:ArrayCollection = new ArrayCollection( myARR );

              public function init(myData:Object):void
              {
              var ldata:Array = myData as Array;
              this.mySelection = ldata.encryption_app_name;
              this.myKey = ldata.key;
              this.password = ldata.password;
              this.signature = ldata.signature;
              this.addEventListener(FlexEvent.CREATION_COMPLETE, this.initComboBox );
              this.addEventListener( EncryptPopUpEvent.ENCRYPT_COMPLETE, this.myPopUpHandler );

              }
              public function myPopUpHandler(evt:EncryptPopUpEvent):void
              {
              trace( "EncryptTitleWindow:myPopUpHandler(): Entered..." );
              }
              public function initComboBox(evt:Event):void
              {
              trace( "initComboBox(): Entered..." );
              this.comboBoxEncryptionID.selectedItem = this.mySelection;
              }
              private function doEncryptionChange(evt:Event):void
              {
              trace( "doEncryptionChange(): Entered..." );
              }
              private function storePwd(evt:Event):void
              {
              trace( "storePwd(): Entered..." );
              }
              private function changeSignature(evt:Event):void
              {
              trace( "changeSignature(): Entered..." );
              }
              private function doOk(evt:Event):void
              {
              // Collect all the data and then
              // fire event to the parent with the
              // data.
              trace( "doOk(): Entered..." );
              var encryptName:String = this.comboBoxEncryptionID.selectedItem.toString();
              var password:String = this.encryptpwdID.text;
              var signature:String = this.encryptSignatureID.text;
              var key:String = this.encryptKeyID.text;
              this.encryptName = encryptName;
              this.password = password;
              this.signature = signature;
              this.myKey = key;
              this.dispatchEvent( new EncryptPopUpEvent( EncryptPopUpEvent.ENCRYPT_COMPLETE, true, false, encryptName, password, signature, key ) );

              PopUpManager.removePopUp(this);
              }
              private function doCancel(evt:Event):void
              {
              trace( "doCancel(): Entered..." );
              PopUpManager.removePopUp(this);
              }
              private function initKey(evt:Event):void
              {
              this.encryptKeyID.text = this.myKey;
              }
              private function initPwd(evt:Event):void
              {
              this.encryptpwdID.text = this.password;
              }
              private function initSignature(evt:Event):void
              {
              this.encryptSignatureID.text = this.signature;
              }
              ]]>
              </mx:Script>
              <mx:Label text="Encryption" enabled="true" x="22" y="12"/>
              <mx:ComboBox id="comboBoxEncryptionID" dataProvider="{myAC}" selectedIndex="0" enabled="true" change="doEncryptionChange(event)" x="91" y="10"></mx:ComboBox>
              <mx:Label x="22" y="63" text="Key" enabled="true"/>
              <mx:TextInput x="91" y="61" id="encryptKeyID" editable="true" enabled="true" creationComplete="initKey(event)"/>
              <mx:Label x="22" y="103" text="Password" enabled="true"/>
              <mx:TextInput x="91" y="101" id="encryptpwdID" displayAsPassword="true" editable="true" enabled="true" change="storePwd(event)" creationComplete="initPwd(event)"/>
              <mx:Label x="22" y="133" text="Signature" enabled="true"/>
              <mx:TextInput x="91" y="131" width="238" id="encryptSignatureID" editable="true" enabled="true" change="changeSignature(event)" creationComplete="initSignature(event)"/>
              <mx:Button x="93" y="179" label="Ok" id="encryptOkID" enabled="true" click="doOk(event)"/>
              <mx:Button x="157" y="179" label="Cancel" id="encryptCancelID" enabled="true" click="doCancel(event)"/>
              </mx:TitleWindow>

              public function init():void
              {
              myTransferInfoHttp = new HTTPService();

              // Insert your domain name
              myTransferInfoHttp.url = " http://freedom.dynalias.org/cgi-bin/SourceBasicTransferInfoDataGrid.cgi";

              CursorManager.setBusyCursor();

              myTransferInfoHttp.send();
              myTransferInfoHttp.addEventListener(ResultEvent.RESULT, resultTransferInfoHttpHandler);
              myTransferInfoHttp.addEventListener(FaultEvent.FAULT, faultTransferInfoHttpHandler);
              this.addEventListener( DirectionComboBoxEvent.DIRECTION_COMPLETE, this.directionComboBoxHandler );
              this.addEventListener( EndpointComboBoxEvent.ENDPOINT_COMPLETE, this.endpointComboBoxHandler );
              this.addEventListener( ProtocolComboBoxEvent.PROTOCOL_COMPLETE, this.protocolComboBoxHandler );
              this.addEventListener( PlatformComboBoxEvent.PLATFORM_COMPLETE, this.platformComboBoxHandler );
              this.addEventListener( ModeComboBoxEvent.MODE_COMPLETE, this.modeComboBoxHandler );
              this.addEventListener( EncryptPopUpEvent.ENCRYPT_COMPLETE, this.encryptPopUpHandler );
              }

              public function encryptPopUpHandler( evt:EncryptPopUpEvent ):void
              {
              //var mySelection:String = evt.selection;
              var i:int = this.selectedIndex;
              var myIndex:int = this.selectedIndex - 1;
              trace( "MasterTransferGrid.encryptPopUpHandler(): " + evt.encryptName );
              var record:Array = this.masterGridAC.getItemAt( myIndex ) as Array;
              record["encrypt_app_name"]= evt.encryptName; //myCursor.current.encrypt_app_name;
              record["password"] = evt.password;
              record["key"] = evt.key;
              record["signature"] = evt.signature;
              }

              • 4. Re: Dispatching Events from a PopUp.
                denisputnam Level 1
                I have tried the simple examples. The following is what I found off the web:

                http://www.munkiihouse.com/?p=45

                The Problem
                Bubbling events dispatched from popups within the Flex application are not heard by a listener attached to the application instance. This is because DisplayObjects created through the PopupManager.createPopup() function are not children of the application container. How then, can we cleanly handle events coming out of popups so that we still only have one pattern for handling navigation within the application?

                The Solution
                To solve this problem, we need to know a little bit about the structure of a Flex application as shown in the diagram below:
                Flex Application Structure

                In this diagram we can clearly see that popups within a Flex application are not children of the application container, but are instead children of the SystemManger.

                I wont go into the functions of the system manager here, but every UIComponent contains a reference to the system manager of the current application so its easy to get a reference to it.
                • 5. Re: Dispatching Events from a PopUp.
                  Ansury Level 3
                  Well you don't have to do what that blog is doing in a normal case. Typically you can add the listener to the popup dialog. This is what dimival did above but here's the part before it that's missing:

                  dialog = SomeDialog(PopUpManager.createPopUp(Application.application as DisplayObject, SomeDialog, true);

                  dialog.addEventListener("myEvent", myHandler);


                  Application.application as DisplayObject could be something else, doesn't need to be that but it tends to center better with that.
                  • 6. Re: Dispatching Events from a PopUp.
                    dimival Level 1
                    Yeah i didn't include the sample code for creating a pop up since i assumed denisputnam already knew that :P

                    I guess my post was ignored boo :(
                    • 7. Re: Dispatching Events from a PopUp.
                      denisputnam Level 1
                      Hi Ansury,

                      Please forgive my ignorance. I see where you are going, but I can't quite translate it to my code. Given the following code, how would you do it?

                      My popup is being instantiated by:

                      <mx:AdvancedDataGridRendererProvider depth="2" column="{encryptionID}" columnSpan="1" renderer="EncryptionButton"/>

                      Which limits how my custom button gets initialized.

                      I really appreciate your help. Thank you.

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Button xmlns:mx=" http://www.adobe.com/2006/mxml" label="Encrytion" enabled="true" click="encryptionPopUp()">
                      <mx:Script>
                      ...
                      private function encryptionPopUp():void
                      {
                      trace( "EncryptButton:encryptionPopUp(): Entered..." );
                      myTitleWindow = new EncryptionTitleWindow();

                      this.addEventListener( EncryptPopUpEvent.ENCRYPT_COMPLETE, this.popUpHandler );

                      myTitleWindow.init(this.myData);
                      PopUpManager.addPopUp(myTitleWindow, this, true);
                      }
                      public function popUpHandler(evt:EncryptPopUpEvent):void
                      {
                      trace( "EncryptionButton:popUpHandler(): Entered..." );
                      }

                      • 8. Re: Dispatching Events from a PopUp.
                        g-s-b Level 1
                        When in doubt, I use the system's root "dispatchEvent and addEventListener/removeEventListener." Not cool maybe, but...

                        Here's an example:

                        SystemManager.getSWFRoot(this).dispatchEvent( new CustomEvent( CustomEvent.XML_DATA_ARRIVAL) );

                        ...with...

                        SystemManager.getSWFRoot(this).addEventListener(CustomEvent.XML_DATA_ARRIVAL, onXMLDataArrival, false, int.MAX_VALUE);

                        ...and...

                        SystemManager.getSWFRoot(this).removeEventListener(CustomEvent.XML_DATA_ARRIVAL, onXMLDataArrival);

                        • 9. Re: Dispatching Events from a PopUp.
                          denisputnam Level 1
                          Hi dimival,

                          I am not ignoring your post. I just didn't think you fully understood my problem. Can you tell me if the blog post is correct? Do I need to do this through the system manager? Events seem to be trapped in the Popup title window. Can you tell me why the popup is not a child of the parent? I am a bit confused, because it seems like I got a couple of different solutions and now I am not sure which one to use.
                          • 10. Re: Dispatching Events from a PopUp.
                            denisputnam Level 1
                            Hi Greg,

                            What happens if I don't do the remove?
                            • 11. Re: Dispatching Events from a PopUp.
                              denisputnam Level 1
                              Hi Greg,

                              This seems to have worked. Is this best practice?
                              • 12. Re: Dispatching Events from a PopUp.
                                Wen.VA
                                I did something to let the main component listen to a mouse click in the popup. Here is how I did (the code are all in the main component):

                                popupToShow = PopupToConfirm(PopUpManager.createPopUp(this, PopupToShow, true));
                                popupToShow.btnOK.addEventListener(MouseEvent.CLICK, handlerInPopup);

                                private function handlerInPopup(event:Event):void {
                                trace("happening");
                                }

                                Hope this helps.
                                • 13. Re: Dispatching Events from a PopUp.
                                  g-s-b Level 1
                                  "...This seems to have worked. Is this best practice? ..."

                                  I suspect not. To achieve "best practices" you may need to rethink much of the UI views and interactions. In fact, I have been learning a good "framework" that helps in that regard, Mate. It is a lite "tag-based" Flex framework implementing an "event-based backbone" that promotes the use of "best practices" for the design and coding of your Flex projects. It enables loose coupling of components as in the MVC design pattern.

                                  Perhaps you should take a look at it.

                                  http://mate.asfusion.com/


                                  • 14. Re: Dispatching Events from a PopUp.
                                    denisputnam Level 1
                                    Hi Greg,

                                    I have booked marked it and I will definitely check it out.

                                    To All:

                                    Thank you for all your input. I appreciate the time that all you took to respond to my question. Be blessed.

                                    -Denis
                                    • 15. Re: Dispatching Events from a PopUp.
                                      stinasius
                                      hi guys, i am having trouble with dispatching login success event from popup to main application to change views. please look @ my code and advise. thanks
                                      • 16. Re: Dispatching Events from a PopUp.
                                        stinasius Level 1
                                        hey sorry i found the problem nw it works.
                                        • 17. Re: Dispatching Events from a PopUp.
                                          Gregory Lafrance Level 6
                                          What was the solution? Please share it with us.