<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/halo" width="573" height="268" viewSourceURL="srcview/index.html">
    <s:layout><s:VerticalLayout horizontalAlign="center"/></s:layout>

    <fx:Script>
        <![CDATA[
            private function peopleFilter(item:Object):Boolean {
                var risp:Boolean=new Boolean;
                if (sexFilter.selectedIndex == 0 || item.sex == sexFilter.selectedItem) {
                    if (hairFilter.selectedIndex == 0 || item.hairColor == hairFilter.selectedItem) {
                        if (ageFilter.selectedIndex == 0 || item.age >= ageFilter.selectedItem) {
                            return true
                        }
                    }
                } 
                
                return false;
                
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:ArrayCollection id="peopleCollection">
            <fx:Object name="Matteo" age="22" sex="M" hairColor="Black" />
            <fx:Object name="Marco" age="17" sex="M" hairColor="Black" />
            <fx:Object name="Lisa" age="50" sex="F" hairColor="Blonde" />
            <fx:Object name="Frank" age="25" sex="M" hairColor="Brown" />
            <fx:Object name="Carla" age="18" sex="F" hairColor="Brown" />
            <fx:Object name="Francesca" age="15" sex="F" hairColor="Blonde" />
            <fx:Object name="Silvia" age="20" sex="F" hairColor="Black" />
            <fx:Object name="Nicola" age="35" sex="M" hairColor="Blonde" />
        </s:ArrayCollection>
    </fx:Declarations>
    <s:HGroup>
        <mx:FormItem label="Sex:">
        <s:DropDownList id="sexFilter" selectedIndex="0" change="peopleCollection.filterFunction = peopleFilter; peopleCollection.refresh();">
            <s:dataProvider>
                <s:ArrayCollection>
                    <fx:String>Both</fx:String>
                    <fx:String>M</fx:String>
                    <fx:String>F</fx:String>
                </s:ArrayCollection>
            </s:dataProvider>
        </s:DropDownList>            
        </mx:FormItem>
        <mx:FormItem label="Minimum age:" >
            <s:DropDownList id="ageFilter" selectedIndex="0" change="peopleCollection.filterFunction = peopleFilter; peopleCollection.refresh();">
                <s:dataProvider>
                    <s:ArrayCollection>
                        <fx:String>None</fx:String>
                        <fx:String>18</fx:String>
                        <fx:String>20</fx:String>
                        <fx:String>30</fx:String>
                    </s:ArrayCollection>
                </s:dataProvider>
            </s:DropDownList>            
        </mx:FormItem>
        <mx:FormItem label="Hair color:">
            <s:DropDownList id="hairFilter" selectedIndex="0" change="peopleCollection.filterFunction = peopleFilter; peopleCollection.refresh();">
                <s:dataProvider>
                    <s:ArrayCollection>
                        <fx:String>-- All --</fx:String>
                        <fx:String>Black</fx:String>
                        <fx:String>Brown</fx:String>
                        <fx:String>Blonde</fx:String>
                    </s:ArrayCollection>
                </s:dataProvider>
            </s:DropDownList>            
        </mx:FormItem>
    </s:HGroup>
    <mx:DataGrid dataProvider="{peopleCollection}" width="562" height="231">
        <mx:columns>    
        <mx:DataGridColumn headerText="Name" dataField="name"/>
        <mx:DataGridColumn headerText="Age" dataField="age"/>
        <mx:DataGridColumn headerText="Sex" dataField="sex"/>
        <mx:DataGridColumn headerText="Hair color" dataField="hairColor"/>
        </mx:columns>
    </mx:DataGrid>
</s:Application>