1 Reply Latest reply on Oct 20, 2010 1:09 PM by Flex harUI

    Performance issues with addChild() for VBox...

    Sankar Kethineni

      Hi Folks,

       

                     In my current project, as part of one module i get the data from the server which will be thousands of records and we have the pagination enabled for example say 30 records per page. I have defined my own custom component which will display the data and also applies the specific skining, the one which is set by consumer, else the default skin will be set for the componet. And also, i have a method called  showData()  as shown below, which will just loop through all the records and creates a instance of the custom component, sets the data and adds to the VBox through addChild() method. And also have a method called appendData() which is similar to showData() except removing all the child objects and adding,  again it just creates the instances of custom component and gets added to the VBox through addChild().

       

           Here, i have noticed one more thing like i don't see the custom component is getting added  to the VBox container then and there after adding it through the addChild(), moreover i could see all the 30 custom components are getting added at a time. And about my custom component, which has to states. In default state, we will be showing some information and in the expanded state all other information will be presented.

       

              To get the data from the server it is taking less than 2 seonds time, where as it is taking 7 to 8 seconds of time just to loop through all the records and create the instance of custom component and add it to the VBox container. The same thing is happening when clicked on next page and while appending the components to the VBox container. Hence it is resulted me in slower performance of the application. Recently, i have migrated my project to Flex 4.

       

      Here, i have few questions...

       

      1) Will there be any improvement if i write the component in Action Script and calls the invalidation methods?

      2) Should i write the code in such a way the custom component is added to the view immediately instead of adding all the component instances at a time. If so, how can i achieve this?

       

                 Any help would be appreciated which results in improving the performance of my application.Thanks in advance.

       

      Here is the source code......

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" width="100" height="300">
         
          <fx:Script>
              <![CDATA[


                  private function showData(_data:ArrayCollection,totalItemsCount:int):void
                  {
                      this.removeAllChildren();
                      if (_data == null || (_data!=null && _data.length == 0))
                      {
                          showNoItemsFound(); // this is just to show a message like there are no items found.
                      }
                      else
                      {
                          addItemsToView(_data,totalItemsCount);
                      }
                  }
                 
                  private function appendData(_data:ArrayCollection,totalItemsCount:int):void
                  {
                      if(_data!=null && _data.length>0)
                      {
                          addItemsToView(_data,totalItemsCount);
                      }
                  }
                 
                  private function addItemsToView(_data:ArrayCollection,totalItemsCount:int):void
                  {
                      for (var count:int=0; count < _data.length; count++)
                      {
                          /**
                           * Creating wrapper and adding the itemrenderer into the wrapper
                           **/
                          var wrapper:WrapperItem=new WrapperItem(); // this will have logic to enable the expansion image for the items which has sub items.
                          var tempObj:CustomComponent=new CustomComponent();
                          wrapper.initialize();
                          tempObj.initialize();
                          wrapper.id=_data.getItemAt(count).id;
                          tempObj.id=_data.getItemAt(count).id;
                          wrapper.vbxWrapper.addChild(tempObj);                   
                         
                          /**
                           * Adding data into dictionary so that we can access UI component using id
                           **/
                          allUIObjDictionary[_data.getItemAt(count).id]=wrapper;
                         
                          /**Setting the style**/
                                        
                          this.addChild(wrapper);
                      }
                      //logic to enable pagination....
                  }
              ]]>
          </fx:Script>
      </mx:VBox>