tsclausing.com

The Flex Project Directory Structure

Structuring your code into manageable chunks is critical your sanity and the success of your project over time. The directory structure that you use will be largely influenced by the structural framework that you choose to employ (such as Cairngorm or PureMVC). I make a basic assumption throughout this series that readers will be using a Model View Controller (MVC) structure.

A Basic MVC Directory Structure


FlexProjectName <- Generated by Flex Builder
- libs
- src
--- com
---- domain <- Replace with domain, ex: tsclausing
----- project <- Replace with project name, ex: blogdemo
------ control
------ model
-------- vo
------ views
- Main.mxml <- Your default application file


This is a great place to begin your applications. We will not be using any structural framework libraries for quite some time in this series while still utilizing this directory structure. Other folders may exist at the same level as src and libs which are generated by Flex Builder when a new project is created. I won't be focusing on those here.

Descriptions for each directory

libs

The libs directory is created by Flex Builder when your new Flex 3 Project is created. This folder will contain all of your code libraries (.swc files) which, by being in this directory, become immediately accessible to your application. If this concept is unfamiliar, we will get back to it in a later post when we introduce structural frameworks.

src

The src directory is created by Flex Builder when your new Flex Project is set up. This folder will contain all of your application code: the source code. The Main.mxml file, which is the default application file, resides in this folder. We will structure the rest of the application's source code in the directories that follow.

control

The control directory contains code which is responsible for interacting with the Model.

model

The model directory will hold your application data. Your application data consists all data providers and state information (like whether a user is authenticated). The information in the model directory will be accessible and bindable anywhere in the application by using the Singleton design pattern - explained in Flex Part 03.

views

The views directory will hold MXML components such as Forms, Panels or other containers. Data bound components in these containers such as a LineChart or DataGrid will bind to the application data in the model directory. Interactive elements such as Buttons will send notifications or events to code in the control directory to update the model, thus updating the view (MVC).

vo

The vo directory will hold code specific to defining custom objects (called Value Objects). These objects represent 'things' and hold inside them the information that makes a 'thing' unique. An example: we could create a BicycleVO which has properties like brand, weight and price. Every bicycle has those three properties, and we should be able to access and modify them like this:

Next ...

Which leads to the next post. Flex Part 02: Value Objects & Model Objects. Getting comfortable with Value Objects and Model Objects is the absolute first step (in my opinion) towards creating a manageable Flex application and will be covered in the next section.

Thank you for reading. Your comments are very much appreciated. Remember that these posts are living documents and will be updated over time as input is received and new ideas emerge. So, please, consider your comment a contribution.