In our initial article, we introduced Surfing Stats, a Flex application providing a multi-view interface for examining Blog CFC statistics. (download the code using the download link at the bottom of the Intro to Surfing Stats post) As in all programming, code organization is important. For the Surfing Stats application, all source code is located in a src directory located off the project root. Our source files are a mixture of visual assets, css style sheets, MXML files and ActionScript files. In addition to type we also distinguish between purpose. This is the directory structure:
- Project Root
- components
- css
- data
- images
- vo
Let us examine each directory in turn.
components:
The components directory contains all of our custom mxml components. We use custom components to extend the default Flex framework components, adding behaviours and logic to fit the business need.
css:
CSS files are used to control the appearance of components. The purpose and usage of CSS in Flex is generally similar to CSS in HTML though many differences exist in available selectors and rules. For a quick hands on intro to CSS in Flex, check out the excellent Flex 2 Style Explorer.
data:
The data directory contains data specific classes. In the final version of the Surfing Stats application the directory contains a custom ActionScript class used to configure the available datasets in the application. During development, I kept XML files containing sample data so I could work offline.
images:
The images directory contains visual assets used in our application. For simple applications, I use an images directory configuration. For more complex applications or applications that contain many kinds of visual assets, I use an assets folder.
vo:
The vo directory contains ActionScript classes belonging to a special pattern called a Value Object. A Value Object is used in passing a typed collection of data.
For an application of this size and complexity, the directory structure outlined above provides clean code organization and simplicity. More importantly, the structure allows us to build this application in layers that make sense, without distracting from the goal of building this application in 4 hours. Now that we have an understanding of the directory structure, we can move on to examining the code and functionality.