8 Replies Latest reply on Nov 16, 2009 5:36 AM by lee704

    How can I call a public function in one component from another component?

    lee704 Level 1

      I have two components: Form and Confirmation.  Form is a Canvas and Confirmation is a TitleWindow.

       

      Form contains several controls and a submit button.  Confirmation contains an OK button.  When the user clicks the submit button, the Confirmation appears over the Form (Form is blurred).  When the user clicks the OK button on the Confirmation, I want to run a function on Form to set some default values in the controls.

       

      How can I address the function in the Form component from the Confirmation component so I can fire the function?

       

      Thanks!

        • 1. Re: How can I call a public function in one component from another component?
          RK... Level 3

          If I understood your question correctly, here is the solution

           

            
             private function confirm(event: MouseEvent): void {
              lblStatus.text = "Confirm";
              Alert.show("Confirm", "Confirm", 4, null, callBack);
             }
            
             private function callBack(event: CloseEvent): void {
              lblStatus.text = "Success";
             }

           

            <mx:Label id="lblStatus" />
            <mx:Button id="btnSubmit" label="Submit" click="confirm(event)" />

          • 2. Re: How can I call a public function in one component from another component?
            lee704 Level 1

            RK... Thanks for the post.  I did not explain it thoroughly enough.  There are two seperate components.  I need to call a function that is defined in one, by an event triggered from another.

            • 3. Re: How can I call a public function in one component from another component?
              RK... Level 3

              Attached the sample code. Hope this solves your problem.

              • 4. Re: How can I call a public function in one component from another component?
                SpaghettiCoder Level 3

                Have COMPONENT1 dispatch an event.

                 

                The Main App to listen for the event, and then have the Main App execute the public function from COMPONENT2.

                • 5. Re: How can I call a public function in one component from another component?
                  satyajitbehera Level 1

                  In component1 add a function, when creating the component2 pass the reference of that function to a property in component2. When OK is pressed in component2, use that property which is set as a function and pass any value needed in component1. Now the function in component1 will get executed.

                   

                  Following is an example

                   

                  Component1 - SampleTitleWindowValueReturn.mxml

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
                      horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="20" viewSourceURL="srcview/index.html">
                     
                      <mx:Script>
                          <![CDATA[
                              import mx.managers.PopUpManager;
                              import mx.containers.TitleWindow;
                               import flash.geom.Point;

                   

                              private var point1:Point = new Point();
                                  
                              private function showWindow():void {
                                  var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp( this, SimpleTitleWindowExample , true));

                   

                                  // Calculate position of TitleWindow in Application's coordinates.
                                  point1.x=myButton.x;
                                  point1.y=myButton.y;               
                                  point1=myButton.localToGlobal(point1);
                                  login.x=point1.x+25;
                                  login.y=point1.y+25;
                                              
                                  login.returnFunction = onReturn;
                              }
                             
                              public function onReturn(val:String):void
                              {
                                  returnedName.text = "userName entered - " + val;
                              }
                          ]]>
                      </mx:Script>
                     
                      <mx:Panel title="TitleWindow Container" layout="vertical" color="0xffffff" borderAlpha="0.15"
                           paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
                          
                           <mx:Button id="myButton" color="0x323232" height="32" label="Click to open the TitleWindow container"
                              click="showWindow();"/>
                         
                          <mx:Text id="returnedName" width="100%" color="0x323232" text=""/>
                         
                      </mx:Panel>
                  </mx:Application>

                   

                   

                  Component2 - SimpleTitleWindowExample.mxml

                   

                  <?xml version="1.0" encoding="utf-8"?>  
                  <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                      title="Title Window" x="168" y="86" status="active" showCloseButton="true" close="PopUpManager.removePopUp(this);" borderAlpha="0.75">

                   

                      <mx:Script>
                          <![CDATA[
                              import mx.core.UIComponent;      
                              import mx.managers.PopUpManager;
                              import mx.controls.Text;
                                       
                              public var returnFunction:Function;
                                  
                              private function returnName():void {
                                   returnFunction(userName.text);
                                  PopUpManager.removePopUp(this);
                              }
                          ]]>
                      </mx:Script>

                   

                      <mx:HBox>
                          <mx:Label text="Enter Name: "/>
                          <mx:TextInput id="userName" width="100%"/>
                      </mx:HBox>

                   

                      <mx:HBox>
                          <mx:Button label="OK" click="returnName();"/>
                          <mx:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
                      </mx:HBox>

                   

                  </mx:TitleWindow>

                   

                  I hope this helps.

                  • 6. Re: How can I call a public function in one component from another component?
                    lee704 Level 1

                    RK... the zip file you posted is showing as corrupted.  Can you please repost?

                    • 7. Re: How can I call a public function in one component from another component?
                      RK... Level 3

                      Here is the source

                       

                      CustomForm.mxml

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>

                      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

                      <mx:Script>

                      <![CDATA[

                      public function callBack(): void {

                      lblStatus.text = "Success";

                      }

                      ]]>

                      </mx:Script>

                      <mx:Label id="lblStatus"/>

                      <mx:Form x="50" y="50" verticalGap="15">

                              <mx:FormHeading label="Send us comments" />

                              <mx:FormItem label="Full Name:">

                                  <mx:TextInput id="fullName" />

                              </mx:FormItem>

                              <mx:FormItem label="Email:">

                                  <mx:TextInput id="email" />

                              </mx:FormItem>

                              <mx:FormItem label="Comments:">

                                  <mx:TextArea id="comments" />

                              </mx:FormItem>

                              <mx:FormItem>

                                  <mx:Button id="submit"

                                      label="Submit" />

                              </mx:FormItem>

                           </mx:Form>

                      </mx:Canvas>

                       

                       

                       

                      CustomTitle.mxml

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>

                      <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"

                      layout="absolute" width="200" height="80"

                      showCloseButton="true" close="closeMe(event)"

                      backgroundAlpha="1"

                      color="#173553" backgroundColor="#EEEEEE"

                      headerColors="#FFFFFF, #CBCCCC"

                      borderColor="#666666" borderStyle="solid">

                      <mx:Script>

                      <![CDATA[

                      import mx.managers.PopUpManager;

                       

                      public var callBack: Function = new Function();

                       

                      private function closeMe(event: Event): void {

                      PopUpManager.removePopUp(this);

                      callBack();

                      }

                      ]]>

                      </mx:Script>

                      <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="bottom">

                      <mx:Button id="btnOK" label="OK" click="closeMe(event)" />

                      </mx:HBox>

                      </mx:TitleWindow>

                      TitleWindowSample.mxml
                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application
                      xmlns="*"
                      layout="absolute"
                      width="100%" height="100%"
                      creationComplete="init()">
                      <mx:Script>
                      <![CDATA[
                      import mx.managers.PopUpManager;
                      private function init(): void {
                      customForm.submit.addEventListener(MouseEvent.CLICK, onMouseClick);
                      }
                      private function onMouseClick(event: MouseEvent): void {
                      customForm.lblStatus.text = "";
                      var customTitle: CustomTitle = new CustomTitle();
                      customTitle.callBack = customForm.callBack;
                      PopUpManager.addPopUp(customTitle, this);
                      PopUpManager.centerPopUp(customTitle);
                      }
                      ]]>
                      </mx:Script>
                      <mx:VBox
                      width="100%" height="100%"
                      verticalAlign="middle" horizontalAlign="center">
                      <CustomForm id="customForm" width="500" height="300">
                      </CustomForm>
                      </mx:VBox>
                      </mx:Application>
                      • 8. Re: How can I call a public function in one component from another component?
                        lee704 Level 1

                        Thanks RK.  Your code helped me figure out where I was going wrong.  Thanks again!

                         

                        Lee