Browse > Home / Examples / List Directory with AIR in Flex 4

List Directory with AIR in Flex 4

02 February 2010

As you probably know already, with AIR you have access to the local file system. The following example shows you how you can list the contents of a directory with AIR in Flex 4. Besides showing filenames, I also want to display the icon associated with the file.


In AIR you have access to some default directories, these are the following:

  • The Desktop Directory
  • Documents Directory
  • User Directory
  • Application Directory
  • Application Storage Directory


    We’re going to build a small application that can show the contents of the directories listed above. To do this, lets create a simple UI to do this:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <s:VGroup width="100%" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
        <s:HGroup width="100%">
            <s:RadioButton label="Desktop" group="{directory}" value="desktop" selected="true"/>
            <s:RadioButton label="Documents" group="{directory}" value="documents"/>
            <s:RadioButton label="User" group="{directory}" value="user"/>
            <s:RadioButton label="Application" group="{directory}" value="application"/>
            <s:RadioButton label="Application Storage" group="{directory}" value="applicationStorage"/>
        </s:HGroup>
        <mx:DataGrid width="100%" height="100%" dataProvider="{files}">
           
            <mx:columns>
                <mx:DataGridColumn dataField="icon" headerText="Filetype" width="60" itemRenderer="ImageRenderer"/>
                <mx:DataGridColumn dataField="name" headerText="Filename"/>
            </mx:columns>
           
        </mx:DataGrid>
    </s:VGroup>

    For the RadioButtons we need to declare the RadioButtonGroup in the Declarations tag:

    1
    2
    3
    <fx:Declarations>
        <s:RadioButtonGroup id="directory" change="handleDirectoryChange()"/>
    </fx:Declarations>

    The DataProvider for the DataGrid (in yout script section):

    1
    2
    [Bindable]
    private var files:ArrayCollection;

    And the ImageRenderer to show the icon of the File in the DataGrid:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    package
    {
        import flash.display.Bitmap;   
        import mx.containers.HBox;
        import mx.controls.Image;
       
        public class ImageRenderer extends HBox
        {
            private var img:Image = new Image();
            private var myBitmap:Bitmap;
           
            public function ImageRenderer(){
                // Set some layout properties
                this.setStyle("verticalAlign", "middle");
                this.setStyle("horizontalAlign", "center");
            }
           
            override public function set data(value:Object):void
            {
                super.data = value;
                // Create new Bitmap with the BitmapData from File.icon.bitmaps array
                // The first item in the Array is the biggest icon available
                myBitmap = new Bitmap( data.icon.bitmaps[0] );
                // Set the image source to the new Bitmap
                img.source = myBitmap;
                // Add the Image to the HBox
                addChild(img);
            }
        }
    }

    Now we need to create some Actionscript functions to actually list the selected directory contents. We need a function that lists the default directory and a change handler for the RadioButtonGroup to do this. Don’t forget to call the init() on the initialize event of the application!

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    private function init():void
    {
        // Default on start: resolve desktop directory
        var desktop:File = File.desktopDirectory;
        // Get desktop directory listing
        files = new ArrayCollection(desktop.getDirectoryListing());
    }

    private function handleDirectoryChange():void
    {

        var selectedDirectory:File;
        // Get the selected directory
        switch( directory.selectedValue )
        {
            case "desktop":
                selectedDirectory = File.desktopDirectory;
                break;
            case "documents":
                selectedDirectory = File.documentsDirectory;
                break;
            case "user":
                selectedDirectory = File.userDirectory;
                break;
            case "application":
                selectedDirectory = File.applicationDirectory;
                break;
            case "applicationStorage":
                selectedDirectory = File.applicationStorageDirectory;
                break;
        }
        // Get selected directory listing
        files = new ArrayCollection(selectedDirectory.getDirectoryListing());
    }

    That’s it, you’re already done. By selecting the RadioButtons the application will list the directory contens of the corresponding directory including the icons associated with the files in that directory.

    Download the AIR application here.

    The final application should look something like this:

    DirectoryList

    View source is enabled, but here’s the complete source code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/halo" initialize="init()" viewSourceURL="srcview/index.html">
       
        <fx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
               
                [Bindable]
                private var files:ArrayCollection;
               
                private function init():void
                {
                    // Default on start: resolve desktop directory
                    var desktop:File = File.desktopDirectory;
                    // Get desktop directory listing
                    files = new ArrayCollection(desktop.getDirectoryListing());
                }
               
                private function handleDirectoryChange():void
                {
               
                    var selectedDirectory:File;
                    // Get the selected directory
                    switch( directory.selectedValue )
                    {
                        case "desktop":
                            selectedDirectory = File.desktopDirectory;
                            break;
                        case "documents":
                            selectedDirectory = File.documentsDirectory;
                            break;
                        case "user":
                            selectedDirectory = File.userDirectory;
                            break;
                        case "application":
                            selectedDirectory = File.applicationDirectory;
                            break;
                        case "applicationStorage":
                            selectedDirectory = File.applicationStorageDirectory;
                            break;
                    }
                    // Get selected directory listing
                    files = new ArrayCollection(selectedDirectory.getDirectoryListing());
                }  
            ]]>
        </fx:Script>
       
       
        <fx:Declarations>
            <s:RadioButtonGroup id="directory" change="handleDirectoryChange()"/>
        </fx:Declarations>
       
        <s:VGroup width="100%" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
            <s:HGroup width="100%">
                <s:RadioButton label="Desktop" group="{directory}" value="desktop" selected="true"/>
                <s:RadioButton label="Documents" group="{directory}" value="documents"/>
                <s:RadioButton label="User" group="{directory}" value="user"/>
                <s:RadioButton label="Application" group="{directory}" value="application"/>
                <s:RadioButton label="Application Storage" group="{directory}" value="applicationStorage"/>
            </s:HGroup>
            <mx:DataGrid width="100%" height="100%" dataProvider="{files}">
               
                <mx:columns>
                    <mx:DataGridColumn dataField="icon" headerText="Filetype" width="60" itemRenderer="ImageRenderer"/>
                    <mx:DataGridColumn dataField="name" headerText="Filename"/>
                </mx:columns>
               
            </mx:DataGrid>
        </s:VGroup>
       
    </s:WindowedApplication>

    Related posts:

    1. Save Data to File System with AIR in Flex 4
    2. Using the ProgressBar with a file download in Flex

    Written by Arjan · Filed Under Examples 

    Was this post useful to you?

    1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
    Loading ... Loading ...

    Comments

    Got something to say?