<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" verticalAlign="middle"
    creationComplete="ccomp();" viewSourceURL="srcview/index.html">
    
    <mx:Style source="uglyBunny.css" />
    
    <mx:Script>
        <![CDATA[
        
        
            import com.quilix.utils.MockData;
        
        
            /**
             * @private
             * Array of items as the base source for the filtered provider.
             */
            private var _items:Array = [];
        
            /**
             * @private
             * A couple types to play with.
             */
            private var _types:Array = [ "db", "web server" ];
            
            /**
             * @private
             * A couple stati to play with.
             */
            private var _stati:Array = [ "on-line", "off-line" ];
            
            
            /**
             * @private
             * Bootstrap with 10 items.
             */
            private function ccomp():void
            {
                for ( var i:int = 0; i < 10; i++ )
                    addItem( ( i == 9 ? true : false ) );
            }
            

            /**
             * @private
             * Adds a randomized item to the items array.
             * 
             * @param refresh Will trigger a UI update when marked true.
             */            
            private function addItem( refresh:Boolean = false ):void
            {
                var o:Object = new Object();
                o.ip = MockData.getIP();
                o.type = MockData.randomItem( _types ) as String;
                o.status = MockData.randomItem( _stati ) as String;
                
                _items.push( o );
                
                if ( refresh == true )
                    dispatchEvent( new Event( "itemsChanged" ) );
            }
            
            
            /**
             * @private
             * 
             * @param value String that must coincide with an item in your type array.
             */
            [Bindable(event="itemsChanged")]
            private function filteredProvider( value:String = "" ):Array
            {
                var result:Array = [];
                
                for ( var i:int = 0; i < _items.length; i++ )
                {
                    if ( _items[i].type == value || value == "" )
                        result.push( _items[i] );
                }
                
                return result;
            }
            
            
        ]]>
    </mx:Script>
        
    <mx:DataGrid y="100" width="400" dataProvider="{filteredProvider()}"/>
    <mx:DataGrid y="300" width="400" dataProvider="{filteredProvider('db')}"/>
    <mx:DataGrid y="500" width="400" dataProvider="{filteredProvider('web server')}"/>    
    <mx:HRule width="400"/>
    <mx:Button label=" add item " click="addItem(true)"/>
    
</mx:Application>