List Directory with AIR in Flex 4
Line Break
Author: Arjan (36 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:
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:
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:
Written by · Filed Under Examples
Was this post useful to you?
(6 votes, average: 5.00 out of 5)
Loading ...Comments
One Response to “List Directory with AIR in Flex 4”
Excellent work! Good points to get started with ItemRenderers. Helped me a lot.