<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" backgroundGradientColors="[#ffffff, #ffffff]" width="264" height="400" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import vo.DataManagerVO;
            import appModel.AppModelLocator;
            import vo.FileVO;
            import vo.FolderVO;
            import mx.collections.ArrayCollection;
            import mx.utils.ObjectUtil;
            
            
            [Bindable]
            public var acData:ArrayCollection;
            
            [Bindable]
            private var model:AppModelLocator = AppModelLocator.getInstance();
            
            private var dataManagerVO:DataManagerVO = DataManagerVO.getInstance();
            
            private function init():void{
                //you could call your remote service here, 
                //and then explicitly call your datamanager, 
                //and hand it the result that comes back in 
                //the result Function of your remote service
                dataManagerVO.handleData();
            }
    

            private function txtSearchChanged(event:Event):void{
                //reset the data in the model
                model.searchString = txtSearch.text;

                //call the refresh function on the array collection 
                //to get the data to refresh
                model.acData.refresh();
                
                //there is a node within the array collection called children, 
                //loop through each one, and because they are FolderVO's each one 
                //has it's own filter function, and we call the refresh on that 
                //arrayCollection to filter the data even more

                for (var k:int = 0; k < model.acData.length; k++){
                    //if the current iteration of the loop is going over a folder,
                    //then refresh the folders arrayCollection aka. "children"
                    //that way the tree filters sub nodes
                    if(model.acData.getItemAt(k).type == 'FolderVO'){
                        model.acData.getItemAt(k).children.refresh();
                    }
                }
                
                myTree.dataProvider = model.acData;

            }
            
        ]]>
    </mx:Script>
    <mx:Tree id="myTree" dataProvider="{model.acData}" labelField="name" x="10" y="98" height="292" width="248"/>
    <mx:Form x="10" y="36">
        <mx:FormItem label="Search">
            <mx:TextInput id="txtSearch" text="{model.searchString}" change="txtSearchChanged(event);"/>
        </mx:FormItem>
    </mx:Form>
    <mx:Label x="10" y="10" text="Type in the search box to filter"/>
    
</mx:Application>