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
nl.nyls.flickrFolio.model.ModelLocator;

// the comparator class and the interface
nl.nyls.flickrFolio.util.Comparator.as;
nl.nyls.flickrFolio.util.Comparable.as;

// VIEW :: the product to filter..
nl.nyls.flickrFolio.view.thumbnail.mxml

// the filter-view
nl.nyls.flickrFolio.view.filtertPhotos.mxml

// the command which executes the filtering
nl.nyls.flickrFolio.command.FilterPhotosCommand;

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.

model.photoComparator.filter();
Here you do the filter action, it loops to the registered items and tags filtered or not..

model.photoComparator.applyAlphaEffect();
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??