List Directory with AIR in Flex 4
Line Break
Author: Arjan (47 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:
- CheckBox in List using MobileIconItemRenderer for Flex Mobile
- Save Data to File System with AIR in Flex 4
- Reading & Writing files in Adobe AIR
- Using the ProgressBar with a file download in Flex
- Data Dependent decoratorClass in MobileIconItemRenderer Example
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(7 votes, average: 5.00 out of 5)
Loading ...Comments
5 Responses to “List Directory with AIR in Flex 4”
Excellent work! Good points to get started with ItemRenderers. Helped me a lot.
Hi, is it possible to set the icons size instead of the biggest one available?Many thanks for this tuto.
Very helpfull to understand itemRenderer. Many Thanks for sharing
Arjan,
thank you very much for this post. I’m very much a newbie flex developer and I have modified your example to extend List rather than HBox.
At my equivalent of your line #18 of your ImageRenderer.as I am getting the following error:
Type 1020: Method marked override must override another method.
I have googled this to death and still don’t understand why I am getting this error. I tried setting all access modifiers to public to see what that would do and that didn’t help.
Do you have any ideas as to what might be my problem?
Again, many, many thanks for your post!
best,
Mark
sorry about prior post – I’ve realized some of my problems/errors