So you wanna build a Flex application – Part 4 – The Layout

To date, in our series on Surfing Stats, we have covered the intent, directory structure, data sets and the main application file.
(download the code using the download link at the bottom of the the Intro to Surfing Stats post). Now we will look more in depth at our main application file and examine the layout.

Layout Containers

Looking at the structure of the application inside Main.mxml we see the following layout configuration:

Even if you don’t know Flex very well, you can see the main layout is wrapped with a VerticalBox, aligned center.
The contents are a Header image (embedded for performance), a TabBar (with a special function for clicked items) and a custom component called ChartToggle (takes some dimensions, the selectedDataset and the selectedDatasetAC).

Tab Bar Configuration

The TabBar has a dataProvider containing the information necessary to create tabs. Following the application logic, the initFunc() executes when the creation of Main.mxml is complete. Our initFunc() sets up the TabBar. Here is the relevant code:


public function initFunc():void{
//datasetAC holds configured datasets
datasetAC = new ChartConfig(baseURL);
//Configure tabBar
tabBar.dataProvider = datasetAC;
tabBar.labelField ="title";
tabBar.selectedIndex = 0;
...
}


Reading the code above, we see the datasetAC comes by making a new ChartConfig component. We then assign datasetAC as the dataProvider the TabBar, tell TabBar to read the label property of data, the select the first tab. Now we have a visible, data driven TabBar.

ChartToggle Configuration

Lastly, we have ChartToggle. In Surfing Stats, ChartToggle represents the main content pane. This pane has two jobs.

1. Show the menu for selecting the data view.
2. Create and manage the specified view.

The dimensions assigned here, width=”700″ height=”450″ are used later on to drive the layout dimensions of other components.

The two data members, selectedDataset=”{selectedDataset}” selectedDatasetAC=”{selectedDatasetAC}” are managed objects containing data. See the surrounding {}? This refers to a binding expression. Note the [Bindable] declaration used for the creation of each data member.

[Bindable] public var selectedDataset:Dataset = new Dataset("","");
[Bindable] public var selectedDatasetAC:ArrayCollection = new ArrayCollection();

Binding in the Flex framework is very powerful and often misunderstood. For now, understand that bindable objects are set up so that any changes made to that object are reflected in references to that object. After all, if we create the selectedDatasetAC to hold the data for the selected tab, we want the data to change when a different tab is chosen.

At this point you should have a rich understanding of Main.mxml. In our next series, we will discuss ChartToggle.

The code has been updated. Get it by clicking the download link at the bottom of
the Intro to Surfing Stats post