9 Replies Latest reply on Jan 27, 2012 7:38 AM by Flex harUI

    Performance issue when moves child component

    Sathyamoorthi Level 2

      Hi

       

           I am using flex 3.5. When i moved a HBox(with 150 labels and textinputs), from container A to B, it takes lot of time. Any ideas Or tricks to improve the performance.

       

      Thanks,

      Sathyamoorthi.

        • 1. Re: Performance issue when moves child component
          Flex harUI Adobe Employee

          Use model/view or MVC so you don’t have to move display objects.

          • 2. Re: Performance issue when moves child component
            Sathyamoorthi Level 2

            hi,

             

            this project is in the maintainance stage. it was almost done without MVC frmeworks. so i can not able to implement it now. any other ways to avoid this performance issue.

             

            please

            • 3. Re: Performance issue when moves child component
              Sathyamoorthi Level 2

              Hi Alex,

               

                   If possible, you can give suggestion for me on this this issue.

               

                    I have one canvas, in this i am having 7 other panels (canvas). User can change panel positions by drag and drop, each of the panel has lot of data (labels and textinput). Whenever user drag panel to new position, i removed that panel from canvas and moved panel using addChildAt to the same canvas. This takes little bit time, when i do removeChild and addChildAt.

               

                   Like this, user can expand those panels, for that i take panel out from that canvas and move it to another canvas. when user close expanded panel again i move that panel to main canvas.

               

                   Above two process takes lot of time. It put me in lot of trouble. User mostly do these two operations in the screen.

               

              Thanks,

              Sathyamoorthi.

              • 4. Re: Performance issue when moves child component
                Flex harUI Adobe Employee

                Use the profiler to see where the time is going.  But again, an MV or MVC design might be better so you only move data and not a tree of display objects.

                • 5. Re: Performance issue when moves child component
                  Sathyamoorthi Level 2

                  Hi Alex,

                   

                       I have a canvas with 7 panels. User can change their panel positions. If user drag 5th panel and drop it to 2nd position. i removed 5th panel using removeChildAt and add it to

                  2nd position using addItemAt.

                   

                   

                       Incase, if i use MVC, i should use 7 canvases with 7 different views. i should show canvases based on the user selection.

                   

                       Howfar i understand your idea?

                  • 6. Re: Performance issue when moves child component
                    Flex harUI Adobe Employee

                    If the content of the panels cannot be efficiently data-driven, then an MVC approach may not help.  If there are lots of similar content in each panel, it might be worth using MVC.  If not, then you might have to stick with removeChild/addChild.  Are there tons of display objects in the panels?  If so, are there any that aren’t visible?

                    • 7. Re: Performance issue when moves child component
                      Sathyamoorthi Level 2

                      Among 7 panels, two of them makes trouble. whenever i move or expand, there is a performance delay.

                       

                      those two panels.

                       

                      panel 1 -

                       

                           9 VBox (for field grouping)

                           9 Labels (for field header)

                           9 Tiles for field display.

                           54 fields.    

                                     each field should contain a mx.label and mx.Textinput OR mx.Combobox based on config.

                       

                      panel 2 -

                       

                           9 VBox (for field grouping)

                           9 Labels (for field header)

                           9 Tiles for field display.

                           58 fields.    

                                     each field should contain a mx.label and mx.Textinput OR mx.Combobox based on config.

                           1 Datagrid.

                      • 8. Re: Performance issue when moves child component
                        Sathyamoorthi Level 2

                        Hi Alex,

                         

                             After a long try on that big source code, i found something makes it bad app. There is a code like this.

                         

                            1.   canvas.addEventListener("updateComplete", UpdateCompleteHandler);

                         

                             private function UpdateCompleteHandler(event:Event):void

                             {

                                  (event.currentTarget as Canvas).height = ....

                                      

                                  ....

                                  ....

                             }

                         

                         

                                2.

                            

                                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

                                {

                                       AddEventListener();

                                }

                         

                                here numchildren would be around 250 fields from 7 panels.

                         

                                private function AddEventListener():void

                                {

                                       for(var count:int = 0; count < this.numChildren; count ++)

                                       {

                                            (this.getChildAt(count) as compoent).setStyle('backgroundColor', 'red');

                                       }

                                }

                         

                        The above two scenorios eat CPU time alot. when i fixed them everything comes back good.

                         

                        I don't say add child is working faster. but now it is good.

                         

                        My question is how can i find which component eats CPU time alot? There is only 7 instance in this case. But they ate CPU time always.

                         

                        Is there any ability to track CPU usage via profiler.

                        • 9. Re: Performance issue when moves child component
                          Flex harUI Adobe Employee

                          The updateDisplayList call for that component should have shown up in the performance profiler.  Finding the effect of changing the height is much harder, but again, the updateCompleteHandler should have shown up (in cumulative time)

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.<http://www.adobe.com/>

                          Blog: http://blogs.adobe.com/aharui