Flex offers two views for developing applications: Source view and Design view.

Source view is the traditional method of developing in most IDEs and it gives you direct ability to view and edit the code. Most developers use this view, as it offers maximum flexibility and prohibits an additional layer of abstraction from the developer to her code.

Design view is a WYSIWYG development view. It allows you to drag components from the Components panel onto the stage and see them rendered without having to compile the application. After you’ve placed a component on the stage, you can change the properties and styles of each component instance using the Flex Properties panel. We’ll build this section in Design view just to give you a feel for how it works, and then we’ll build the rest of the sections in Code view.

Directly below the tab header for main.mxml, you’ll see two buttons labeled Source and Design. Click the Design button and you should see something similar to Figure 4.

Figure 4. 

The Components panel is on the lower-left side of the screen. It contains a list of all the prebuilt Flex components provided by Flex Builder. The Flex Properties panel is on the righthand side of the screen. This is where you can edit each individual component. Located above the Flex Properties panel is the States panel, which allows you to create different view states for your application without writing a single line of code.

For this lesson, we’ll concern ourselves with only two panels: Components and Flex Properties.

There are three view options in the Flex Properties panel: Standard, Category, and Alphabetical (Figure 5). Standard is the default view for properties. It has the appearance of an easy-to-read form. Category view displays a list of properties organized in their associated category. Alphabetical view is self-explanatory.

Figure 5. 

The Components panel is a library of components at your disposal. It’s accesible only when you’re in Design view. The components are organized by the function they serve. Any custom components you write can also be accessed from this panel in the Custom folder (Figure 6).

Figure 6. 

Flex relies on a number of layout components to organize the objects in an application. While developers are free to write their own layout components, Adobe has provided a well-rounded set of prebuilt components with various options on how to organize the application. The Flex Layout Manager considers the order of components within a layout component and the type of layout component being used when rendering the application. For instance, an HBox is a simple layout component that displays all of its children horizontally, adding subsequent children to the right of previous children. Similarly, the VBox component displays all of its children vertically, with the first child on top. The separation of layout components from other interactive components makes it easy to control and change the layout of your application without touching data processing code.

Our application simulates an RIA used by an automobile distributor to display the number of SUVs, Sedans, and Vans sold for the past few years. We’ll display the data first in an editable spreadsheet and then on a chart. Let’s get started.

If you switch back to Source view, you’ll see the MXML that Flex Builder generated. All of the components are created as open node tags. You’ll also notice that all the component properties are applied as attributes to the nodes.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
       <mx:Panel width="800" layout="absolute" title="Car Sales">
              <mx:DataGrid width="100%" editable="true">
              </mx:DataGrid>
       </mx:Panel>
       <mx:Panel width="100%" height="100%" layout="vertical"
              title="Car Sales by Year">
              <mx:ColumnChart id="myChart">
                     <mx:series>
                            <mx:ColumnSeries displayName="SUV" yField=""/>
                            <mx:ColumnSeries displayName="Sedan" yField=""/>
                            <mx:ColumnSeries displayName="Van" yField=""/>
                     </mx:series>
              </mx:ColumnChart>
              <mx:Legend dataProvider="{myChart}"/>

Now that we have a simple layout, it’s time to add some real data to the ColumnChart and DataGrid. The next section shows you how to bind the chart to an ActionScript data source.

In order for the ColumnChart to render its data properly, we need to make some additions to the chart.

The DataGrid needs some fine tuning to display data in a readable fashion. Since there are four fields in each item of the dataProvider, we need to make sure that the DataGrid has a column for each field.

Your main.mxml file in its entirety should look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       layout="vertical"
       horizontalAlign="center"
       initialize="init()" width="100%" height="100%">
       <mx:Script>
              <![CDATA[
                     import mx.collections.ArrayCollection;

                     [Bindable]
                     private var chartData:ArrayCollection;

                     private function init():void {
                            chartData = new ArrayCollection();
                            chartData.addItem( {year:2003, sedan:53, suv:32,
van: 23});
                            chartData.addItem( {year:2004, sedan:43, suv:32,
van: 43});
                            chartData.addItem( {year:2005, sedan:23, suv:32,
van: 53});
                     }
              ]]>
</mx:Script>

<mx:Panel width="800" title="Car Sales">
       <mx:DataGrid width="100%" dataProvider="{ chartData }" editable="true">
              <mx:columns>
                     <mx:DataGridColumn headerText="Year" dataField="year"
                            editable="false"/>
                     <mx:DataGridColumn headerText="Sedan's" dataField="sedan"/>
                     <mx:DataGridColumn headerText="SUV's" dataField="suv"/>
                     <mx:DataGridColumn headerText="Van's" dataField="van"/>
              </mx:columns>
       </mx:DataGrid>
</mx:Panel>

<mx:Panel width="100%" height="100%" title="Car Sales by Year">
             <mx:Legend dataProvider="{myChart}" color="0×000000"/>

             <mx:ColumnChart width="100%" height="100%" id="myChart"
                    dataProvider="{ chartData }" >
                    <mx:horizontalAxis>
                           <mx:CategoryAxis categoryField="year" title="Year" />
                    </mx:horizontalAxis>
                    <mx:series>
                           <mx:ColumnSeries displayName="Sedan" xField="year"
                                  yField="sedan"/>
                           <mx:ColumnSeries displayName="SUV" xField="year"
                                  yField="suv"/>
                           <mx:ColumnSeries displayName="Van" xField="year"
                                  yField="van"/>
                    </mx:series>
             </mx:ColumnChart>
      </mx:Panel>
</mx:Application>

First, we’ll add a set of pie charts. Let’s say that our car company wants to display the results for each car type in a separate pie chart. Flex does a great job at helping us separate views from data, so this is easily accomplished.

Let’s place the PieCharts on the right of our current chart with each chart in its own separate panel. We’ll begin by adjusting our layout to accommodate our new set of charts. First, wrap the lower panel in an HBox. Set the HBox’s width to 800 to match the width of our DataGrid above and set the height to 500. Then, after the panel, in the HBox, add a VBox. You can do this using either the Display view or by adding the code by hand. It should look like this when completed:

<mx:HBox width="800" height="500">
       <mx:Panel width="100%" height="100%" title="Car Sales by Year">
              <mx:Legend dataProvider="{myChart}" color="0×000000"/>
              <mx:ColumnChart width="100%" height="100%" id="myChart"
                     dataProvider="{ chartData }" >
                     <mx:horizontalAxis>
                            <mx:CategoryAxis categoryField="year" title="Year" />
                     </mx:horizontalAxis>
                     <mx:series>
                            <mx:ColumnSeries displayName="Sedan" xField="year"
yField="sedan"/>
                            <mx:ColumnSeries displayName="SUV" xField="year"
yField="suv"/>
                            <mx:ColumnSeries displayName="Van" xField="year"
yField="van"/>
                     </mx:series>
              </mx:ColumnChart>
       </mx:Panel>
       <mx:VBox width="30%" height="100%">
       </mx:VBox>
</mx:HBox>

Next, let’s add the PieCharts. Start by adding a single PieChart to the VBox. Add a new Panel to the VBox, and set its title to Sedans. Now add a PieChart to the panel. Add a PieSeries to the PieChart with the field set to sedan, like this:

<mx:Panel width="100%" height="100%" title="Sedans">
       <mx:PieChart width="100%" height="100%" dataProvider="{chartData}">
              <mx:series>
                     <mx:PieSeries field="sedan"/>
              </mx:series>
       </mx:PieChart>
</mx:Panel>

Repeat those steps for both SUVs and Vans, adding them after the Sedans. Run the application. It should now look like Figure 12.

Figure 12. 

Already, the application is looking much better, but there are a few improvements to make. You may have noticed our pie charts don’t have any labels specifying the year to which each slice of the pie corresponds. That’s because Flex can’t determine which field in the data to use in setting our label. To set the PieChart labels, we need to make use of a labelFunction. The PieChart has a labelFunction field, and all we need to do is write a function and point this attribute to it.

Back in the Script tag, add the following code:

private function displayYear(data:Object, field:String,
       index:Number, percentValue:Number):String {
              return data.year;
}

You can modify labels in any way, using any data available. All we really need is to return the year field on our data object. For more on using label functions, see Adobe Flex Documentation.

Another problem with our current view is that the colors are misleading. Flex has a set of colors it uses for each series of data by default, and it repeats this in all charts across an application. In our application, this feature is misleading, because the colors used to delineate different car types in our ColumnChart are the same colors used to delineate different years in our PieCharts.

Unfortunately, Flex doesn’t provide an easy way to specify colors for a ColumnChart using style sheets, so we need to change the colors by hand. This isn’t difficult, though. First, we need to change each of our ColumnSeries tags in the ColumnChart to have both an open and an end tag, rather than the single line tag we used previously. Next, nest a fill object inside of the ColumnSeries object, and then add a SolidColor object with the color you desire. I’ve chosen to do Sedans in red, SUVs in blue, and Vans in green. The code for the ColumnChart now looks like this:

<mx:ColumnChart width="100%" height="100%" id="myChart" dataProvider="{ chartData }" >
       <mx:horizontalAxis>
              <mx:CategoryAxis categoryField="year" title="Year" />
       </mx:horizontalAxis>
       <mx:series>
              <mx:ColumnSeries displayName="Sedan" xField="year" yField="sedan">
                     <mx:fill>
                            <mx:SolidColor color="#CC0000" />
                     </mx:fill>
              </mx:ColumnSeries>
              <mx:ColumnSeries displayName="SUV" xField="year" yField="suv">
                     <mx:fill>
                            <mx:SolidColor color="#0000CC" />
                     </mx:fill>
              </mx:ColumnSeries>
              <mx:ColumnSeries displayName="Van" xField="year" yField="van">
                     <mx:fill>
                            <mx:SolidColor color="#00CC00" />
                     </mx:fill>
              </mx:ColumnSeries>
       </mx:series>
</mx:ColumnChart>

Now, let’s add the rest of our style changes.

Flex allows a number of different ways to apply styles. I prefer to reference them in a separate file, because this helps keep separation between our data and our view and it sticks to the best practices for traditional web design.

Let’s start by adding a new CSS file to our project. Right-click the project in Flex Builder, and then select New → CSS file. Name the file whatever you want. Next, we need to reference our CSS file from the Flex application. To do this, add a style tag to the application just under the script block, like this:

<mx:Style source="Sample.css"/>

Back in our style sheet, let’s add some styles to the entire application. You add styles in the same way you would with traditional web applications. A full discussion of style sheets is beyond the scope of this document, but a number of simple guides are readily available on the internet.

We’ll set the text color to black, to ensure that all of the text in the application stays black. We’ll also change the background from the teal green Adobe uses by default to a shade of gray. Flex, by default, applies the background application color style as a gradient, so this makes for a very nice effect:

Application{
       color : #000000;
       backgroundColor: #333333;
}

Next, let’s style our data grid:

DataGrid {
   backgroundColor: #0066ff;
   alternatingItemColors: #cccccc, #e9e8e8;
   verticalGridLineColor: #00ccff;
   rollOverColor: #a7dffc;
   dropShadowEnabled: true;
   headerStyleName: "mydataGridHeaderStyle";
}
.mydataGridHeaderStyle {
   fontWeight: bold;
}

I made these styles using Adobe’s style explorer, which allows developers to graphically pick the styles they’ll use in their application. The styles are exported in CSS by the Style Explorer, which is itself a Flex application. You can find the Style Explorer at http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html.

Finally, let’s add styles to our PieCharts. Unlike ColumCharts, we can specify the colors used by PieCharts in CSS. Since we have Sedans in red in our ColumnChart, I’m going to use three different shades of red in our Sedans PieChart. Similarly, I’m going to use three shades of blue for SUVs, and three shades of green for Vans. The CSS looks like this:

PieSeries{
       labelPosition: outside;
}

.redPie{
       fills:#FF0000, #880000, #330000;
}
.bluePie{
       fills:#0000FF, #000088, #000033;
}
.greenPie{
       fills:#00FF00, #008800, #003300;
}

Finally, back in our application, we need to modify the PieSeries tags to reference our new styles. This is done by setting the styleName attribute for each PieSeries accordingly. Here’s an example of how this looks for the Sedans series:

<mx:PieChart width="100%" height="100%" dataProvider="{chartData}">
       <mx:series>
              <mx:PieSeries styleName="redPie" field="sedan"
labelFunction="displayYear"/>
       </mx:series>
</mx:PieChart>

Repeat this same change for both SUVs and Vans, using the bluePie and greenPie styles respectively, and our styling is complete. The application should now look like Figure 13.

Figure 13. 

With just a few simple style additions, our application looks compelling and interesting.

Let’s make one final update to our application to enhance user experience: a simple transition. Right now, when our data changes, the graph suddenly changes without warning. While most people are probably used to this sort of behavior, they’ll appreciate and enjoy using our application more if we make this change a little more interesting, and Flex makes this easy.

Flex comes with a number of different, built-in transition functions. One of these functions is the SeriesSlide, which slides data in and out of a chart’s boundaries. Let’s declare two SeriesSlide transition objects in our application: a transition in, and a transition out. Add the following tags just below our style declaration:

<mx:SeriesSlide id="slideIn" direction="up" duration="500" />
<mx:SeriesSlide id="slideOut" direction="down" duration="300" />

Now we need to add these transitions to the series objects in our application. Set the showDataEffect attribute on each series to slideln and the hideDataEffect attribute to slideOut. These attributes in the mxml are really events fired by the series object when its data is updated. By setting them to transition objects, Flex implictly creates a set of event listeners and handlers which use the transition object to animate the data moving in and out of our chart. Set the attributes like this:

<mx:ColumnSeries displayName="Sedan" xField="year" yField="sedan"
showDataEffect="slideIn" hideDa-
taEffect="slideOut">

Set these attributes in all of the ColumnSeries and PieSeries objects, and run the application. Make some changes to the data in the data grid, and watch the application respond. Now people will feel like our application responds to them in a way that makes sense and makes using the application more enjoyable, but at the same time our transition isn’t so complicated that it distracts folks from the data.

Finally, here’s how the entire application file should look:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       layout="vertical"
       horizontalAlign="center"
       initialize="init()" width="100%" height="100%">
       <mx:Script>
              <![CDATA[
                     import mx.collections.ArrayCollection;

                     [Bindable]
                     private var chartData:ArrayCollection;

                     private function init():void {
                            chartData = new ArrayCollection();
                            chartData.addItem( {year:2003, sedan:53, suv:32,
van: 23});
                            chartData.addItem( {year:2004, sedan:43, suv:32,
van: 43});
                            chartData.addItem( {year:2005, sedan:23, suv:32,
van: 53});
                     }
                     private function displayYear(data:Object, field:String,
index:Number,
percentValue:Number):String {
             return data.year;
             }
             ]]>
       </mx:Script>

       <mx:Style source="Sample.css"/>

       <!-- Define custom charting effects to run when the chart
dataProvider gets updated. -->
       <mx:SeriesSlide     id="slideIn" direction="up" duration="500" />
       <mx:SeriesSlide     id="slideOut" direction="down" duration="300" />

       <mx:Panel width="800" title="Car Sales">
              <mx:DataGrid width="100%" dataProvider="{ chartData }" editable="true">
                     <mx:columns>
                            <mx:DataGridColumn headerText="Year" dataField="year"
editable="false"/>
                            <mx:DataGridColumn headerText="Sedan's"
dataField="sedan"/>
                            <mx:DataGridColumn headerText="SUV's" dataField="suv"/>
                            <mx:DataGridColumn headerText="Van's" dataField="van"/>
                     </mx:columns>
              </mx:DataGrid>
       </mx:Panel>
       <mx:HBox width="800" height="500">
       <mx:Panel width="100%" height="100%" title="Car Sales by Year">
                    <mx:Legend dataProvider="{myChart}" color="0×000000"/>

                    <mx:ColumnChart width="100%" height="100%" id="myChart"
dataProvider="{ chart-
Data }" >
                            <mx:horizontalAxis>
                                   <mx:CategoryAxis categoryField="year"
title="Year" />
                            </mx:horizontalAxis>
                            <mx:series>
                                   <mx:ColumnSeries displayName="Sedan"
xField="year" yField="sedan"
showDataEffect="slideIn" hideDataEffect="slideOut">
                                        <mx:fill>
                                        <mx:SolidColor color="#CC0000" />
                                   </mx:fill>
                                   </mx:ColumnSeries>
                                   <mx:ColumnSeries displayName="SUV" xField="year"
yField="suv"
showDataEffect="slideIn" hideDataEffect="slideOut">
                                        <mx:fill>
                                        <mx:SolidColor color="#0000CC" />
                                   </mx:fill>
                                   </mx:ColumnSeries>
                                   <mx:ColumnSeries displayName="Van" xField="year"
yField="van"
showDataEffect="slideIn" hideDataEffect="slideOut">
                                        <mx:fill>
                                        <mx:SolidColor color="#00CC00" />
                                   </mx:fill>
                                   </mx:ColumnSeries>
                            </mx:series>
                    </mx:ColumnChart>
             </mx:Panel>
             <mx:VBox width="30%" height="100%">
                    <mx:Panel width="100%" height="100%" title="Sedans">
                            <mx:PieChart width="100%" height="100%"
dataProvider="{chartData}">
                                   <mx:series>
                                          <mx:PieSeries styleName="redPie"
field="sedan" labelFunc-
tion="displayYear" showDataEffect="slideIn" hideDataEffect="slideOut"/>
                                   </mx:series>
                            </mx:PieChart>
                    </mx:Panel>
                    <mx:Panel width="100%" height="100%" title="Suvs">
                            <mx:PieChart width="100%" height="100%"
dataProvider="{chartData}">
                                   <mx:series>
                                          <mx:PieSeries styleName="bluePie"
field="suv" labelFunc-
tion="displayYear" showDataEffect="slideIn" hideDataEffect="slideOut"/>
                                   </mx:series>
                            </mx:PieChart>
                    </mx:Panel>
                    <mx:Panel width="100%" height="100%" title="Vans">
                            <mx:PieChart width="100%" height="100%"
dataProvider="{chartData}">
                                   <mx:series>
                                          <mx:PieSeries styleName="greenPie"
field="van" labelFunc-
tion="displayYear" showDataEffect="slideIn" hideDataEffect="slideOut"/>
                                   </mx:series>
                            </mx:PieChart>
                    </mx:Panel>
             </mx:VBox>
             </mx:HBox>

</mx:Application>

And that’s it. In just 93 lines of code and a few styles, we’ve built an entire application that’s easy to use and conveys our data in a way that’s easily understood.