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

Posted By : Dan Wilson January 14, 2008 8:52 AM

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:

view plain print about

1<mx:VBox horizontalAlign="center" >
2    <mx:Image source="@Embed('images/Header.png')" />
3    <mx:TabBar id="tabBar" itemClick="datasetSelected(event)" />
4    <c:ChartToggle width="700" height="450" selectedDataset="{selectedDataset}" selectedDatasetAC="{selectedDatasetAC}" />
5</mx:VBox>

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:

view plain print about

1public function initFunc():void{
2    //datasetAC holds configured datasets
3    datasetAC = new ChartConfig(baseURL);
4    //Configure tabBar
5    tabBar.dataProvider = datasetAC;
6    tabBar.labelField ="title";
7    tabBar.selectedIndex = 0;
8    ...
9}

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.

Show the menu for selecting the data view.
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.

view plain print about

1[Bindable] public var selectedDataset:Dataset = new Dataset("","");
2[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

9223 Views