So you wanna build a Flex application – Part 2- Main Application File

In our series on Surfing Stats, we have covered the intent and the directory structure. (download the code using the download link at the bottom of the Intro to Surfing Stats post) We will now cover the main application file. It is important to note Surfing Stats does not use a framework. Frameworks are powerful code organization tools that contribute to rapid development and maintainability. Since the goal of Surfing Stats is to teach development of a simple application in 4 hours, I made the decision to avoid discussing or implementing any framework. After all, if you do not have the skills to build an application without using a framework, you probably do not have any business using a framework to build an application.

Our application is driven by a main application file titled Main.mxml. Since MXML is really shorthand for working with ActionScript classes the Flex Framework will actually generate an ActionScript class using your MXML file as a template. ActionScript classes should always be given an uppercase name thus we give the MXML file an uppercase name. I like to use Main.mxml to designate the main file in the application. Note the first MXML tag used is the Application tag.

The Main.mxml file serves 3 purposes:

1. Application Configuration
2. Shared Variables/Bindings Initialization
3. Program Flow Control

Let us examine each in turn.

Application Configuration

The Surfing Stats application has a css file configured to provide visual configuration. The CSS file is linked as follows:



Also configured is a base URL that defines the main endpoint for our XML service and a definition of the available datasets (the ChartConfig object).
Lastly, we define a base vertical layout using a VBox, containing a header image, a tab bar and a custom component called Chart Toggle.

Shared Variables/Bindings Initialization

Flex applications maintain state. In Surfing Stats, we maintain the Selected Dataset and the Selected Dataset ArrayCollection. These variables are created in Main.mxml and shared amongst the respective child components.

Program Flow Control

Our program loads XML data representing a specific category then visually represents the data in table, bar chart and pie chart format (if available). When the application is initialized, the Flex framework runs a creationComplete event. In the definition of the Application tag we set the custom function initFunc to execute. The initFunc creates the ChartConfig object then uses the ChartConfig data to configure the tab bar of datasets. Finally, initFunc fires off the HTTPService request for the initial dataset from the server.

When the server response is complete, the xmlDataHandler function executes, parsing and loading the XML string data into an ArrayCollection marked Bindable, then performing a numeric sort.

Lastly, the Main.mxml file contains the function, datasetSelected, responsible for processing the user click on a specific tab.

The Main.mxml file is the highest level component in our Surfing Stats application. By only keeping the highest level configuration, initialization and program flow, we keep our application readable and easily understood.