Posts tagged design patterns

ArrayCollection: filterFuntion with multiple filter functions using decorator pattern

Mar 30th

Posted by Davide Zanotti in flex

15 comments

I was looking for an elegant solution to implement multiple filter functions on an ArrayCollection (which provides a method filterFunction() that can be assigned dynamically in order to filter data inside the collection). The first and only valid solution I found was that one from Cristian Rotundu, he has extended ArrayCollection class providing a filterFunctions properties which accepts an Array of functions which will be executed in sequence (into a loop) once filterFunction is triggered. Anyway I didn’t want to subclass ArrayCollection and by using the decorator pattern I implemented my own multiple filters version.

So, this is what I done:

  1. I defined an interface IFilter, which declares only one method: apply()
  2. I defined a dummy Filter class (which implements IFilter in a basic way just to agree to the interface), that is used as a basic empty filter to decorate. It also has a constant called ALL_VALUES which is used as a wildcard for filters (it’s a simple string with value “*”, which means “all values are allowed”)
  3. I defined an abstract AbstractFilterDecorator class
  4. I created as many subclass of AbstractFilterDecorator as the filters I need (yes I treat filters as classes not mere functions)

The implementation code is the following:

1
2
3
4
5
6
7
8
9
var data:ArrayCollection = ArrayCollection(grid.dataProvider);
var filter:IFilter = new Filter();
               
filter = new LevelFilter(filter, levelValue);
filter = new CategoryFilter(filter, categoryValue);
filter = new DateFilter(filter, dateValue, "DD/MM/YY");
               
data.filterFunction = filter.apply;
data.refresh();

The filter object is wrapped by decorators which all accepts 2 common arguments: an IFilter reference and an Object representing a value. The DateFilter has a third parameter which is used to configure an internal DateFormatter (from mx.formatters package).
I’m pretty satisfied :)
Uh… and if you are worried about performance, it is fast enough because filter object are created once and then the function assigned to filterFunction is a reference to the resulting decorated filter.

UPDATE:
I realized a very simple example application which can be downloaded here.
This following is the content of the mxml file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:Script>
        <![CDATA[
       
            import mx.collections.ArrayCollection;
            import com.daveoncode.filters.*;
           
            private function applyFilters():void {
               
                var data:ArrayCollection  = ArrayCollection(userGrid.dataProvider);
                var filter:IFilter = new Filter();
               
                filter = new AgeFilter(filter, ageFilterValue.text);
                filter = new DateFilter(filter, dateFilterValue.selectedDate);
                filter = new SexFilter(filter, sexFilterValue.value);
               
                data.filterFunction = filter.apply;
                data.refresh();
               
            }
           
        ]]>
    </mx:Script>
   
    <mx:Panel title="Filters" width="600">
        <mx:Form>
            <mx:FormItem label="Age:">
                <mx:TextInput id="ageFilterValue" width="30" />
            </mx:FormItem>
            <mx:FormItem label="Sex:">
                <mx:ComboBox id="sexFilterValue" dataProvider="{[{data: Filter.ALL_VALUES, label: 'ALL'}, {data: 'm', label: 'Male'}, {data: 'f', label: 'Female'}]}" />
            </mx:FormItem>
            <mx:FormItem label="Join date:">
                <mx:DateField id="dateFilterValue" formatString="DD/MM/YY" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Apply filters" click="{this.applyFilters()}" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
   
    <mx:Panel title="Users" width="600">
        <mx:DataGrid id="userGrid" width="100%">
            <mx:dataProvider>
                <mx:ArrayCollection>
                    <mx:Array>
                        <mx:Object age="24" sex="f" name="Susan" joinDate="{new Date(2007, 5, 15)}" />
                        <mx:Object age="36" sex="f" name="Ashley" joinDate="{new Date(1998, 7, 20)}" />
                        <mx:Object age="24" sex="f" name="Jennifer" joinDate="{new Date(2001, 3, 24)}" />
                        <mx:Object age="19" sex="f" name="Emma" joinDate="{new Date(2002, 3, 24)}" />
                        <mx:Object age="44" sex="f" name="Carol" joinDate="{new Date(1999, 9, 16)}" />
                        <mx:Object age="28" sex="m" name="Peter" joinDate="{new Date(2005, 3, 12)}" />
                        <mx:Object age="35" sex="m" name="Mike" joinDate="{new Date(2008, 10, 10)}" />
                        <mx:Object age="26" sex="m" name="Dave" joinDate="{new Date(2008, 10, 10)}" />
                        <mx:Object age="44" sex="m" name="William" joinDate="{new Date(2004, 9, 16)}" />
                        <mx:Object age="24" sex="m" name="Sean" joinDate="{new Date(2006, 3, 24)}" />
                    </mx:Array>
                </mx:ArrayCollection>
            </mx:dataProvider>
        </mx:DataGrid>
    </mx:Panel>
   
</mx:Application>
, , ,

Learning design patterns with Actionscript 3: episode 2 – Decorator pattern

Mar 30th

Posted by Davide Zanotti in actionscript

2 comments

The objective of the decorator pattern is to provide a way to add extra features and responsibilities to a class at runtime without to subclass it.

The classes diagram of this pattern is composed by an interface or an abstract class which will define the supertype of the class that will be extended (decorated) by one or more classes implementing the same interface and extending an abstract class which identify these as decorator classes.

More >

,

Learning design patterns with Actionscript 3: episode 1 – Singleton pattern

Dec 28th

Posted by Davide Zanotti in actionscript

1 comment

In these Christmas holidays I bought some new books, among them I purchased “Actionscript 3 design patterns” (written by William Sanders and Chandima Cumaranatunge) and I’m actually studying this one. I never faced before the world of design patterns (which is, for those that never heard about, a way to write code and solve problems by implementing tested strategies that will guarantee flexibility and extensibility), or better I knew what a design pattern is, but I’m trying to learn to use them for the first time.
Unfortunately the first thing I learned about implementing design patterns in Actionscript 3 is that for some stuff we have to use workarounds, because actually as3 doesn’t provides 2 little useful things: abstract classes (on which most of the patterns are based) and not public constructor (in Java we can declare a class constructor as private, in as3 we must declare it as public), anyway with some little efforts, we can do everything :-)

More >

, , , , ,