Real World Flex/ColdFusion: Part 1

Today I am going to start a new series that I think anyone interested in Flex is really going to enjoy. I was assigned a task of building a new application at work about a month ago. Now that I have successfully deployed the application into testing I thought I would walk through the many things I learned from this project.

In part 1 we will take a look at the start of an application. What are the requirements, features and what are my recommendations as a developer. I also want to go through a little bit of the thought of why I have chosen Flex/CF for this project. After we take a look at what it is we need to build we will go through building our own version of this application. I have been doing Flex development here and there for a little while but his application really helped my growth and I hope it will do the same for you.

The application we are going to build is a document management system. The client needed a folder on a server that could act as a central repository for all kinds of documents. To start off with its just going to be PDF/Excel/Word etc.. but in reality we can allow for any type of document. Now that we know what we are building lets take a look at some features.

• The ability to add / edit / remove folders & files. There will be one Root folder that will not be able to be edited, but from there the possibilities are endless.
• Clicking on a folder will display the documents in a data grid to the right.
• Speed is important and since the folder structure can be infinite we probably don't want to load thousands of folders at once. We will load just the documents that fall under our root and from there load the folders/files on a request basis.
• The ability to move/copy files from one directory to another
• Downloading files: If the user selects a single file will will allow them to download that single file. If more than 1 file is requested we will zip all of the files up and present the user with a zip download.
• Uploader: The ability to easily upload multiple documents of any size and provide feedback to the user.
• Themes - There are some really great themes out there for Flex now. The last thing we want to do is have an application that looks like everyone else!
• *** Extra feature - down the line I think I would like to provide a way to flip from a datagrid to a thumbnail preview. This would become very handy if the user was storing images.

After I take a look at some basic requirements / features the wheels in my head start turning. To me this was a pretty easy decision to go with Flex/CF for this application. From the very nature of what Flex is, a rich Internet application. We want to provide the user with a slick / easy to user interface. While we could probably do this with Ajax I just don't think it would handle as well as Flex will. The drag and drop abilities alone were enough for me. On top of that we wanted to allow users to upload [x] number of documents at once. This to me is a great problem for Flex to solve. Not only can we allow multiple uploads but we can provide the user feedback as well.

The application that we are going to build together is going to be called RocketFM. The Rocket file manager is a demo application that will hopefully provide us all with a real world application example and the lessons learned from building it. Here is a quick mockup with some notes.

1. The file system like folder structure. As we talked about before this is only going to load sub directories of the root folder and from there on it it will be on a request basis.
2. The data grid will display the files of the selected folder. On entry of the application this will be the root directory.
3. The status bar will tell us what folder we are in. Notice we are not showing the full path of the directory. Here we are replacing the Root directory with the label Home.
4. The button placement is probably not a great design idea but this can change later. I thought about a toolbar up top but for these specific actions it just didn't look right.
5. As we talked about before the download feature will be a smart download action. If the user selects one file they can just download a file. If they select more than 1 file it add all of the files to a zip file and present that for download.
6. The upload button will open a new title window with our mutliuploader component.
7. This is just kind of threw in at the last minute as something "extra". It may not even make our final application. I actually do this a lot during the planning phase. I think of required features and other little extra features that might add an extra touch. During the actual implementation process I will decide if a feature should make the build or not.

This application will by no means be model of how things should be done. Right now the final product works but I know there are better ways to do things and refactoring this application will come at some point. My intention is lend some knowledge (and I learned a lot from this) but at the same time learn from everyone out there. Please share your thoughts and any suggestion you have I will always listen to. With that said I will get to work on part 2 which should be coming very soon!