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. private var baseDir:String = "C:\\JRun4"; private var rootLabel:String = "MyHome"; private function init():void { // get the top level directories FileManager.getDirectories(baseDir,true,rootLabel); // set the status text setStatusText(baseDir); } The next step is to head over to Google Code and grab the corelib. In that library you will find a great class called StringUtil which has a static function named replace. For those of you not familiar with a static method its a method that can be called without instantiating the class first. We are simply replacing baseDir in the location with our root label text. private function setStatusText(loc:String):void { var displayPath:String = StringUtil.replace(loc,baseDir,rootLabel); txtStatus.text = "Current Location: " + displayPath; }

Next we want a way to update the data grid when a folder is selected. This turns out is pretty easy to do. First we want to update our remote object. We want to add a new method called getFiles. <mx:RemoteObject id="FileManager" destination="ColdFusion" source="rocketfm.src.org.vega.FileManager" showBusyCursor="true"> <mx:method name="getDirectories" result="listDirectories(event)" fault="onFault(event)"/> <mx:method name="getFiles" result="listFiles(event)" fault="onFault(event)"/> </mx:RemoteObject> As you might expect we need to update our FileManager component and add the method that will perform the magic. The get files method is pretty close to our get directories only were getting files. Again I am tapping into Java because it makes it easier when you only need to grab a directory or file listing of a path. We are setting a bunch of properties of the file so that we can present this information to the user. <cffunction name="getFiles" access="remote" output="false" returntype="any"> <cfargument name="path" type="string" required="true"/> <cfscript> var directoryList = arrayNew(1); var fileObj = createObject("Java","java.io.File").init(trim(arguments.path)); var files = fileObj.listFiles(); var pathSeparator = fileObj.pathSeparator; var separator = fileObj.separator; var i = 0; var temp = structNew(); for(i=1; i LTE arrayLen(files); i=i+1){ if( files[i].isFile() ) { temp = structNew(); temp["name"] = files[i].getName(); temp["path"] = files[i].getAbsolutePath(); theDate = createObject("java","java.util.Date"); theDate.init(files[i].lastModified()); temp["lastModified"] = DateFormat(ListGetAt(theDate.toGMTString(),1," ")&"-"&ListGetAt(theDate.toGMTString(),2," ")&"-"&ListGetAt(theDate.toGMTString(),3," "),"ddd")&", "&theDate.toGMTString(); temp["parent"] = files[i].getParent(); temp["isHidden"] = files[i].isHidden(); temp["size"] = files[i].length(); temp["type"] = listLast(files[i].getName(),"."); arrayAppend(directoryList,temp); } } return directoryList; </cfscript> </cffunction>

Finally we will create a new variable files and set it as the data grids data provider. In the init method we will add a call to get files for our base directory. Finally to react to a user clicking on a folder we will add a change event handler to our tree that calls the onItemChange event. [Bindable] private var files:Array = new Array(); 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); } private function listFiles(event:ResultEvent):void { files = event.result as Array; } private function onItemChange(event:Event):void { var currentPath:String = event.currentTarget.selectedItem.path; FileManager.getFiles(currentPath); setStatusText(currentPath); }

While this looks we have accomplished our goals there is still one thing to do. You will notice that the grid is displaying everything about our file in no real order. This is because if you don't set your columns of the data grid Flex will display everything with no formatting for you.

Updating our grid is a pretty easy task. We can define all of our columns as well as provide label functions. A label function is a way to take the data from a column, format it and display the formatted text for the user. <mx:DataGrid id="filelist" 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:DataGridColumn headerText="Last Modified" dataField="lastModified"/> <mx:DataGridColumn headerText="Hidden" dataField="isHidden"/> </mx:columns> </mx:DataGrid> In our case it would be a good idea to display a more meaningful file size to the user. private function bytesToKilobytes(data:Object,blank:Object):String { return String(Math.round(data.size/1024)) + " kb"; }

As you can our little changes made a big difference for the user. I think we are really starting to see some progress with this application. I think I might start changing the titles though. Something like RocketFM adding a context menu to our tree. I just hate to keep naming thme part something because its getting old.