4 Replies Latest reply on May 22, 2012 2:29 AM by cdsvvxv

    How to handle large number (7200+) identical HorizontalRule's

    cdsvvxv Level 1

      I have an application where performance is becoming an issue. I have 30 VBoxes that each contain identical HorizontalRules, the number of

      HorizontalRules is unknown until render time but can easily be up to 240 per VBox. As there are 30 VBoxes this results in 7200 HorizontalRules being added to the stage. This results in large memory consumption and poor rendering time on lower specification machines. To speed this up I have tried using Sprites and graphics.draw to render the line, but I think it is the time taken to create the Object that is the problem.

       

      Is there any way to create one HorizontalRule and add it to the stage multiple times? I know that Flex will remove the child if it is added again with a different [x,y] coordinate so my attempts to do that failed.

       

      Thanks for any suggestions.

        • 1. Re: How to handle large number (7200+) identical HorizontalRule's
          Flex harUI Adobe Employee

          I’m not clear how you fit 7200 horizontal lines on the screen at one time.  If they don’t all fit, then they should not be created if they are not visible.   That’s a bunch of work, but is probably needed.

           

          Then, for every line you can see, you really should use graphics.draw instead of Flex components.  The Flex components are just too heavy for that quantity of lines.

          1 person found this helpful
          • 2. Re: How to handle large number (7200+) identical HorizontalRule's
            cdsvvxv Level 1

            The VBoxes are typically about 20 pixels wide and each has a line about 4 or 5 pixels apart all the way down their length. That is why there are so many of the little blighters.

             

            You are probably right, but I had a problem with graphics.draw in that they had to be added as rawChildren. The component is resizable and I found it impossible to move the drawn lines. I could not get a good reference to them, even if I stored each line in a seperate Array before adding it as a rawChild, and so I could not even delete them reliably. I know that the rawChildren and children/elements have things at different indexes, but I didn't manage to find a way to use that information.

             

            You have given me the idea that I shouldn't draw them all on the screen at once though. With the full 7,200 lines, only about 30% are on the screen, I will look into using an item renderer. Is that the correct way to do it?

             

            Does anyone know how to relibly access rawChildren so they can be moved? Maybe my app is just a little wierd. I will try building a test case and see if I can add and remove from the rawChild list freely in a simpler application.

            • 3. Re: How to handle large number (7200+) identical HorizontalRule's
              Flex harUI Adobe Employee

              You may have the option to

               

              1.  overlay a single Sprite or UIComponent that covers all of the Vboxes

              2.  use a bitmap instead of vectors

               

              You should be adding to rawChildren if it is “chrome”.  You might want to create a custom UIComponent instead of using just a Sprite.

              • 4. Re: How to handle large number (7200+) identical HorizontalRule's
                cdsvvxv Level 1

                Thanks for the suggestions. I went back to graphics.draw() and also used a single overlay and it is far better.