Thursday, November 30, 2006

Flex Cairngorm:filtering data with the comparator class..

I have always been fascinated by large amount of data and filtering this data. Put all data in a big box and use filters to shape, structure and visualize that data. When browsing through the Cairgcorm shop example I found the comparator-class which filters produkts based on price or/and categorie.

I took this class and implemented it with a (simple) extension in my Flickr/Flex playground app (FlickrFolio) .

view application
view source

It consist roughly of 2 parts:

1. registering the items which you want to filter
2. registering the filters which you want to use.

Most important Classes:

// used to acces the comparator class

// the comparator class and the interface;;

// VIEW :: the product to filter..

// the filter-view

// the command which executes the filtering

1. registering the items which you want to filter

My FlickrFolio request the most recent photos and fills an ItemList. The itemlist displays the thumbnails with a custom ItemRenderer called Thumbnail.mxml.

So FLickr returns for every photo a valueobject (called Photo) which is binded to the Thumbnail.mxml. In every Thumbnail the actual thumbnail-image is loaded. WHen the image is loaded, the thumbnail registers it's data (id, title) and image to the comparator- class.

(ATT: better to cast the flickr Photo value-object to my PhotoVO value-object but could not get that to work, YET)

You register the data so you can filter on properties of that data. The data (or ValueObject) needs to implement the comparable interface, this interface has only one method, (get identifier) which the comparator class needs to get a unique identifier.

Registering the image (or sprite) let's you perform actions (showing/ hiding/ moving etc). on that image after a filter action.

2. registering the filters which you want to use.

OK, so now it's time to do some filtering, the filterView has now one simple filter. A textinput which you can use to filter on the title of a photo. The original Cairngorm shop example used a slider to filter between max - min prices and filter on different categories.

WHen you type in a letter the filterPhotoEvent gets fired which gets caught bij the FilterPhotoCommand this is where the real stuff happens. Here you first register what type of filter you want to use so:

addFilterTextProperty( filterOn, value )
here we want to filter on a String property named filterOn (=title) which has a value of (-value)

other filter properties are:
addFilterRangeProperty ( filterProperty : String, min : Number, max : Number) here you can filter on a range, so for example 'property-name:price' between min:1 and max :5

addFilterSelectionProperty( filterProperty : String, selections : Array )
here you filter on multible selections, you have selected in the group 'category' the selections ['large',' small'] . This can be used if you use checkboxes to filter on.

Here you do the filter action, it loops to the registered items and tags filtered or not..

perform an action on all the items which are tagged filtered .. So show the filtered and hide the not filtered.


It is really easy to extend the filters and I like to explore filtering on color or shapes :> Anyone has some experience in that field??


danman said...

Hey just found your article, was very helpful.

Wondering if you have had any experience trying to implement this with a datagrid?

Also i have multiple views with different data in them and i would like to use comparator for each of them but i dont see where you specify which VO's get filtered when you call the comparator, it seems like any VO that implements comparable would?

danman said...

ahh i was missing the addcomparable function, i now see how you could add different vo's to different comparators. In the comments of the comparator class it does mention about using a cell renderer's setValue method to call addComparable so i will mess around with this and see what i come up with.


kanu kukreja said...

here you posted one comments once:

Hi Brian, maybe not the right place.. but here goes.. I have the problem that when I run a ANT file in Eclipse which builds the ASDOCS. I get the following->
Error: Unable to locate specified base class 'mx.core.Application' for component class class 'flickrFolio'
Have you solved that issue, if yes can you please guide me as well as i'm facing the same issue.

Dieter said...

Great example on using flickr with Cairngorm. I know there are are many online resources, but most of them are a little too convoluted and this slotted quite easily in to my development and I was able to very simply adapt it.

uwe said...

Your Example is very helpful, but I have one -I hope little- question.

In your example and in cairngorm webstore example compare is always running against one field of the VO. Can I use your method with multiple fields ( maybe like:.filteron="FIELD1,Field2")


Alok said...


I have the same problem as kanu kukreja. I get this compilation error when I create a new flex project (NewFlexProject):

Unable to locate specified base class 'mx.core.Application' for component class 'NewFlexProject'. Any idea about this?

Fabien said...

i created a Flex Library (DataFilterLib) that take care of all the filtering process, completly in MXML.
This library is free, you can find the project details there:
If you want to have a look at the examples, they are all there (source available):
Check the examples online if you want to see how to filter on multiple criterias, using different Flex UI Components (CheckBox, Slider, List, ...).


the rafe said...

i have the same problem,
"Unable to locate specified base class 'mx.core.Application' for component class ..."

Any ideas?? can someone fix this?