Many times in the process of developing user interfaces I’ve needed to use the same base data in multiple views.  For instance, say I have a collection of books stored in my model. In one view I may have the newest books while in another I could just be showing books by a certain author. In the following example I show what happens when you try to use one collection in several views.

BookVO Class

Figure 1.

Code 1.

The trouble begins when you try sorting the books. Sorting one grid causes the other to be affected by the same sort. Both share the same dataProvider and when you click the header of one, it applied a new sort to the ArrayCollection of books. So how do we avoid this issue? The answer is pretty simple. If you look at the Flex Language Reference you will notice that ArrayCollection extends ListCollectionView. This kind of gives you a better idea of what the ArrayCollection is for. Essentially, it should be used to wrap your model collection in a “data view”. We’re going to replace the <s:ArrayCollection /> with <s:ArrayList />. Create an ArrayList as the base model, then wrap in a couple ListCollectionViews—the slightly lighter-weight version of ArrayCollection. Check out the Figure 2 to see the results.

Figure 2.

Code 2.

Apart from separate sorts, you can also apply filters to the ListCollectionViews without affecting the other view. However, if you add or remove an item from one view, both collections will be updated.  It’s kinda a best of both worlds between binding and SQL.