I have been away from Flash Builder and Flex for a little while now so I am catching up on some new features. I have 2 upcoming mobile projects to work on so this is a really great chance for me to get caught up with what has been going on. I have to say the improvements made to Flash Builder and the Flex framework are just flat out amazing. It truly is an enjoyable platform to develop applications on and I hope I have a lot more projects to work on in the future.

This is just a quick tip and most of you probable already know this but I thought I would share it anyways. Code templates speed-up your coding efforts by letting you auto-insert frequently used coding patterns. You can think of them like snippets but to me they are so much better. There are code templates for ActionScript, CSS, MXML and Flash Builder. To use a code snippet simply type the name of the snippet and hit cntrl+space. Templates can use template variables and to me this is what sets them apart from snippets. A template variable is defined within ${}. The variable is resolved based on the corresponding variable definition in the editor. In the case of the for each loop you can tab from index to array to cursor and your inside the loop. Until you really play with this you can't truly appreciate how great it is.

As I stated earlier you can also setup code templates for Flash Builder. This really comes into play when flash builder generates some boiler plate code. I love the fact that you can generate event handlers and to me this is a great time saver. Below is an example of a generated handler in a sample application I wrote yesterday. <fx:Script> <![CDATA[ import mx.events.FlexEvent; protected function browseCanceled(event:Event):void { // TODO Auto-generated method stub } ]]> </fx:Script> Now this is great but something really bothers me with it. I really have OCD when it comes to my code formatting. If code is not formatted a certain way I feel the need to fix it to my liking. I know its pretty odd but I am know I am not alone. I would always generate the handler and then bring that first curly brace up to the line of the method name so it looked like this. <fx:Script> <![CDATA[ import mx.events.FlexEvent; protected function browseCanceled(event:Event):void { // TODO Auto-generated method stub } ]]> </fx:Script> Not a big deal but again I was wasting time on something until I realized yesterday that I could format the generated event handler. Windows > Preferences > Flash Builder > Editors > Code Templates > Flash Builder

You will see a template for event handler. From here you can simply move the curly brace up a line and any generated event handler will now follow your preferences. I ended up making a lot of changes to code templates and added a couple of my own. I would not want to do this on every install of Flash Builder. Luckily they have given you a way to export and import code templates. Just another big kudos to the Flash Platform team. These products have come a long way.

This entry was posted on June 13, 2011 at 11:14 AM and has received 1907 views. Comments 0 | Print this entry.

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

Continue Reading >>

This entry was posted on August 4, 2009 at 9:46 AM and has received 3161 views. Comments 7 | Print this entry.

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

Continue Reading >>

This entry was posted on April 22, 2009 at 10:21 AM and has received 6709 views. Comments 0 | Print this entry.

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

Continue Reading >>

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

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>

Continue Reading >>

This entry was posted on January 11, 2009 at 10:11 PM and has received 4441 views. Comments 8 | Print this entry.