RocketFM: 2 New Features Explained

Today I thought I would walk you through 2 features I pushed into the repository last night. The first is the ability to download an entire directory by right clicking on it. The other was a naming issue with the zip file download so we are going to change how that works.

We will start with the ability to download an entire directory. Right now if you clicked on a directory and selected every single file in the directory you are essentially downloading that directory. The selected files are passed to a download method and if its more than one we pass an array of file paths to our download zip method. What we want to do is add a right clicking menu to our tree to download directory menu item. To do that we are going to update our Tree Item Renderer (com.rocketfm.customTreeItemRenderer). The only addition is the new download menu item and when its clicked we are going to dispatch a custom event named download directory that will pass the data for that tree item with it. package com.rocketfm { import events.DownloadDirectoryEvent; import flash.display.DisplayObject; import flash.events.ContextMenuEvent; import flash.ui.ContextMenu; import flash.ui.ContextMenuItem; import mx.collections.*; import mx.controls.Alert; import mx.controls.treeClasses.*; import mx.core.Application; import mx.managers.PopUpManager; import views.AddDirectory; import views.DeleteDirectory; import views.RenameDirectory; public class CustomTreeItemRenderer extends TreeItemRenderer { private var renameWin:RenameDirectory; private var addWin:AddDirectory; private var delWin:DeleteDirectory; private var baseDir:String; public function CustomTreeItemRenderer() { super(); var menu:ContextMenu = new ContextMenu(); var add:ContextMenuItem = new ContextMenuItem("Add Folder"); var remove:ContextMenuItem = new ContextMenuItem("Remove Folder"); var rename:ContextMenuItem = new ContextMenuItem("Rename Folder"); var download:ContextMenuItem = new ContextMenuItem("Download Directory"); add.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,addDirectory); remove.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,removeDirectory); rename.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,renameDirectory); download.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,downloadAll); menu.hideBuiltInItems(); menu.customItems.push(add); menu.customItems.push(remove); menu.customItems.push(rename); menu.customItems.push(download); this.baseDir = Application.application.baseDir; this.contextMenu = menu; } private function addDirectory(event:ContextMenuEvent):void { addWin = new AddDirectory(); addWin.dirPath = data.path; addWin.parentPath = data.parent; addWin.item = data; // add window PopUpManager.addPopUp(addWin,DisplayObject(Application.application),true); } private function removeDirectory(event:ContextMenuEvent):void { if(data.path != baseDir){ delWin = new DeleteDirectory(); delWin.item = data; // delete window PopUpManager.addPopUp(delWin,DisplayObject(Application.application),true); } else { Alert.show("You do not have permission to delete the base directory","Remove Error"); } } private function renameDirectory(event:ContextMenuEvent):void { if(data.path != baseDir){ renameWin = new RenameDirectory(); renameWin.item = data; renameWin.oldDirectoryName = data.name; renameWin.parentPath = data.parent; // rename window PopUpManager.addPopUp(renameWin,DisplayObject(Application.application),true); } else { Alert.show("You do not have permission to rename the base directory","Rename Error"); } } private function downloadAll(event:ContextMenuEvent):void { dispatchEvent(new DownloadDirectoryEvent("downloadDirectory",data)); } } } Now that we are dispatching our new custom event let's take a look at that event. This event will pass along all of the information about the tree item that was clicked. This way back in our main application we will know what directory to serve up. It's also important to note that the second parameter of the call to the super constructor is set to true. This means that this event will bubble up. Go ahead and try setting that to false to see why this is important. package events { import flash.events.Event; public class DownloadDirectoryEvent extends Event { public static const DOWNLOAD_DIRECTORY:String = "downloadDirectory"; public var item:Object; public function DownloadDirectoryEvent(type:String,item:Object){ super(type, true); this.item = item; } } }

Back in our main application we need start listening for that event. private function init():void { // get the top level directories FileManager.getDirectories(baseDir,true,rootLabel); // get any files for the base dir FileManager.getFiles(baseDir); // set the status text setStatusText(baseDir); // set selected index to home tree.selectedIndex = 0; Application.application.systemManager.addEventListener(RefreshTreeEvent.REFRESH_TREE,refreshTree); Application.application.systemManager.addEventListener(RefreshFileListEvent.REFRESH_FILE_LIST,refreshFileList); this.addEventListener(DownloadDirectoryEvent.DOWNLOAD_DIRECTORY,downloadDirectory); } When the event is caught it will call our downloadDirectory method and pass our data to it. In our method we are not going to re write any logic for downloading files. If you remember our download method works off of the selected files in the data grid. An easy way to make use of existing code is to just select all of the files in the directory and call our downloadFiles method. private function downloadDirectory(event:DownloadDirectoryEvent):void { var path:String = event.item.path; var temp:Array = new Array(); for(var i:uint = 0; i<files.length; ++i){ temp.push(i); } filelist.selectedIndices = temp; // if there is at least 1 file in the directory if(filelist.selectedIndices.length > 0){ downloadFiles(); } else { Alert.show("Please select a directory with at least one file.","Download Error"); } }

The other feature I added had to do with a client request. When you select multiple files and click download we wrap all of the files up in a zip file and present the file to you for download. The name of that file has been download but the client suggested that we make the name of the download the directory name + .zip. I thought this was a great idea so I went ahead and made the small change. We know that when a user either clicks on or right clicks on a directory it is selected, so to get the name of the directory we can use the selectedItem property of the tree. public function downloadFiles():void { // if more then 1 file is selected zip it up if(filelist.selectedIndices.length > 1){ var iList:Array = filelist.selectedIndices; var paths:Array = new Array(); for(var i:uint=0; i<iList.length; ++i){ paths.push(files[i].path); } var request:URLRequest = new URLRequest(downloadURL + "?method=downloadZip8&zipPath=" + tempLocation + "\\" + tree.selectedItem.name + ".zip&files=" + paths.toString()); navigateToURL(request); } else { var request:URLRequest = new URLRequest(downloadURL + "?method=downloadFile&name=" + filelist.selectedItem.name + "&path=" + filelist.selectedItem.path); navigateToURL(request); } }

This entry was posted on January 13, 2009 at 9:48 AM and has received 2355 views. Comments 0 | Print this entry.