12 Replies Latest reply on Nov 26, 2010 1:40 AM by avsesis

    Setting an event listener for an arraycollection variable

    avsesis Level 1

      I have a project that consists of the parent application and several components. I have a set of sliders in one of the components and when they change value I pick up the event in the parent application and using the data retrieve data via a webservice. I would then like to populate a dropdown list with the new data in another component using this data but I cannot pick up the change of data event in the component.

       

      In the parent application I have

      protected function FindOptions_resultHandler(event:ResultEvent):void{

      OptionComponent.Options = event.result.Tables.Market.Rows;

      }

       

      and in the child component I have

       

      [Bindable]
        public var Options:ArrayCollection;

       

      protected function init():void{

      Options.addEventListener(Event.CHANGE, NewOptionList);

      }

       

      function NewOptionList(e:Event):void
                  {
                      Alert.show("OptionClickEvent")
                  }

       

      Can anyone tell me where I am going wrong please

        • 1. Re: Setting an event listener for an arraycollection variable
          Abhinav Sharma Level 2

          Hi,

           

          Pls try this,

           

          Options.addEventListener(CollectionEvent.COLLECTION_CHANGE, NewOptionList);

           

           

          -

          Abhinav

          • 2. Re: Setting an event listener for an arraycollection variable
            avsesis Level 1

            Hi thanks for the reply

             

            but is tells me that CollectionEvent is an undefined property

            • 3. Re: Setting an event listener for an arraycollection variable
              Abhinav Sharma Level 2

              you have to import mx.events.CollectionEvent;

               

              import mx.events.CollectionEvent;

               

               

              -

              Abhinav

              • 4. Re: Setting an event listener for an arraycollection variable
                avsesis Level 1

                Well I can run it now but it does not seem to be firing when the array collection changes. I have set up an Alert.show in the result handler in the parent application

                            protected function FindOptions_resultHandler(event:ResultEvent):void //puts results of webservice into array optionarray
                            {
                                OptionComponent.Options = event.result.Tables.Market.Rows;

                                Alert.show("Success")

                }

                 

                and another one in the child component

                 

                            protected function init():void
                            {
                                Options.addEventListener(CollectionEvent.COLLECTION_CHANGE, NewOptionList);
                            }
                           
                            private function NewOptionList(e:Event):void
                            {
                                Alert.show("OptionClickEvent")
                            }

                 

                 

                The first alert is appearing but not the second. I will check to make sure the data is actually being picked up now. If there is no data then there will be no Collection_Change event to pick up!

                • 5. Re: Setting an event listener for an arraycollection variable
                  flex2008 Level 3

                  write OptionComponent.Options.refresh() after OptionComponent.Options = event.result.Tables.Market.Rows;

                  • 6. Re: Setting an event listener for an arraycollection variable
                    Abhinav Sharma Level 2

                    ArrayCollection might not be changing.

                     

                    Alternatively you can also manually dispatch CHANGE event whenever the result is returned, whether the ArrayCollection changes or not, by doing this -

                     

                    protected function FindOptions_resultHandler(event:ResultEvent):void //puts results of webservice into array optionarray
                    {
                                    OptionComponent.Options = event.result.Tables.Market.Rows;

                                    Alert.show("Success");

                     

                                   options.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));

                    }

                     

                    But I would say this is not the prefered way to catch COLLECTION_CHANGE event.

                     

                    You should go with the previous method.

                     

                    Thanks

                     

                    -

                    Abhinav

                    • 7. Re: Setting an event listener for an arraycollection variable
                      avsesis Level 1

                      I tried the refresh but that does not seem to work either and my data seems OK

                      • 8. Re: Setting an event listener for an arraycollection variable
                        Abhinav Sharma Level 2

                        Please look at the code below, it might help you... i hope so...

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="{init();}">
                            <mx:Script>
                                <![CDATA[
                                    import mx.controls.Alert;
                                    import mx.events.CollectionEvent;
                                    import mx.collections.ArrayCollection;
                                   
                                    [Bindable]
                                    private var dpArrColl:ArrayCollection = new ArrayCollection([{name:"abhinav",branch:"CS"},
                                                                                            {name:"himanshu",branch:"CS"},
                                                                                            {name:"akash",branch:"CS"}]);
                                                                                           
                        /*
                                     private var dpArrColl2:ArrayCollection = new ArrayCollection([{name:"abhinav",branch:"CS"},
                                                                                            {name:"himanshu",branch:"CS"},
                                                                                            {name:"akash",branch:"CS"}]);
                        */                                                                   

                                    private function init():void
                                    {
                                        dpArrColl.addEventListener(CollectionEvent.COLLECTION_CHANGE,doStuff);
                                    }
                                   
                                    private function doStuff(e:Event):void
                                    {
                                        Alert.show("hurrrrrrreeeeyyyyyyyyy!!!!!!");
                                    }

                                    private function addItem(e:Event):void
                                    {
                                        //dpArrColl.addItem({name:"VC",branch:"ME"});
                                        //dpArrColl = dpArrColl2;
                                        dpArrColl.refresh();
                                    }
                                ]]>
                            </mx:Script>
                            <mx:Button label="addItem" click="{addItem(event)}"/>
                            <mx:DataGrid dataProvider="{dpArrColl}"/>
                        </mx:Application>


                         

                         

                        -

                        Abhinav

                        • 9. Re: Setting an event listener for an arraycollection variable
                          avsesis Level 1

                          Thank you for the help but apart from the arraycollection being filled by a web service and the adding event listeners

                          being in a child component I don't think I am doing anything any different. It must be a really simple typo or similar that is my problem. I just can't find it

                          • 10. Re: Setting an event listener for an arraycollection variable
                            BhaskerChari Level 4

                            Hi Avsesis and Abhinav,

                             

                            The CollectionEvent does not fire when you set a new arraycollection to a variable, it will fire only when you add/remove/reset/replace items from a collection.

                             

                            In the example given by Abhinav in the last post if you replace the addItem function with the below one you can see that the CollectionChange event doesn't fire event you refresh the ArrayCollection.

                             

                            private function addItem(e:Event):void
                                        {
                                            dpArrColl = new ArrayCollection([{name:"bhasker",branch:"CS"},
                                                                                                {name:"abhinav",branch:"EN"},
                                                                                                {name:"avsesis ",branch:"IT"}]);
                                dpArrColl.refresh();
                                        }

                             

                             

                            But if you reset the ArrayCollection before you add a new ArrayCollection you can see that the CollectionChange event getting fired.

                             

                            private function addItem(e:Event):void
                                        {
                                         dpArrColl.removeAll();
                                            dpArrColl = new ArrayCollection([{name:"bhasker",branch:"CS"},
                                                                                                {name:"abhinav",branch:"EN"},
                                                                                                {name:"avsesis ",branch:"IT"}]);
                                dpArrColl.refresh();
                                        }

                             

                             

                            Thanks,

                            Bhasker

                            • 12. Re: Setting an event listener for an arraycollection variable
                              avsesis Level 1

                              I can understand what you are saying but am now confused about the new Arraycollection. The Arraycollection which I am trying to add to is in a child component  so I have tried to make the new arraycollection from the parent like this

                               

                                          protected function FindOptions_resultHandler(event:ResultEvent):void
                                          {
                                              OptionComponent.Options.removeAll();
                                              OptionComponent.Options= new ArrayCollection(event.result.Tables.Market.Rows) ;

                                          }

                               

                              but that is no longer passing the information into the child component at all even at load time.

                              I want the child component to deal with the data  changes according to choices made from  slider values. This causes the parent application to collect new information from the database and that is when I pass the new data to the child component which should behave in different ways depending on what the data supplied is. I know the data is going to the child component, I just cannot get it to pick up when the data actually changes