注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

无线时代辐射无穷

抓紧生宝宝,小心辐射

 
 
 

日志

 
 

flex4读取文件目录结构  

2011-06-03 10:22:46|  分类: flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Author: Arjan (46 Articles) - Author Website

Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.


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. CheckBox in List using MobileIconItemRenderer for Flex Mobile
    2. Save Data to File System with AIR in Flex 4
    3. Reading & Writing files in Adobe AIR
    4. Using the ProgressBar with a file download in Flex
    5. Data Dependent decoratorClass in MobileIconItemRenderer Example
  •   评论这张
     
    阅读(1806)| 评论(0)
    推荐 转载

    历史上的今天

    评论

    <#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    页脚

    网易公司版权所有 ©1997-2017