4 Replies Latest reply on Mar 12, 2008 9:20 AM by AashayD

    Performance of Dynamically adding Custom Components

    AashayD
      Hello there. I'm relatively new to Flex development, so please bear with me on this one.

      I'm trying to figure out if anybody has solved the performance issue of adding lots (in this example, 100) of custom components to their flex apps dynamically. Allow me to put this into context:

      I have a custom component called MyCustomComponent, which simply contains 3 Text components (text1, text2, and text3).

      I want to add 100 MyCustomComponent instances to a vbox dynamically.

      The example I'm using looks like this:

      quote:



      for(var i:int = 0; i < 100; i++)
      {
      var MyComponent:MyCustomComponent = new MyCustomComponent();

      myvbox.addChild(MyComponent); //some vbox in the parent app

      MyComponent.text1.text = "Text" + String(i);
      MyComponent.text2.text = "3/11/2008";

      MyComponent.text3.text = "Lorem ipsum dolor sit amet consectetuer tristique eleifend velit p" +
      "latea quis. In nonummy massa Phasellus condimentum ligula tincidunt interdum vel justo " +
      "Aenean. Mollis sagittis semper pharetra sed semper non eget lacus ultrices Morbi. In " +
      "neque Lorem leo volutpat Vestibulum ut nibh elit Nam quis. Venenatis orci eleifend" +
      " ut sapien pellentesque arcu sem libero eu ligula. Orci eros Donec ipsum netus Pe" +
      "llentesque pharetra Curabitur neque semper justo. Vitae tempus Sed."

      }





      I've noticed that the performance for this is quite unacceptable (10-15 seconds, and it locks the application while processing). I'm on a relatively modern machine using a dual-core processor and 2 gigs of RAM, and I've never seen any poor performance on any Flex app I've used.

      Has anybody overcome this challenge, or is this a known issue with Flex? Or, is there a better way to add lots of dynamic component instances?

      Thanks in advance!


        • 1. Re: Performance of Dynamically adding Custom Components
          AashayD Level 1
          Also, I do manipulate other properties (width, height, x, y etc) in my real code...not sure whether or not that makes a difference.
          • 3. Re: Performance of Dynamically adding Custom Components
            ntsiii Level 3
            Really, this is not the correct approach.

            By far, the slowest part of a Flex app is rendering components, this is why Adobe has put so much effort into optimizing the List-based components. 100 instances of any moderately complex ui element is going to be unacceptably slow.

            True, making a custom ItemRenderer, that works efficiently is not trivial, but the benefit is amazing.

            I advise that you use a simple mx:List, and create an itemRenderer with your three controls. Now hear this: DO NOT START FROM SCRATCH! ItemRenderers are not rocket science, but they are not trivial either. To work right they need to be coded right. Start with the Adobe ListItemRenderer.as. The code is in the frameworks folder.

            OR, find Alex Harui's blog on itemRenderers.

            An alternative:
            Use your custom components in a mx:Repeater. BUT, you must restrict the number of visible instances to some reasonable number, like 10. Set the renderer count to this, then use a "paged" navigation instead of a scrolled nav. Use "next", "prev" "Page Up", End...etc buttons to set the Repeater start index.

            The key is to minimize the number of visual elements that the Flash Player needs to create.

            Tracy
            • 4. Re: Performance of Dynamically adding Custom Components
              AashayD Level 1
              Thanks for your reply Tracy. I assumed that there was something wrong with the approach I was using.

              I'm going to play around with itemRenderer and Repeater when I get a chance. I feel like I might have more luck with the former, since the particular use I need this for won't work with "paged" navigation; it disrupts the flow of what I'm trying to do.

              Anyone else have any insights? Does anyone have experience with itemRenderer that can lend a few more pointers?