4 Replies Latest reply on Oct 29, 2011 12:43 AM by kzakarias

    Communication between two custom components

    kzakarias

      Hi,

       

      I have a problem getting an action in one custom component to provoke a refresh of another custom component?

       

      My setup is as follows:

       

      <application>

       

      <custom component 1 includeIn "view1">

      <custom component 2 id="custom2" level="{level}" includeIn "view2">

       

      <custom component A includeIn "view1">

      <custom component B includeIn "view2">

       

      </application>

       

      I have a number of custom components load in my main application window. 

       

      In custom component 1 I have a dropdown menu which determines levels 1-10.

      When the user chooses a new level a change event is fired and dispathed to the main application that receives it in the UpdateDisplayHandler.

       

      Custom component 1 event dispatcher:

      protected function level_changeHandler(event:IndexChangeEvent):void

      {

      var newDisplay:UpdateDisplay = new UpdateDisplay("UpdateDisplay", level.selectedItem.value );

                           dispatchEvent(newDisplay);

                     } 

       

      Main application handler:

      protected function updateDisplayHandler(event:UpdateDisplay):void

                     {

                           level = event.level

                          

                     }

       

      The level information comes through to the handler which updates the “level” variable correctly. So far so good.

       

      The variable “level” is bindable and parsed to the custom component 2.

       

      <components:custom2 id="custom2" level="{level}" />

       

      The question is how do I make my custom component 2 refresh(), reload() so that it re-renders based on the new level information???

       

      I’ll be thankful for any help on this issue.

       

      Karsten

        • 1. Re: Communication between two custom components
          Claudiu Ursica Level 4

          Based on what you said this should already be happening.

           

           

          in your custom component 2 make the level private and expose a getter/setter if you are not already doing that.

          Check if the setter is executed after you dispatch the event.

           

          If is executed it means that the value is passed to the component, otherwise there is an issue with your binding.

           

          Post some code if you cannot figure it out.

           

          C

          • 2. Re: Communication between two custom components
            kzakarias Level 1

            Hi Claudiu,

             

            Thanks for your reply.

            My custom component 2 receives the updated "level" through the binding, however, the custom component needs to refresh or reload so that a number of functions can be executed based on the new "level" information. Since the "level" variable is an integer I can't put an event listener on it.

             

            Below is the raw code for reference:

             

            Custom component 1 dropdown:

            <mx:FormItem label="Level: ">

                                <s:DropDownList id="level" width="100" dataProvider="{levels}" labelField="data" change="level_changeHandler(event)"  ></s:DropDownList>

                            </mx:FormItem>

             

            Custom component 1 event dispatcher:

            protected function level_changeHandler(event:IndexChangeEvent):void

            {

            var newDisplay:UpdateDisplay = new UpdateDisplay("UpdateDisplay", level.selectedItem.value );

                                 dispatchEvent(newDisplay);

                           } 

             

            Main application listener:

            protected function init():void

                        {

                            this.addEventListener("CreateWordInDb", createWordInDbHandler);

                            this.addEventListener("UpdateWordInDb", updateWordInDbHandler);

                            this.addEventListener("DeleteWordInDb", deleteWordInDbHandler);

                           

                            this.addEventListener("CreateSentenceInDb", createSentenceInDbHandler);

                           

                            this.addEventListener("DisplayEvent", displayEventHandler);

                            this.addEventListener("UpdateScore", updateScoreHandler);

                           this.addEventListener("UpdateDisplay", updateDisplayHandler);

                           

                           

                            getUserInDb.token = usersDb.getUsersByID(currentUserID);

                        }

             

            Main application event handler:

            protected function updateDisplayHandler(event:UpdateDisplay):void

                           {

                                 level = event.level

                                

                           }

             

            The "level" variable is bindable and binded to the levelNumber variable of custom component 2:


            <components:wordsTile2 id="wordTile" wordsCollection="{wordsCollection}" sentencesCollection="{sentencesCollection}" levelNumber="{level}"  includeIn="build" />

             

            In custom component 2 the updated variable is received.

            [Bindable]

                        public var levelNumber:int = new int;

             

            Now I need this change to somehow execute a function init() that display the new level information:

             

            public function init():void

                        {

                          

                            displayLevel();

                        }

             

            How do I get the custom component to run the init() function after having received the updated "level" information?

             

            -Karsten!

            • 3. Re: Communication between two custom components
              Claudiu Ursica Level 4

              Probably is not the cleanest way but it will move you forward quickly. 

               

              public var levelNumber:int = new int;

               

              change to

               

              private var _levelNumber:int;

               

              public function get levelNumber():int

              {

                  return _levelNumber;

              }

               

              public function set levelNumber(value:int):void

              {

                  if (value != _levelNumber)

                  {

                      _levelNumber = value;

                      //call custom update refresh method in here

               

                  }

               

              }

               

               

              I don't know your usecase or your architecture so there are probably better ways.

               

              maybe like this:

               

               

              Main application event handler:

              protectedfunction updateDisplayHandler(event:UpdateDisplay):void

              {//check if there is a change in level and expose a public function on the component 2

                      if (level != event.level)

                      {

                          level = event.level;

                          component2.updateOrRefreshBasedOnNewLevelValue(level);

               

                      }                    

               }

               

              HTH,

              Claudiu

              • 4. Re: Communication between two custom components
                kzakarias Level 1

                Hi Claudiu,

                 

                Excellent! The getter setter solution for component 2 worked perfectly. I had a little issue calling the setter function but the final main application event handler now looks like this:

                 

                protected function updateDisplayHandler(event:UpdateDisplay):void

                            {

                                     wordTile.levelNumber = buildLevelNumber;

                            }

                 

                Thanks a lot! Hours of agony now over and I can continue building my program.

                -Karsten!