Toggling file and folder visibility on a FileSystemTree control in Adobe AIR

by Peter deHaan on December 13, 2008 · 1 comment

in FileSystemTree

The following example shows how you can control whether the Adobe AIR FileSystemTree control displays only files, only subdirectories, or both by setting the enumerationMode property to one of the static constants in the FileSystemEnumerationMode class.

Full code after the jump.

Download FileSystemTree_enumerationMode_test.zip

The following example filters the items in the FileSystemTree control so only directories are visible by setting the enumerationMode property to "directoriesOnly" (FileSystemEnumerationMode.DIRECTORIES_ONLY):

<?xml version="1.0" encoding="utf-8"?>
<!-- http://airexamples.com/2008/12/13/toggling-file-and-folder-visibility-on-a-filesystemtree-control-in-adobe-air/ -->
<mx:WindowedApplication name="FileSystemTree_enumerationMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        status="{tree.selectedPath}"
        verticalAlign="middle">
 
    <mx:FileSystemTree id="tree"
            width="100%"
            height="100%"
            enumerationMode="directoriesOnly" />
 
</mx:WindowedApplication>

The following example lets user’s control how files and directories are displayed by changing the enumerationMode property dynamically using a ComboBox control:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://airexamples.com/2008/12/13/toggling-file-and-folder-visibility-on-a-filesystemtree-control-in-adobe-air/ -->
<mx:WindowedApplication name="FileSystemTree_enumerationMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        title="{tree.directory.nativePath}"
        status="{tree.selectedPath}"
        verticalAlign="middle">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.FileSystemEnumerationMode;
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="enumerationMode:">
                <mx:ComboBox id="comboBox" selectedIndex="0">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>{FileSystemEnumerationMode.DIRECTORIES_FIRST}</mx:String>
                            <mx:String>{FileSystemEnumerationMode.DIRECTORIES_ONLY}</mx:String>
                            <mx:String>{FileSystemEnumerationMode.FILES_AND_DIRECTORIES}</mx:String>
                            <mx:String>{FileSystemEnumerationMode.FILES_FIRST}</mx:String>
                            <mx:String>{FileSystemEnumerationMode.FILES_ONLY}</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:FileSystemTree id="tree"
            enumerationMode="{comboBox.selectedItem}"
            directory="{File.documentsDirectory}"
            width="100%"
            height="100%" />
 
</mx:WindowedApplication>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://airexamples.com/2008/12/13/toggling-file-and-folder-visibility-on-a-filesystemtree-control-in-adobe-air/ -->
<mx:WindowedApplication name="FileSystemTree_enumerationMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        title="{tree.directory.nativePath}"
        status="{tree.selectedPath}"
        verticalAlign="middle"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ComboBox;
            import mx.controls.FileSystemEnumerationMode;
            import mx.controls.FileSystemTree;
            import mx.events.ListEvent;
 
            private var arr:Array;
            private var comboBox:ComboBox;
 
            [Bindable]
            private var tree:FileSystemTree;
 
            private function init():void {
                arr = [];
                arr.push(FileSystemEnumerationMode.DIRECTORIES_FIRST);
                arr.push(FileSystemEnumerationMode.DIRECTORIES_ONLY);
                arr.push(FileSystemEnumerationMode.FILES_AND_DIRECTORIES);
                arr.push(FileSystemEnumerationMode.FILES_FIRST);
                arr.push(FileSystemEnumerationMode.FILES_ONLY);
 
                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.selectedIndex = 0;
                comboBox.addEventListener(ListEvent.CHANGE, tree_change);
 
                var formItem:FormItem = new FormItem();
                formItem.label = "enumerationMode:";
                formItem.addChild(comboBox);
 
                var form:Form = new Form();
                form.addChild(formItem);
 
                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);
 
                tree = new FileSystemTree();
                tree.directory = File.documentsDirectory;
                tree.percentWidth = 100;
                tree.percentHeight = 100;
                addChild(tree);
            }
 
            private function tree_change(evt:ListEvent):void {
                tree.enumerationMode = comboBox.selectedItem as String;
            }
        ]]>
    </mx:Script>
 
</mx:WindowedApplication>

{ 1 comment… read it below or add one }

1 comet 03.14.09 at 1:13 am

Thanks!!

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Previous post:

Next post: