CFMU Bug Fix - Using External Interface

In my CFMU project I am using the ExternalInterface class. This class allows your application to communicate with the flash players container, in this case the ColdFusion template and JavaScript. I originally was giving users the ability to define a JS function that would be called when all of the files were uploaded. I had a couple people email telling me that it was just not working how it should be. When they were uploaded files the JavaScript method was being called right away while the file uploads were still in progress.

As soon as I heard this I realized what I had done. Let's take a look at the following code. When a user selects some files for upload and clicks on the upload button the following method is called. The variable _files is an array collection that holds a list of File references. The File Reference class has a method upload that is used to push the file to a remote server. You will also notice that I add some event listeners to each file. This lets us monitor the progress of the upload and is important for the feature we are working. The problem here is that I am calling the external interface method after each file is sent for upload. This does not mean that the file has actually been uploaded, just that Flash has done it's part. So what would happen is the list of files would immediately show up right after the user clicked upload and this is not what we want. private function onUpload(event:MouseEvent):void { var request:URLRequest = new URLRequest(_uploadURL); var params:URLVariables = new URLVariables(); params.path = _uploadDir; request.method = URLRequestMethod.POST; request.data = params; for(var i:uint = 0; i < _files.length; ++i) { try { _files[i].addEventListener(Event.COMPLETE,uploadComplete); _files[i].addEventListener(ProgressEvent.PROGRESS,monitorProgress); _files[i].addEventListener(IOErrorEvent.IO_ERROR,handleError); _files[i].upload(request); } catch(e:Error) { // generic error handling Alert.show("Error: " + e); } } // call javascript method when done if a callback method was given if(callbackMethod != "" && callbackMethod != null){ if (ExternalInterface.available) { ExternalInterface.call(callbackMethod,_files); } } }

[More]

A Flex Combo box Tip

I was working on a search feature for my RocketFM project and I ran in to a couple of things that I thought I would share. If your a Flex developer you probably already know this but for those of us who just dabble in it this entry will help.

First not really my tip but let's say we have a list of 30 files and we want to build a drop down list of unique file types. This way if a user wanted to only search for a specific file type they could. First I am looping over my files array and for each item I want to check if that file type is already in my fileTypes array, if its not I add it. To do so you can use the array class method indexOf. If indexOf returns a -1 then it does not contain that value so you can insert it into the array. private function loadFileTypes():void { // loop _files and build a unique file list for(var i:uint=0; i<_files.length;++i){ if(_fileTypes.indexOf(_files[i].type) == -1){ _fileTypes.push(_files[i].type); } } }

[More]

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)); } } }

[More]

Real World Flex/ColdFusion: Part 11

This will be the last post in this series. While I will continue to add features to this project and share the details with you, I wanted to find a clear line where I could close this series. The last feature is probably the most important. What good is a file manager if you can't upload new files. This post will cover the upload component.

First we are going to create a new file components/RocketUploader. The component we are creating is going to be based on a Title Window because we are going to launch the uploader as a popup from our application. The layout of the component is pretty simple. I know we talked about layouts at the beginning of this series and I am doing the exact opposite of what I preached but I just like the look and feel of the panel component here. In the panel we have some buttons, a data grid to display the files and progress bar to show file upload progress. <?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" showCloseButton="true"> <mx:Panel id="container" title="{titleBarText}" width="100%" height="100%" titleIcon="@Embed('assets/images/image.png')" backgroundColor="#f2f2f2"> <mx:HBox width="100%" backgroundAlpha="0.0"> <mx:Button id="btnBrowse" label="Browse" click="onBrowse(event)" icon="@Embed('assets/images/add.png')"/> <mx:Button id="btnRemove" label="Remove" click="onRemove(event)" icon="@Embed('assets/images/delete.png')" enabled="{dgFiles.selectedIndex > -1}"/> <mx:Spacer width="100%"/> <mx:Button id="btnUpload" label="Upload" click="onUpload(event)" icon="@Embed('assets/images/image_add.png')" enabled="{_files.length > 0}"/> </mx:HBox> <mx:DataGrid id="dgFiles" width="100%" height="100%" dataProvider="{_files}" allowMultipleSelection="true"> <mx:columns> <mx:DataGridColumn headerText="File Name" dataField="name"/> <mx:DataGridColumn headerText="File Type" dataField="type"/> <mx:DataGridColumn headerText="File Size" dataField="size" labelFunction="bytesToKilobytes"/> </mx:columns> </mx:DataGrid> <mx:ControlBar> <mx:Label id="txtStatus" text="{statusBarText}" width="200"/> <mx:ProgressBar id="uploadProgressBar" width="100%" labelPlacement="center" trackHeight="20" mode="manual" enabled="{_files.length > 0}" label="{progressBarText}" color="#3B6BBF"/> </mx:ControlBar> </mx:Panel> </mx:TitleWindow>

[More]

Adding a confirm delete process

Here is quick little tip that I thought I would share with you. Someone pointed out to me that there is no process to confirm with the user while deleting a file. This is always a good idea before deleting a file from the file system.

To do this we can use the built in alert class but lets take a look at how its different from what your probably used to in the world of html/js. When the user clicks on the delete file icon the deleteFiles method is triggered. This is the method where we were deleting the files before. We are going to move that out of there and use the static Alert class to popup a little dialog box. The 3rd parameter in the Alert.show method is what buttons to display. If we use the OR operator we can add multiple buttons to the alert box. Next we add an event listener to call a method when either of the buttons are clicked. private function deleteFiles(event:Event):void { Alert.show("Are you sure you want to delete the selected file(s)","Confirm Delete",Alert.YES | Alert.CANCEL,this,onConfirmDelete); }

When the onConfirmDelete method is called our event.detail property will return the integer of the button that was pressed. If you take a look at the Alert class you will see that each button is a static const represented by an integer. So we you can check to see if event.detail is equal to Alert.YES and that will tell us if the yes button was pressed. private function onConfirmDelete(event:CloseEvent):void { // 1=YES 2=NO 4=OK 8=CANCEL if(event.detail == Alert.YES){ var iList:Array = filelist.selectedIndices; for(var i:uint=0; i<iList.length; i){ FileManager.deleteFile(files[i].path); } // refresh the selected directory; if(tree.selectedItem != null){ // if the tree has a selected item refresh that directory FileManager.getFiles(tree.selectedItem.path); } else { // it is most likely the home directory FileManager.getFiles(baseDir); } } }

Nothing fancy but I was not aware of how to do this before tonight so hopefully someone else will learn something.

Real World Flex/ColdFusion: Part 10

Today we are going to walk through a pretty cool feature of our application. I want to add drag and drop support from the grid to the tree. If I am in one folder I want to be able to copy/move multiple files to another folder.

The first step is to add drag support to the grid. We want to enable both the drag enabled and drag move enabled properties. <mx:DataGrid id="filelist" width="100%" height="100%" dataProvider="{files}" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"> <mx:columns> <mx:DataGridColumn headerText="File Name" dataField="name"/> <mx:DataGridColumn headerText="File Type" dataField="type"/> <mx:DataGridColumn headerText="File Size" dataField="size" labelFunction="bytesToKilobytes"/> <mx:DataGridColumn headerText="Last Modified" dataField="lastModified"/> <mx:DataGridColumn headerText="Hidden" dataField="isHidden"/> </mx:columns> </mx:DataGrid>

[More]

ActionScript 3 Dictionary Class

Working through the Rocket FM series I said I would come back and explain this a little further so here we are. First lets take a look at the problem and then we can take a look at the solution.

If we take a look at a dump of our directories object as the tree is loaded (base directories) we can get a visual of what the structure is. What If I said to you please give me the object where the path is C:\dan\css. If you knew that this was the only level to search through you could easily do a loop looking at each path property. If I said to you though there could be 100 levels that you would have to search though. You still might say that you could start doing recursive loops. This gets to be a tedious process and we really need a better way to do this.

[More]

Real World Flex/ColdFusion: Part 9

We are nearing the end of this series (3+) but this one may be the longest of them all. Today we are going to go over adding the ability to add/rename/remove directories. There are many things and some pretty important concepts that go into this part of the series so pay close attention.

To allow the user the ability to add/remove/rename folders we are going to add a right click context menu to each folder. That's right we are going to add it to each folder not the tree. The tree has a property context menu but that will apply it to the whole tree. This is where I actually started but quickly realized there was no easy way to figure out exactly what branch is being clicked. If you want an explination of why you should take this approach check out this post I came across.

[More]

Real World Flex/ColdFusion: Part 8

Today I want to look at 2 new features of our Rocket FM application that we have been building. We are going to look at how to delete files and how to download them. We will start with the delete feature and move on to downloading because the download feature is a pretty cool one and I will get into why I think it is a good one.

You always have to be aware of what the user may do that could cause our application to fail. Let's say I created a click event for out delete button that called some logic to delete a file. Well what if a file(s) was not selected. We could use some logic to make sure a file is selected. For me though that is unnecessary code to write. I think a better solution is to just now allow the delete button to be clicked until a file is selected. Using data binding and the enabled property of the button we can check to make sure at least one file is selected. <mx:HBox left="20" right="20" bottom="20" height="25"> <mx:Label id="txtStatus" text="Status text" styleName="statusText"/> <mx:Spacer width="100%"/> <mx:Button label="Delete" click="deleteFiles(event)" enabled="{filelist.selectedIndices.length > 0}"/> <mx:Button label="Download" click="downloadFiles()" enabled="{filelist.selectedIndices.length > 0}"/> <mx:Button label="Upload"/> </mx:HBox>

To delete a file we need to update our file manager component first and a a delete method. There is really nothing special going on here, a simple cffile operation to delete the file will work. <cffunction name="deleteFile" access="remote" output="false" returntype="void"> <cfargument name="fileToDelete" type="string" required="true"/> <cffile action="delete" file="#arguments.fileToDelete#"/> </cffunction> Now that we have the back end we need to add our deleteFiles method that is called when the delete button is clicked. First we need to figure out what files are selected. This will be at least 1 but could be any number of files. To do that we use the selectedIndicies property of the data grid. In each iteration of the loop we make a call to delete our file. Finally we need to update the list of files. To do that we will focus on the selectedItem property of the tree. I am checking to see if that variable is not null because if it is not we can use the path to go out and get the new list of files. If it is null it probably means that we are in the home directory. This is beccause when the application is launched we grab a list of files for the home directory but its not actually selected by the user. private function deleteFiles(event:Event):void { var iList:Array = filelist.selectedIndices; for(var i:uint=0; i<iList.length; ++i){ FileManager.deleteFile(files[i].path); } // refresh the selected directory; if(tree.selectedItem != null){ // if the tree has a selected item refresh that directory FileManager.getFiles(tree.selectedItem.path); } else { // it is most likely the home directory FileManager.getFiles(baseDir); } }

I said earlier that I was excited about the download feature and here is why. What we are going to do is use some logic to determine how many files are selected when the click download. If one file is selected we will just present the user with a file download for that file. If the user selects multiple files I want to auto magically present them with a zip file containing all of the files selected. That is just another nice little feature that I think will help the user experience.

We already created the logic before to only enable the button when 1 or more files are selected. We also defined a click handler for the button to call a method downloadFiles(). Back in our file manager component we are going to create 3 methods. You may be asking yourself, is he mad? I assure you I am not so let's look at why we should do that. First off we need a download for a single file. I talked this over with a friend and while I agree that I rarely use a component to produce output I really just want of of my file operations to be in one place so I am sticking it in here. <cffunction name="downloadFile" access="remote" output="true" returntype="void"> <cfargument name="name" type="string" required="true"/> <cfargument name="path" type="string" required="true"/> <cfheader name="Content-Disposition" value="attachment; filename=#arguments.name#"> <cfcontent type="unknown" file="#arguments.path#"> </cffunction>

Next we need to create to separate download zip methods. One is going to be for anyone using CF7 and one is going to be for CF8 users. This is because 8 introduced cfzip that makes zipping files a breeze. First we will look at the CF7 solution. To make this work you need to head over to RIAForge and download the zipcfc component written by Artur Kordowski. I will include this in svn unless I get asked to remove it but if your playing along at home you will want to drop it in the org/vega/ folder. All your doing here is looping through the list of files and adding them to the zip using the Zip component. <cffunction name="downloadZip8" access="remote" output="true" returntype="void"> <cfargument name="zipPath" type="string" required="true"/> <cfargument name="files" type="string" required="true"/> <cfargument name="zipFileName" type="string" default="download.zip"/> <cfset var f = ""> <cfzip action="zip" file="#arguments.zipPath#"> <cfloop list="#arguments.files#" index="f"> <cfzipparam source="#f#"/> </cfloop> </cfzip> <cfheader name="Content-Disposition" value="attachment; filename=#arguments.zipFileName#"> <cfcontent type="unknown" file="#arguments.zipPath#" deletefile="true"> </cffunction> Using CF8 is a little bit easier so anyone who can I would recommend taking advantage of the little code involved. <cffunction name="downloadZip8" access="remote" output="true" returntype="void"> <cfargument name="zipPath" type="string" required="true"/> <cfargument name="files" type="string" required="true"/> <cfargument name="zipFileName" type="string" default="download.zip"/> <cfset var f = ""> <cfzip action="zip" file="#arguments.zipPath#"> <cfloop list="#arguments.files#" index="f"> <cfzipparam source="#f#"/> </cfloop> </cfzip> <cfheader name="Content-Disposition" value="attachment; filename=#arguments.zipFileName#"> <cfcontent type="unknown" file="#arguments.zipPath#" deletefile="true"> </cffunction>

Finally we need to implement our downloadFiles method. If there is only 1 file selected we will make a call to our download file method else we are going to download a zip. To download the zip we are going to construct a list of full path names. 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 + "\\download.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); } }

Everything is moving along nicely but I thought we would sneak one more feature in here. I want to add a Ctrl+A keyboard shortcut for the application. Anytime that shortcut is activated I want to select all the files in the data grid. First thing to do is add a application complete event listener and this is because we want to make sure the stage is available before we attach a keyboard event listener to it. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:programmatic="themes.Undefined.assets.programmatic.*" preloader="themes.Undefined.assets.programmatic.CustomPreloader" creationComplete="init()" applicationComplete="registerGlobalKeyHandler()"> To get everything to work we attach a key down event listener to the stage. Everytime a key is pressed our on key down method is called. A little logic will allow us to find out if ctrl+a is clicked. If it is we grab a list of all the files in the grid and select them by assigning our array to the selectedIndicies property. private function registerGlobalKeyHandler():void { stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown); } private function onKeyDown(event:KeyboardEvent):void { var char:String = String.fromCharCode(event.charCode); if(event.ctrlKey && char == "a"){ var temp:Array = new Array(); for(var i:uint = 0; i<files.length; ++i){ temp.push(i); } filelist.selectedIndices = temp; } }

I am really rambling on now but I hope your enjoying the series. Please feel free to ask me anything about the project and go over to the project home to grab the latest code from svn.

Real World Flex/ColdFusion: Part 7

I think I should rename this series half way through because we might end up with part 9999! In this part we are going to get a few features out of the way. I want to take a look at the status bar along with updating the data grid based on the selected folder as well as cleaning up our grid.

The first thing we need to do is fix our status bar. We never want the user to know the exact location of where they are (absolute path) but we do from there on out. What we are going to do is replace whatever the root directory with a root label and from there on out we can display what directory they are in. The first thing we are going to do is to setup a root label. This is the text that will display on the folder as well as the text that will replace the absolute path of our base directory. In the init method we are going to call our setStatusText method to initialize the text.

[More]