Working with large number of Labels

Question

(Probably a noobish question but...) I am trying to write a custom component which essentially contains a rather large table (at the largest, it should be 800 x 35 fields, of which only up to 20 x 10 is visible at a time). I was wondering if anyone could give me some pointers/advices how to do that in optimal way.

What am I using now: component extends UIComponent, I have a custom scroll-bar and use a new spark.components.Label as a text container for each field in the table. I put the labels inside another UIComponent, so I can mask label edges outside the display area. I have tried:

1. Draw only data that is contained in display area. When the user moves the scroll-bar, data is re-drawn, however, since there is still a lot of Labels, the component becomes a bit laggy.
2. Draw the entire table and use mask/container position to show only the part of a table represented by the position of sliders. However, it takes a long time to draw and might use a lot of memory I suppose.
3. (Current idea) Multithreading. This is completely new for me, so I have set up a background Worker and want it to return an UIComponent with the table drawn, while the user can continue interacting with other parts of the component. So here come my questions:
   • So far I am having trouble transferring UIComponent using MessageChannel. Is such a transfer using MessageChannel possible in the first place or should I use alternative approach?
   • Is there an alternative approach for similar cases? Maybe I should use different containers for the text/table itself?
   • Maybe I should use the background worker to draw BMP and use it instead of a UIComponent. If so, maybe someone could refer me to a nice tutorial or guide how to do this?

Thanks for the help and let me know if you need any additional info.

-Vil

Answer 1

Well, it took me a while to re-write the code but ended up doing what @BotMaster suggested (or at least my work was in that direction). So now:

• For data rows I created a separate object containing labels and it also handles horizontal scrolling internally. This way when I adjust vertical scrollbar, I move the entire container instead of moving each element individually.
• In the beginning of the program I initialize sufficient number of elements (row elements and row/column labels) and store them in separate ArrayCollection-s. Than, upon scrollbar update:
  • Calculate the new visible area.
  • Check if elements in current display list are in the new area. If they are not - I move them from display list to their respective ArrayCollection-s, containing unused elements.
  • Adjust the position of remaining elements in the display list.
  • If there is space in the new visible area, I take elements from respective ArrayCollection-s, adjust their text and position an put them back in display list.

The scrolling now is much smoother than before.