Flex Tip: Changing the source of an ArrayCollection

Here is a quick tip for Flex newbies although I imagine this is something thats fairly obvious. If you want to change the complete dataset of an ArrayCollection, do not create a new ArrayCollection object pointing to the same variable(well you can, but it will kill all the databound controls that are listening to events on the ArrayCollection instance). Instead use arraycollection.source = [ … ] to repopulate the source value with a new Array. This will broadcast a CollectionEvent with the ‘kind’ property of the event set to ‘RESET’ and keep all the controls in sync. CollectionEvents are broadcasted everytime the values in an ListCollectionView instance are changed (ArrayCollections extend ListCollectionView).

I just saw this bug on an application I was working on where the controls kept getting out of sync with the core data in the ArrayCollection and this was the culprit ! The code looked something like this:

[AS]

[Bindable]
public var dataAC:ArrayCollection;

private function onDataLoaded(evt:Event){
dataAC = new ArrayCollection(parseIntoArray(evt.data));
}

[/AS]

So everytime the new data came in, databinding was destroyed. The correct solution should have looked like:

[AS]

[Bindable]
public var dataAC:ArrayCollection = new ArrayCollection;

private function onDataLoaded(evt:Event){
dataAC.source = parseIntoArray(evt.data);
}

[/AS]

Hope this saves some time for someone :)

6 Comments

  1. @Rajesh, It is not necessary to call the ArrayCollection’s refresh() method after changing the ArrayCollection’s source property. You can see for yourself in the source code for ListCollectionView (the superclass for ArrayCollection).

    /**
    * @private
    * When the source list is replaced, reset.
    */
    mx_internal function reset():void
    {
    internalRefresh(false);
    if (dispatchResetEvent)
    {
    var event:CollectionEvent =
    new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
    event.kind = CollectionEventKind.RESET;
    dispatchEvent(event);
    }
    }

    public function refresh():Boolean
    {
    return internalRefresh(true);
    }

    Notice that calling the refresh() method merely calls internalRefresh() — just like the reset() function does (which gets called when you change the source).

    Like

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s