Flex: Rendering a bound TileList - when does it finish rendering?

Question

Hi, I have an mx:TileList which is bound to an ArrayCollection. I have some code that displays a "Loading..." message before modifying the ArracyCollection and some code after that hides the loading message.

For small data sets, it works fine. However, I noticed with an array size of about 50~ and larger, flex will hide my loading message before the TileList is finished rendering the new data and I'm left with a blank screen for an odd second.

Is there an event I can listen to that is called after the TileList is finished re-rendering? Code looks something like this:

loading_message.visible = true;
for each (var x:Object in new_data) {
    tile_list_data.append(x); // bound to my_tile_list component
}
my_tile_list.validateNow();
loading_message.visible = false;

In this example, loading_message appear, disappear, and then the flex app will lag before finally revealing the updated TileList.

Any ideas? Thanks!

Answer 1

The problem is, that it doesn't do the .visible=true, run the for each loop and waits until it is done, and then goes to the .visible=false, but actually runs the .visible, for each, .visible.

If you want to make sure that your for each ends before the next code line continues, you'll need to move the rest of the code to another function, that will be called by some custom event you'll make.

Now, inside your for each you'll need to add a code that checks if it's done, and then call your custom event dispatcher.

var n:Number = 0;
for each (var x:Object in new_data) {
    ++n;
    tile_list_data.append(x); // bound to my_tile_list component
    if (new_data.length <= n) { call the event }
}

So now you'll have your for each with some custom event dispatcher that will call another function that contains the rest of your code, including the .visable=false., making sure that the rest of your code will run only after the for each ends.

I know it's ugly, but that's the only way I can think of to make sure it'll work.