Real World Flex/ColdFusion: Part 5

FI know this series seems like its going to go forever so please let me know if you want me to start summarizing a little more. I just felt like the more detail the better. In this part of the series we are really going to start diving into the meat of the application. If you remember from the 1st part of this series I had a very clear direction I wanted to take with the directory structure. There can be an infinite number of sub folders so loading them all at once is not the answer for me. Trying to make this a good experience for the end user I want to load the root directories first and then as requested load sub directories.

So first order of business is to setup a ColdFusion component that can handle the directory listings. This part actually took me a little while to get through because I was set on using an all CF solution at first. There is no easy way to get a directory only listing. When you use cfdirectory and give it a path you will get a listing of both files and folders. You could then do a query of queries on that listing and find only the directories which is what I tried in the beginning only to find out that speed was a major issue here. After some testing I realized it was back to the drawing board. After an article I found on Brian Rinaldi's blog I realized that tapping into Java was going to be the best solution for the job.

Go ahead and create a FileManager.cfc component under org/vega/ and use the following code. Lets try and walk through this code. Not only will we use this code when grab the top level but we will use it when we are grabbing sub directories for a folder so it needs to be able to handle both. The path is a required argument and after that the other 2 are not. This way our first call will have to be for the root directories but every subsequent call can just be getDirectories("path"). The rest is pretty simple once you check out the Java.io.File API. The important thing to not here though is the children array. The way the Flex tree works is pretty cool and I found a cool way to "trick" it if you will. If the tree see's a children array (event an empty one) it knows that this is a directory that can be expanded. Therefore any folder that has children will have the plus next to it so you can expand it and anyone without children will just be a folder letting the user know that this folder has no children.

<cfcomponent displayname="FileManager Service" output="false"> <cffunction name="getDirectories" access="remote" output="true" returntype="any"> <cfargument name="path" type="string" required="true"> <cfargument name="isRoot" type="boolean" default="false"> <cfargument name="rootLabel" type="string" default="Home"> <cfscript> var dirs = arrayNew(1); var fileObj = createObject("Java","java.io.File").init(trim(arguments.path)); var pathSeparator = fileObj.pathSeparator; var separator = fileObj.separator; var files = fileObj.listFiles(); var children = arrayNew(1); var hasChildren = false; var i = 0; var x = 0; var temp = structNew(); var root = structNew(); if(arguments.isRoot) { root["name"] = arguments.rootLabel; root["path"] = arguments.path; root["children"] = arrayNew(1); arrayAppend(dirs,root); } for(i=1; i LTE arrayLen(files); i=i+1){ hasChildren = false; if(NOT files[i].isFile()){ // loop this directory to see if it has any children children = files[i].listFiles(); } // trap for null if(not isDefined("children")){ //has children = false } for(x=1; x LTE arrayLen(children); x=x+1){ if(children[x].isDirectory()){ hasChildren = true; break; } } // we do not care about files, only directories if( files[i].isDirectory() ) { temp = structNew(); temp["name"] = files[i].getName(); temp["path"] = files[i].getAbsolutePath(); temp["lastModified"] = files[i].lastModified(); temp["parent"] = files[i].getParent(); // if there are children if( hasChildren) { temp["children"] = arrayNew(1); } // if this is the root we are adding to children if(arguments.isRoot) { arrayAppend(dirs[1].children,temp); } else { arrayAppend(dirs,temp); } } } return dirs; </cfscript> </cffunction> </cfcomponent>

Now that we have that out of the way we are ready to get to work. Here we are doing a couple things, first setting up our remote object so that we can talk to our FileManager component. We have a result and fault event handlers set. Right now the list directories method does not do anything but we will get to it. The fault event handler will simply trace out the error message if something happens. After this is done if your not seeing the directories that is the first place you will want to look to find out the cause of the problem. So our component is going to return an Array and the conversion on the back end works out good for us so our directories variable is an array. It needs to be set to bindable so that our tree can use it. Everything else here should be self explanatorily, if it is not just let me know.

<?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()"> <mx:Style source="themes/Undefined/css/skinPreview.css"/> <mx:Style source="assets/css/stylesheet.css"/> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; [Embed(source="themes/Undefined/assets/botones/folder_close.png")] [Bindable] private var folderClosed:Class; [Bindable] private var _directories:Array; private var _baseDir:String = "C:\\JRun4"; private function init():void { // get the top level directories FileManager.getDirectories(_baseDir,true,"MyHome"); } private function listDirectories(event:ResultEvent):void {</p><p> } private function onFault(event:FaultEvent):void { trace(event.fault.message); } ]]> </mx:Script> <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:RemoteObject> <mx:HBox top="20" left="20" right="20" height="25"> <mx:Label text="RocketFM" styleName="applicationTitle"/> </mx:HBox> <mx:HDividedBox top="50" left="20" right="20" bottom="50"> <mx:Tree id="tree" width="25%" height="100%" dataProvider="{_directories}" labelField="name" showRoot="true" defaultLeafIcon="{folderClosed}" /> <mx:DataGrid width="75%" height="100%"/> </mx:HDividedBox> <mx:HBox left="20" right="20" bottom="20" height="25"> <mx:Label text="Status text" styleName="statusText"/> <mx:Spacer width="100%"/> <mx:Button label="Delete"/> <mx:Button label="Download"/> <mx:Button label="Upload"/> </mx:HBox> </mx:Application>

Finally we need to fill in our list directories method. We know the event.result is going to be an array because our component is returning one so we need to cast it here to ensure the compiler that this is what is coming back. If the directories variable is null then we know we have not loaded any directories yet. As you can see this will come in handy later because we will know the root directories are there so we must be loading children of some directory.

<mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; [Embed(source="themes/Undefined/assets/botones/folder_close.png")] [Bindable] private var folderClosed:Class; [Bindable] private var _directories:Array; private var _baseDir:String = "C:\\JRun4"; private function init():void { // get the top level directories FileManager.getDirectories(_baseDir,true,"MyHome"); } private function listDirectories(event:ResultEvent):void { var dirs:Array = event.result as Array; // if the _directories array is null this is our root request if(_directories == null) { _directories = dirs; tree.openItems = _directories; } } private function onFault(event:FaultEvent):void { trace(event.fault.message); } ]]> </mx:Script>

That's all there is to it, if your following along at home you should have something that looks like this. You will notice that a directory with a plus next to it indicates to the user that it has sub directories. In the next installment we will take a look at how to load the sub directories when they are requested as well as setting up our data grid to load the files of a selected directory.