Flickr Floater: Building an Adobe AIR application with Flex 3

Working with files

Security sandboxing prevents Adobe Flash Player from accessing the file system. Adobe AIR includes additional classes that enable you to build applications with Adobe Flash or Adobe Flex that can read, create, and manage both files and folders on the user's system.

For this sample application I'm using the flash.filesystem package to browse for files, copy them into an application directory, and delete them when required.

The process of browsing for a file, selecting it, and copying it to local storage occurs in two steps: First a native OS file browser is opened, and then the file is copied after the selection has occurred. As shown in the sample code below, I use File.applicationStorageDirectory.resolvePath to conditionally create a directory called images in the application's local storage directory if it doesn't exist.

The selectImageFile() function opens a native OS file browser that allows the user to select files with a specified extension, in this case .jpg, .gif, and .png. The function contains an event listener that will fire when a file is selected, calling the fileSelected() function. This copies the selected file into the images directory and calls the refresh method of the imageList component. This is a FileSystemList component that I'm using to display a list of the contents of the images directory. I need to update it manually whenever I add new files using ActionScript.

If you've worked with the flash.filesystem package in Adobe AIR beta 1, you will notice something different with the code below. The resolve method for the various directory properties of the File class has now been renamed to resolvePath.

The following sample code illustrates functions to open a native OS file browser and to copy a selected file into a local directory:

import flash.filesystem.File;
import flash.net.FileFilter;
private var dir:File = File.applicationStorageDirectory.resolvePath("images");
private var imagesDir:String;
private function init():void {
  dir.createDirectory();
  imagesDir = dir.nativePath;
}
private var fileToOpen:File = File.documentsDirectory;
private function selectImageFile(root:File):void {
  var imgFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
  root.browseForOpen("Open", [imgFilter]);
  root.addEventListener(Event.SELECT, fileSelected);
}
private function fileSelected(event:Event):void {
  var original:File = File.userDirectory.resolvePath(fileToOpen.nativePath);
  var newFile:File = File.applicationStorageDirectory.resolvePath(imagesDir + "/" + fileToOpen.name);
  original.copyTo(newFile, true);
  imageList.refresh();
}

This application needs to know more about the files than just their names and the location that they've been saved to. In all likelihood you'll need to associate additional data with the images, for example an image title and description as well as the tags linked to a Flickr photo ID. That information would be best managed through a database. Your code to manage files, however, should be aware of the database records to keep the add and delete actions coordinated.

Figure 3. You can edit the image details in a dialog box.

Page 3 of 9

Previous Page

Next Page