How should I organize my Flex application?

Question

I'm currently a .NET developer, but I'm starting to work with Flex a little bit and I've found the community to be great. There are a lot of great resources out there, but one of the issues I'm running into conceptually is how to organize a flex project. Coming from the standpoint of a "traditional" ASP.NET web application I'd create folders of related pages, controls, CSS, JavaScript, etc.

What's the best pattern for organizing a flex application? I like using the code behind pattern with my MXML files, but these aren't really "pages" per se, so how do you keep from just dumping everything into the root of your src folder?

Answer 1

This is a rough outline, but when I do a FLEX application the structure always looking something like:

  src
   | - components
   |       | - containers
   |       |      | - actionscript
   |       |      | - mxml
   |       | - visual
   |              | - actionscript
   |              | - mxml
   |
   | - pages
   |    | - actionscript
   |    | - mxml
   |  
   | - includes
   |      | - images
   |      | - xml
   |      | - swfs
   |      | - css
   |
   | - www
   |    | - includes
   |    |     | - images
   |    |     | - swfs
   |    |     | - css
   |    |     | - javascript
   |    |
   |    | - index.html
   |
   | - util
   |     | - actionscript
   |
   | - Main.mxml

All Components go into the container or visual directory of the components directory.

The main parts of the application go into the pages directory.

The includes directory is used for all the assets.

The www directory includes all that is needed to put the application on the web.

The util directory holds all the actionscript business logic for the application.

Answer 2

Is is common to use a MVC architecture like Cairngorm and a reverse domain naming structure. So, the the project gets split into Model, View, Controller,..... A Cairngorm example is shown here:

ProjectName
-assets
--images
-lib
-locale
-src
--com
---company
----project
-----model
-----events
-----view
-----controller
-----business
-----delegates
-----views
------components
-----util
-----vo
-Main.mxml
-Style.css

Then if you add thrid party source they become:

com/thirdparty/component

The post here gives further explanation on each folder.

This is the client side of the application and I have typically seen the server side of the application split into its own folder structure.