<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="680" height="405" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.events.TreeEvent;
            import mx.rpc.AsyncToken;
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.rpc.Fault;
            import mx.rpc.Responder;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.remoting.RemoteObject;
            [Bindable]
            private var files:ArrayCollection;
            
            private var fileSystemService:RemoteObject;
            
            private function init():void
            {
                flash.net.registerClassAlias( "Weborb.Examples.FolderItem", FolderNode );
                flash.net.registerClassAlias( "Weborb.Examples.FileItem", FileNode );
                flash.net.registerClassAlias( "Weborb.Examples.FileSystemItem", FileSystemNode );
                fileSystemService = new RemoteObject( "GenericDestination" );
                fileSystemService.source = "Weborb.Examples.FileSystemBrowser";
                fileSystemService.addEventListener( FaultEvent.FAULT, gotError );
                fileSystemService.getRoot.addEventListener( ResultEvent.RESULT, processRootStructure );
                loadingPanel.visible = true;
                fileSystemService.getRoot();
            }
            
            private function processRootStructure( result:ResultEvent ):void
            {
                files = new ArrayCollection( result.result as Array );                    
                loadingPanel.visible = false;            
            }
            
            private function gotError( fault:FaultEvent ):void
            {
                loadingPanel.visible = false;                    
                Alert.show( "Server reported an error - " + fault.fault.faultString );
            }
            
            private function handleTreeChange( event:Event ):void
            {
                var selectedItem:Object = Tree( event.target ).selectedItem;
                
                if( selectedItem is FolderNode )
                    fetchFolderInfo( FolderNode( selectedItem ) );
            }
            
            private function handleRetrieve( event:TreeEvent ):void
            {
                if( event.item is FolderNode && event.opening )
                    fetchFolderInfo( FolderNode( event.item ) );
            }
            
            private function fetchFolderInfo( folder:FolderNode ):void
            {
                if( folder.Items.length != 0 )
                    return;
                    
                loadingPanel.visible = true;
                var asyncToken:AsyncToken = fileSystemService.getDirectory( folder.fullName );
                
                asyncToken.addResponder( new mx.rpc.Responder(
                    function( event:ResultEvent ):void
                    {
                        folder.Items = new ArrayCollection( event.result as Array );
                        fileSystemTree.validateNow();
                        fileSystemTree.expandItem( folder, true );                        
                        loadingPanel.visible = false;
                    },
                    function( fault:FaultEvent):void
                    {
                        gotError( fault );
                    }
                ));                
            }
        ]]>
    </mx:Script>
    <mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" duration="200" />
    <mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" duration="200" />

    <mx:Panel x="10" y="10" width="660" height="380" layout="absolute" title="Flex Tree View with Remote Data">

        <mx:Tree x="10" y="28" width="265" height="302"
            id="fileSystemTree"
            dataDescriptor="{new FileSystemTreeDataDescriptor()}"
            dataProvider="{files}"
            change="handleTreeChange(event)"
            itemOpening="handleRetrieve(event)"
            labelField="Name" borderStyle="solid" backgroundColor="#d1e1f1" borderColor="#b9daee" backgroundAlpha="0.24"></mx:Tree>
        <mx:Canvas x="46" y="104" width="191" height="145" 
                   backgroundColor="#ccd6dd" backgroundAlpha="0.79" 
                   borderStyle="solid" borderColor="#1f719c" 
                   id="loadingPanel" cornerRadius="10" 
                   showEffect="{fadeIn}" hideEffect="{fadeOut}"  dropShadowEnabled="true" shadowDirection="right" shadowDistance="5">
            <mx:Label x="25.5" y="54" text="Loading..." fontSize="28" fontFamily="Arial" fontWeight="bold" color="#606f86"/>
        </mx:Canvas>
        <mx:Canvas x="285" y="28" width="347" height="302" borderColor="#b9daee" borderStyle="solid">
            <mx:Text x="10" y="27" text="Name:"/>
            <mx:Text x="10" y="79" text="Created On:"/>
            <mx:Text x="10" y="105" text="Last Accessed On:"/>
            <mx:Text x="10" y="131" text="Last Written On:"/>
            <mx:Text x="10" y="53" text="Size:"/>
            <mx:Label x="122" y="27" id="nameField" text="{fileSystemTree.selectedItem.Name}"/>
            <mx:Label x="122" y="53" id="sizeField" text="{fileSystemTree.selectedItem.size + &quot; bytes&quot; }"/>
            <mx:Label x="122" y="79" id="createdOnField" text="{fileSystemTree.selectedItem.createdOn}"/>
            <mx:Label x="122" y="105" id="lastModifiedOn" text="{fileSystemTree.selectedItem.lastAccessedOn}"/>
            <mx:Label x="122" y="131" id="lastWrittenOn" text="{fileSystemTree.selectedItem.lastWrittenOn}"/>
        </mx:Canvas>
        <mx:Text x="295" y="20" text="Selected File/Folder Information" opaqueBackground="0xffffff"/>
        <mx:Text x="11" y="6" text="File system structure from the remote server:"/>
    </mx:Panel>
</mx:Application>