Build A Web 2.0 Voting Widget With Flex: Part I

After you hit Finish to build the project, you should see the result pictured below.

Flex Builder 3 automatically creates an MXML application with the same name as the project. In this case, the “voteview” project has one source file, voteviewer.mxml.

At this point, you’re probably thinking, “I thought we were doing Flex, so what’s this MXML?” MXML is one of the two major technologies in a Flex application; it’s a tag-based language used to build user interfaces. The other is ActionScript 3, which is the programming language that we use to add interactivity to the interface.

To make sure that everything’s working okay, we’ll add just a single tag to the MXML file, as shown here:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Label text="Hello World" fontSize="20" />
</mx:Application>

The <mx:Label> tag specifies that we want a control of type Label with the text of Hello World where the font size is 20px. This figure shows the result of launching it in Flex Builder.

If that works, you know that everything is installed correctly and you’re all set to start developing in Flex.

The next step is to put an XML file on a web server that will contain the current vote totals. This is the data that the Flex application will fetch and display.

You can format your XML any way you choose, but something along these lines is simple enough:

<votes>  
 <topic>What is the best Star Wars movie?</topic>  
 <options>  
   <option count="150" name="Episode IV" />  
   <option count="250" name="Episode V" />  
   <option count="50" name="Episode III" />  
 </options>  
</votes>

This XML defines that there is one question with three options, where each option has a name and a count of votes.

Once this XML file is up on your server somewhere (in my case, the localhost Apache server on my Mac), we can add some more tags to the MXML and get this party started!

Here’s a simple Flex application that reads the data from the XML file and then displays the question in a Label control, and the current votes in a DataGrid control:

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  
 creationComplete="votes.send()">  
 <mx:HTTPService id="votes" resultFormat="object" url="http://localhost/votes.xml" />  
 <mx:Label fontSize="20" text="{votes.lastResult.votes.topic}" />  
 <mx:DataGrid width="100%" dataProvider="{votes.lastResult.votes.options.option}">  
   <mx:columns>  
     <mx:DataGridColumn dataField="name" headerText="Movie" />  
     <mx:DataGridColumn dataField="count" headerText="Vote Count" />  
   </mx:columns>  
 </mx:DataGrid>  
</mx:Application>

There are two key elements involved in the code above. The first is the mx:HTTPService tag that defines where we will retrieve the data, and specifies an id for the data source. This service is invoked by the code attached to the creationComplete event on the Application tag.

The data display is handled automatically by Flex through the magic of the Flex event model. When the HTTService has successfully downloaded the XML, the lastResult variable on the service notifies the Label and the DataGrid that it has changed. Those controls then update themselves automatically to show the new values returned by the server.

Here’s the result of launching this in Flex Builder.

Well, it works okay, but it’s not very sexy in appearance, is it? I’m all about the sexy look, so I’m going to use Flex’s built-in charting service to display the votes in a pie chart instead of a DataGrid.

This updated code is shown below:

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  
 creationComplete="votes.send()">  
 <mx:HTTPService id="votes" resultFormat="object" url="http://localhost/votes.xml" />  
 <mx:Label fontSize="20" text="{votes.lastResult.votes.topic}" />  
 <mx:PieChart width="100%" height="100%"  
   showAllDataTips="true"  
   dataProvider="{votes.lastResult.votes.options.option}">  
   <mx:series>  
     <mx:PieSeries field="count" labelField="name" nameField="name" explodeRadius="0.1" />  
   </mx:series>  
 </mx:PieChart>  
</mx:Application>

The only change here is that we replaced the DataGrid with a PieChart control. When we run this in Flex Builder, we’ll see the window shown here.

Now, that’s certainly better. A picture is worth a thousand words, as they say. But could it be even cooler? As it turns out, it can; the Elixir data visualization components available from ILOG offers a set of amazing charting controls that you can use on a trial basis.