Building your first dashboard application using Flash Builder 4
Created
22 March 2010
Requirements
Prerequisite knowledge
Previous experience with Flex Builder is helpful but not necessary. Familiarity with PHP is required.
User level
Intermediate
Required products
- Flash Builder (Download trial)
Sample files
- sample_dashboard.zip (2718 KB)
Using charting components, developers can transform data into expressive information. Interactive dashboards are used in the business intelligence industry, on Back-Office administration tools or web analytic tools to help improve the decision making. The Flex framework lets you rapidly develop interactive dashboards. In this tutorial, you'll learn how to get data from a MySQL database, using the new Data/Services tools of Flash Builder, and how to bind the results to interactive charting components.
Use Flash Builder to enable communication with PHP services
To follow along, be sure to download the sample files that accompany this tutorial, launch your PHP server, and install the MySQL database file included in the download archive. The MySQL databases includes two tables: companySales and companyTotal (use web tools such as phpMydmin to execute the SQL queries). You also need to copy the CompanySalesService.php service that uses the Zend AMF gateway. The files are also included in the download archive that accompanies this tutorial.
Create a new Flex project
First, open Flash Builder and create a new Flex project (New > Flex Project). You need to specify that you will communicate with a PHP application server. On the second screen of the New Flex Project wizard, you must indicate the Web root path on your disk to the PHP projects, the root URL of the PHP server and then validate the configuration. On my end, I use MAMP. My Web root is /Applications/MAMP/bin/mamp, and my Root URL is http://localhost:8888/MAMP. Flash Builder will build and deploy your project directly on the PHP server. After the configuration is validated, click the Finish button. You now have a blank Flex 4 application.
Connect to the PHP service
You need to enable the communication with our PHP service.
- Open the Data/Services tab at the bottom of the Flash Builder UI, and click the link Connect to a Data/Service….
- Select the PHP gateway. You can also use the Data menu, and choose Connect to a PHP service.
- Browse your hard disk to select the CompanySalesService.php file. Flash Builder indicates that it will generate automatically ActionScript 3 code. It will actually generate ActionScript 3 proxy files, and declare a CompanySalesService for your Flex code.
- Click the Next button to discover that Flash Builder can introspect the PHP code, and guess that two methods are declared,
getAllCompanySalesandgetAllCompanyTotals. - Click the Finish button and note that these two PHP methods now appear in the Data/services tab.
You can enjoy the new Test Operation tab and see what is returned by the PHP service. The results are serialized as ActionScript 3 objects, and the Zend PHP framework leverages the benefits of the AMF format to optimize the exchange of objects between the Flash and PHP worlds. Note also the new package in your Flex project, services.companysalesservice, which contains some ActionScript code to invoke the PHP methods and manipulate the results.
The plan
Flash Builder has generated ActionScript 3 code to remotely communicate with getAllCompanyTotals() and getAllCompanySales(region) on the PHP server. Here is the behavior of our first interactive dashboard. After the application is created, Flex will dispatch a creationComplete event. You catch this event and call the getAllCompanyTotales() PHP methods and store the result in an ArrayCollection to express the total sales revenue per region in an interactive pie chart. Then, if the user clicks a pie chart item, it will pass the selected region as a parameter for getAllCompanySales(). You'll retrieve the detailed sales per year for this region and express it in a column chart (see Figure 1).
Data-binding on the pie chart
- Store the result in an ArrayCollection and bind it to a DataGrid control. First, declare an ArrayCollection. Don't forget to add the
Bindablemetadata tag:
[Bindable]
private var myTotals:ArrayCollection = new ArrayCollection;
- Then, below the
<fx:Declarations>tag, declare the PHP service and acallResponderfor the first method.
<companysalesservice:CompanySalesService id="companyService"/>
<s:CallResponder id="responderTotals"
result="responderTotals_resultHandler(event)"/>
Flash Builder is now able to generate event handlers in ActionScript 3. While declaring the result event, Flash Builder should generate a Script tag and add this function:
protected function responderTotals_resultHandler(event:ResultEvent):void
{
// TODO Auto-generated method stub
myTotals = event.result as ArrayCollection;
}
- Complete the source code to bind the result to your ArrayCollection. You need to invoke the PHP methods once the application is created. Declare a handler on the
creationCompleteevent, in the mainApplicationtag. It should generate the ActionScript 3 code, and you can then invoke the service, linking the call to the correct responder.
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
responderTotals.token = companyService.getAllCompanyTotals();
}
- To display the data that will be stored in your ArrayCollection after the call, just add an
DataGridMXML tag, and bind the data provider to your collection.
<mx:DataGrid dataProvider="{myTotals}" />
- Run the application to see you verify that the Datagrid displays the correct data coming from PHP.
Add a pie chart and bind the data
Now that you get some data, express it in a charting component. Remove the DataGrid tag, and in the Design view of Flash Builder, drag and drop a pie chart component. You need to update the dataProvider property of the PieChart tag, and indicate that you want to display the "totals" field of the database on your pie. Set the showDataTips property to true to display details when you roll over the pie. You should get the following:
<mx:PieChart x="10" y="0" id="piechart1" dataProvider="{myTotals}" showDataTips="true">
<mx:series>
<mx:PieSeries displayName="Series 1" nameField="region" field="totals"/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{piechart1}" x="10" y="425"/>
Below is the complete source code at this stage of the tutorial:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="application1_creationCompleteHandler(event)"
minWidth="955" minHeight="600" xmlns:companysalesservice="services.companysalesservice.*">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
private var myTotals:ArrayCollection = new ArrayCollection;
protected function responderTotals_resultHandler(event:ResultEvent): void
{
// TODO Auto-generated method stub
myTotals = event.result as ArrayCollection;
}
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
responderTotals.token = companyService.getAllCompanyTotals();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<companysalesservice:CompanySalesService id="companyService"/>
<s:CallResponder id="responderTotals" result="responderTotals_resultHandler(event)"/>
</fx:Declarations>
<mx:PieChart x="10" y="0" id="piechart1" dataProvider="{myTotals}" showDataTips="true">
<mx:series>
<mx:PieSeries displayName="Series 1" nameField="region" field="totals"/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{piechart1}" x="10" y="425"/>
</s:Application>
Add a column chart to display the details per region
Get data from the second PHP method, getAllCompanySales. This method needs a parameter, a string that represents the name of the region. Again, use the same methodology to declare another CallResponder tag for this new method, and drag and drop a charting component on the stage. Declare a new ArrayCollection:
[Bindable]
private var mySales:ArrayCollection = new ArrayCollection;
My advice is to use the itemClick event on the pie chart, so that you can retrieve the "region" property that the user selects. Add a itemClick handler on the PieChart tag, look at the code generated by Flash Builder, and then enhance it to invoke PHP.
protected function piechart1_itemClickHandler(event:ChartItemEvent):void
{
// TODO Auto-generated method stub
respondaerSales.token = companyService.getAllCompanySales(event.hitData.item.region);
var myArr:Array = [];
myArr[event.hitData.chartItem.index] = 0.2;
series.perWedgeExplodeRadius = myArr;
}
This will get the "region" selected by the user on the pie, then invoke the getAllCompanySales() method, and also explode the selected pie chart item. Now, bind the result to a fresh new column chart:
<mx:ColumnChart x="418" y="10" id="columnchart1" dataProvider="{mySales}">
<mx:series>
<mx:ColumnSeries displayName="Series 1" yField="sales" xField="year" showDataEffect="{interpolate}"/>
</mx:series>
</mx:ColumnChart>
The final touch
As shown in the snippet below, you can declare a SeriesInterpolate transition to express the changes between two states of your dashboard. Fix the duration of your transition, and bind it the data showDataEffect property of your series.
<mx:SeriesInterpolate id="interpolate" duration="500"/>
Where to go from here
Now that you have developed your first interactive dashboard, consider the CSS styling of your charting components and the transitions between the states.
This tutorial provides but a snapshot of what you can do with charting components. Several companies such as IBM ILOG or KapIT also publish advanced data visualization components for Flex.
