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 🙂

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist.

6 thoughts on “Flex Tip: Changing the source of an ArrayCollection”

  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

Leave a comment