Simple flex popup with dispatch event in child and listener in parent not working

Question

Parent.mxml This file is calling the popup class below when the button is clicked.

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            var popup:pop = null ;
            protected function clickHandler(event:MouseEvent):void
            {               
                popup = PopUpManager.createPopUp(this,pop,true) as pop;
                popup.ok.addEventListener(MouseEvent.CLICK, captureComments);
                popup.close();
            }

            var str:String="";
            private function captureComments():void{
                Alert.show("Invoked Event Listener", "Alert");
                str=popup.comments;
            }
        ]]>
    </fx:Script>
    <mx:Button id="id1" label="Click" click="clickHandler(event)"/>
    <s:Label id="lbl" height="18" width="282"  text={str} />
</s:Application>

Child.mxml

This file is the popup reference, creating popup. I have configured the close action and cancel buttons to work as needed, but unable to propagate the text entered in comment are back to the parent.

    <?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow  xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx"
                 layout="vertical" width="524" height="322"
                 showCloseButton="true"
                 close="close()"  chromeColor="#CCCCCC" 
                 horizontalAlign="center" verticalAlign="middle" color="#000000">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.managers.PopUpManager;
            import mx.rpc.events.ResultEvent;


            [Bindable]public var comments:String;

            public function close(): void{
                PopUpManager.removePopUp(this);
            }

            private function save(): void{
                if(comments == null){
                    comments = "";
                }
                dispatchEvent(new ResultEvent(comments));
            }
        ]]>
    </fx:Script>
    <mx:HBox width="100%" height="70%">
        <mx:VBox width="100%" height="100%">
            <mx:TextArea id="comment" text="{comments}" width="100%" height="80%" change="comments = event.target.text">

            </mx:TextArea>
            <mx:HBox horizontalAlign="center" width="100%" height="20%">
                <s:Button id="ok" label="OK" chromeColor="#CCCCCC" click="save()" fontWeight="bold"/>
                <s:Button id="cancel" label="Cancel" chromeColor="#CCCCCC" click="close()" fontWeight="bold"/>
            </mx:HBox>
        </mx:VBox>
    </mx:HBox>

</mx:TitleWindow>

You're dispatching a ResultEvent, but you're not listening for it. You're only listening for a MouseEvent.CLICK. And what's more, the `captureComments` method does not take an Event as an argument: this will throw runtime errors. — RIAstar, May 07 '13 at 14:35
@RIAStar he is dispatching a ResultEvent class; but the event type is the user entered string [or an empty string]. I have no idea how he'd listen for that. — JeffryHouser, May 07 '13 at 14:45
Does it work to declare your variables backward, like `var popup:pop = null ;` ? Also, how could the user possibly enter comments, since you're closing the popup as soon as it opens? — Amy Blankenship, May 07 '13 at 17:00

score 0 · Answer 1 · answered May 07 '13 at 14:50

You are dispatching a ResultEvent, like this:

dispatchEvent(new ResultEvent(comments));

However, the event type is the user entered input. Check out the ResultEvent constructor. The first argument is the event type. I have no idea how you'll be able to consistently listen for an event type that is unknown at compile time.

I think you are trying to pass your custom data back to your parent class. My preference would be to use a custom event for this; but if you wanted to use a ResultEvent you could pass your comments in the result property:

dispatchEvent(new ResultEvent(ResultEvent.RESULT,false,true,comments));

In your parent file, add an event listener like this:

 popup.addEventListener(ResultEvent.RESULT, processResult);

You should be able to get at your comments value as a property on the event:

    protected function processResult(event:ResultEvent):void{
        str=event.result
    }

score 0 · Answer 2 · answered May 08 '13 at 03:11

Another thing I've done as well is in the Child Container Create a public variable to pass the function from the parent ie:

in parent:

  protected function captureComments(comments:String):void{

            str=comments;
        }

in child :

declare a public var and add the function to the save() function

         public var parentFunction:Function;

         private function save(): void{
            if(comments == null){
                comments = "";
            }
                parentFunction(comments);

Then when Creating your popup container in the parent:

         protected function clickHandler(event:MouseEvent):void
        {               
            popup = PopUpManager.createPopUp(this,pop,true) as pop;
            popup.parentFunction = captureComments;
            popup.close();
        }

Simple flex popup with dispatch event in child and listener in parent not working

2 Answers2