Real World Flex/ColdFusion: Part 2

In the 1st part of this series we took a look a defining the project and listing out some basic requirements. In this part we can to dive in and setup our project. We won't actually get into any code until the 3rd part but this is an important step. I will be using Flex builder for this project but you certainty don't have to. Your setup will be different from mine but once we get into to coding it should be the same.

After firing up Flex builder 3 we need to create our project. Select file > New > Flex Project. All of the screen shots below can be clicked on if you want view a larger one. As I said in part 1 we are going to create a fictional project named RocketFM.

• The next step is give the project a location. This project is going to use ColdFusion so I drop my projects in my ColdFusion web root.
• The type of application is going to be a web project.
• The server type will be ColdFusion and because we are using Remote Object make sure the checkbox is checked and LiveCycle DS is selected.

The next part of application wizard is for setting up the details of our ColdFusion Server. In my setup I have CF deployed to J2EE server so that's what I have selected.

• The web root is the root folder for our application which I have named RocketFm
• The root URL is the URL that you would enter to get to the application. In my case I have CF running on port 80 so I have http://localhost/rocketfm
• The context root will match the end of the root url
• In my case the war file is not located in the same folder as the web root so you need to find the location of this. If your setup is like mine and JRun is installed on the C drive the location should be C:\JRun4\servers\cfusion\cfusion-ear\cfusion-war
• Finally you need a debug folder location and you default is bin-debug

Finally you should setup the output folder URL. In my case it is my web root plus the debug folder. This is because when you compile an application it will move all of the necessary files over to your debug folder.

Finally we need to setup the folder structure for our application. This is not set in stone but for now this should give us a good base for our application.

• assets - holds our style sheets and any images needed
• com/adobe - I use some of the core as which will talk about later but for now just go ahead and create the folders. A little tip for you eclipse users as well. If you right click on the src folder and select new > folder you can enter a folder name. If you enter more then one name with a slash you can create more than 1 folder at a time. Enter com/adobe and your folder structure will be created.
• data is going to be our root data folder. I think once you move to a live solution this would probably be another folder but for this example it will work out fine.
• events will hold our custom events
• org/vega will hold a few ColdFusion components
• temp will be storage directory for temp files. Specifically we will be creating zip files on the fly for download and we need a temp directory to save the to, once the file is downloaded we will delete it.
• themes - I want to be able to have a couple different themes that I can switch between. I created a separate directory for this because some of themes out there that you download have a ton of files and I don't want to mix them up with my project assets.
• views -this folder will hold different views the application will use. We will have different components for adding, removing & deleting directories. We will also have our uploader component here.

That is is for this step, as I said at the beginning of this article we will start diving into some code in part 3. The first thing we need to do is setup the basic layout of our application. While this sounds pretty simple there are some things you want to consider in this step so it should be a good one.

*** Update: I totally forgot that in the setup that I have going you do not need a context root. I know that Flex Builder will give you an warning that the context root should match the last part of your URL but don't worry about it. Simply enter a / as the context root.