Understanding Asynchronous Directory Searching in Adobe AIR
Designing the GUI
So, now that we know what we want to do, let's look at how to use the flex components to get the job done. The first thing a user will need to do in the application is select a directory that will be searched for media files. I chose the FileSystemTree component since I wanted to create a GUI familiar to the user. I created a new MXML custom component based on the Panel component and placed a FileSystemTree component inside it. Below are the MXML code and an image of the final result.
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="400" height="300"
creationComplete="onCreationComplete()">
<mx:FileSystemTree id="fstTree" width="100%" height="100%" />
<mx:ControlBar horizontalAlign="right">
<mx:ButtonBar id="barRootDirs" width="100%" horizontalAlign="left" />
<mx:Button label="Cancel" width="70" click="onCancel()" />
<mx:Button label="OK" width="70" click="onOK()" />
</mx:ControlBar>
</mx:Panel>
As you can see in the code section above I added a
creationComplete event handler and named the function
onCreationComplete(). This function is
responsible for the following:
- Setting the extension filter.
- Adding event listeners to the
FileSystemTree component to track when a directory is opened or closed.
- Initialize the button bar
component to include buttons to other drives available on the computer.
- Sets the initially opened directory to the users Documents folder.
See the function code below:
//0 - all 1 - Music 2 - Picture 3 - Video
public var FilterMode:String = "1";
private function onCreationComplete():void{
this.fstTree.extensions = new Array();
for each(var filter:int in FilterMode.split(";",3)){
switch (filter){
case 1:
for each(var ext:String in SettingsManager.Instance.GetMusicExtensions()){
this.fstTree.extensions.push(ext);
}
break;
case 2:
for each(var ext1:String in SettingsManager.Instance.GetPictureExtensions()){
this.fstTree.extensions.push(ext1);
}
break;
case 3:
for each(var ext2:String in SettingsManager.Instance.GetVideoExtensions()){
this.fstTree.extensions.push(ext2);
}
break;
}
}
this.fstTree.addEventListener(FileEvent.DIRECTORY_OPENING, onDirectoryOpening);
this.fstTree.addEventListener(FileEvent.DIRECTORY_CLOSING, onDirectoryClosing);
this.initNavBar();
this.browseToDirectory(File.documentsDirectory.nativePath);
}
In order to allow the user access to other drives on the computer I added a ConotrolBar component and used the File.getRootFolders function to create buttons linking to the other drives. See code below:
private function initNavBar():void{
for each(var dir:File in File.getRootDirectories()){
var button:Button = new Button();
button.data = dir.nativePath;
button.label = dir.nativePath;
button.addEventListener(MouseEvent.CLICK, onNavigate);
button.width = 45;
this.barRootDirs.addChild(button);
}
}
Once the user navigates to the desired folder I use the DIRECTORY_OPENING event to set the title property of the Panel to show the selected folder's path. See code below:
private function onDirectoryOpening(event:FileEvent):void{
this.title = this._TitleText + event.file.nativePath;
}
private function onDirectoryClosing(event:FileEvent):void{
try{
this.title = this._TitleText + event.file.parent.nativePath;
} catch(er:Error){
this.title = this._TitleText;
}
}
The user can now click ok and the newly selected directory is placed into a new FileBrowserEvent and dispatched. The SettingsViewer Custom Component is coded to listen for FileBrowserEvents. When this event is handled the SettingsViewer adds a new row to the TileList component. The user can now click OK and the currently selected settings are saved to XML. See image below:
