This hack is about filtering data collection into control.
Some weeks ago a user of Flex-Brazil list asked how to apply filter directly on datagrid which gets the same data source. There are a great and very useful hack to apply filter function directly to data source not in the control, you can stop by here.
Okay, once you know that everything in Flash Player is Object and every object has own properties, it’s so easy to manipulate those objects, let’s take a look.
Level: Beginner.
So, what I used is just a little utility method to filter objects before apply to the control, it works with many cases, like XMLList, XMLListCollection, Array, and many UI controls that handle with data.
Here’s the method utility to make the magic:
public function applyFilter(rule:String,col:ArrayCollection):ArrayCollection { var newArr:ArrayCollection= new ArrayCollection(); if(col !=null){ for each(var obj:Object in col){ if(obj.level == rule){ newArr.addItem(obj); } } } return newArr; }
I create a simple loosely temp array collection to catch all data that fits on the rule, the obj.level where level is the property I want to watch.
Doing that you will just need to some event-drive model to the collection itself and control logic workflow. The all things are very known from you.
Here’s the full code sample for this Hack.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import flash.sampler.NewObjectSample; import mx.events.CollectionEvent; import mx.collections.ArrayCollection; public function applyFilter(rule:String,col:ArrayCollection):ArrayCollection { var newArr:ArrayCollection= new ArrayCollection(); if(col !=null){ for each (var obj:Object in col){ if(obj.level == rule){ newArr.addItem(obj); } } } return newArr; } [Bindable]private var o:Object; private var change:Boolean = false; private function addGuru():void { if(guruname.text.length>0){ o = new Object(); o.name = guruname.text; o.level = gurulevel.selectedLabel; someflexgurusCollection.addItem(o); change =true; someflexgurusCollection.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE)); } } private function updateProviders(event:CollectionEvent):void { if(change){ dvDG.dataProvider = applyFilter('Dark Vader',someflexgurusCollection); cwDG.dataProvider = applyFilter('Cowboy',someflexgurusCollection); jdDG.dataProvider = applyFilter('Jedi',someflexgurusCollection); nbDG.dataProvider = applyFilter('Newbie',someflexgurusCollection); } } ]]> </mx:Script> <mx:ArrayCollection collectionChange="updateProviders(event)" id="someflexgurusCollection"> <mx:Object name="Rich Tretola" level="Jedi"/> <mx:Object name="Matt Chotin" level="Dark Vader"/> <mx:Object name="Ted Patrick" level="Jedi"/> <mx:Object name="Mark MidNight" level="Dark Vader"/> <mx:Object name="Jesse Warden" level="Dark Vader"/> <mx:Object name="James Ward" level="Cowboy"/> <mx:Object name="Joe Lott" level="Jedi"/> <mx:Object name="Marco Casario" level="Cowboy"/> <mx:Object name="Abdul Qabiz" level="Jedi"/> <mx:Object name="Igor Costa" level="Newbie"/> </mx:ArrayCollection> <mx:Button x="10" y="126" label="Add" click="addGuru()"/> <mx:DataGrid id="dvDG" x="292" y="48" dataProvider="{applyFilter('Dark Vader',someflexgurusCollection)}"> <mx:columns> <mx:DataGridColumn headerText="Guru Name" dataField="name"/> <mx:DataGridColumn headerText="Guru Level" dataField="level"/> </mx:columns> </mx:DataGrid> <mx:DataGrid id="cwDG" x="292" y="240" dataProvider="{applyFilter('Cowboy',someflexgurusCollection)}"> <mx:columns> <mx:DataGridColumn headerText="Guru Name" dataField="name"/> <mx:DataGridColumn headerText="Guru Level" dataField="level"/> </mx:columns> </mx:DataGrid> <mx:DataGrid id="jdDG" dataProvider="{applyFilter('Jedi',someflexgurusCollection)}" x="502" y="48"> <mx:columns> <mx:DataGridColumn headerText="Guru Name" dataField="name"/> <mx:DataGridColumn headerText="Guru Level" dataField="level"/> </mx:columns> </mx:DataGrid> <mx:DataGrid id="nbDG" dataProvider="{applyFilter('Newbie',someflexgurusCollection)}" x="502" y="240"> <mx:columns> <mx:DataGridColumn headerText="Guru Name" dataField="name"/> <mx:DataGridColumn headerText="Guru Level" dataField="level"/> </mx:columns> </mx:DataGrid> <mx:Label x="292" y="21" text="Just Dark Vaders" fontWeight="bold" fontSize="11"/> <mx:Label x="292" y="213" text="Just CowBoys" fontWeight="bold" fontSize="11"/> <mx:Form x="10" y="36"> <mx:FormItem label="Name"> <mx:TextInput id="guruname"/> </mx:FormItem> <mx:FormItem label="Level"> <mx:ComboBox id="gurulevel"> <mx:dataProvider> <mx:String>Dark Vader</mx:String> <mx:String>Cowboy</mx:String> <mx:String>Jedi</mx:String> <mx:String>Newbie</mx:String> </mx:dataProvider> </mx:ComboBox> </mx:FormItem> </mx:Form> <mx:Label x="10" y="10" text="Add New Flex Guru" fontWeight="bold" fontSize="18"/> <mx:Label x="501" y="21" text="Just Jedi" fontWeight="bold" fontSize="11"/> <mx:Label x="502" y="213" text="Just Newbie" fontWeight="bold" fontSize="11"/> </mx:Application>
Twitter Updates
One Comment
Gostei, Muito interessante =]