This example walks through a simple implementation of filtering data in an ArrayCollection. It shows how to use an ItemRenderer, and to utilize the new ItemsChangeEffect in Flex 3.

Application – Source

In flex 3 they introduced a new listBased effect, so it effects anything that is listbased, the datagrid, the list, the tree, the tilelist, etc… I started this example based on a post on flexcoders about using the itemsChangeEffect when filtering data. I ran into some bad news with this, and come to find out, it is fairly difficult, and doesn’t really seem to be possible right out of the box.

So first off lets sort of walk through what we have. We have the following mxml files that really matter.

  • FilterTileEffect.mxml – which is the main app file, and holds our TileList
  • view.Thumbnail.mxm – this is a view that is called from the itemRenderer property on our TileList

We set up the tileList to have an itemRenderer=”view.Thumbnail” and in that, we override the data setter method, and convert the dataObject into a strong typed Value Object, that way we get some code hinting with properties, and don’t continually have to wonder what the data object is… this can be bad if you want your ListBase component to handle different dataproviders that don’t apply to the hard typed ValueObject but then again, why would you be using an itemRenderer then, obviously you expect your data to be uniform for the itemRenderer to get to the data successfully right?

The Thumbnail

The thumbnail is a fairly simple MXML component, it extends a VBox and doesn’t bother implementing anything… (I have seen item renders implement the IDropInListItemRenderer Before, and i didnt’ bother with that… all it does is force you to override certain methods, and i didnt’ want to confuse anyone more by doing that).

Every Flex Component has a data attribute, and that is what we’re going to use here in order to get the data into our renderer. With a repeater it was fairly easy to pass data along, you just passed it to a public variable that was in whatever component you were repeating… It’s a little different with ItemRenderers because you never get the change when implementing them inline, you simply say itemRenderer=”view.Thumbnail” which points to the thumbnail class, you don’t get the opportunity to actually pass parameters into that component being called… (this is ignoring the fact you could verywell use mxml to define your itemrenderer and pass it along that way)… so what you do is you override the public function set data (item:Object):void. That will be the data that gets passed implicitly to the renderer, and you can strict type it from there if you want to get code hints…

This Thumbnail component simply adds our image, and a label inside of a VBox.

The key to the thumbnail component is up in it’s base tag there is a moveEffect=”Blur” this is the effect that is going to execute when you are filtering data… I wish i could say that you can use any effect you want, but using this in tandom with the itemsChangeEffect created some issues when i tried to use any other effect besides blur… the whole question on flexcoders was how to get an effect to happen when you filter data… and the only answer I came up with is in your itemRenderer (hopefully your using one) in the base tag, add a moveEffect… thats the simplest solution there is… the reason for this you might find more information reading Alex’s flex closet it’s a really long post, it’s pretty old, but works none the less, it’s super informative, and it’s pretty interesting. if you don’t know much about itemrenderers it’s a great place to start.

anyway… Filtering data…. filtering data is an old subject that I have quite a few posts on… here is a list:

ItemsChangeEffect

This I’m not really going to elaborate on, there are quite a few posts out there on it, showing different examples, adobe did a pretty good job documenting on it, and so here is a list of links that mention a little something about it.

Application – Source

Popularity: 66% [?]