Build A Web 2.0 Voting Widget With Flex: Part II

The final change I’ll make is to display the pie chart of the results of the poll instead of just the alert box. This final version of the code is shown here:

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application ...>  
<mx:Script>  
<![CDATA[  
import mx.controls.Button;  
 
private var topicID:int = 0;  
private var voted:Boolean = false;  
 
private function onGetTopics() : void {  
// ...  
}  
private function onGetOptions() : void {  
 if ( voted )  
   resultPie.dataProvider = voteRO.getOptions.lastResult;  
 else {  
   for each( var opt:Object in voteRO.getOptions.lastResult ) {  
     var optBut:Button = new Button();  
     optBut.label = opt.text;  
     optBut.data = opt.id;  
     optBut.percentWidth = 100;  
     optBut.addEventListener( MouseEvent.CLICK, onOptionButtonClick );  
     optionsBox.addChild( optBut );  
   }  
 }  
}  
private function onOptionButtonClick( event:Event ) : void {  
 voted = true;  
 voteRO.addVote.send( event.currentTarget.data );  
}  
private function onVoteResult() : void {  
 contentStack.selectedChild = pieBox;  
 voteRO.getOptions.send( topicID );  
}  
]]>  
</mx:Script>  
<mx:RemoteObject ...>  
...  
</mx:RemoteObject>  
 
<mx:Label fontSize="20" id="topicText" />  
 
<mx:ViewStack id="contentStack" creationPolicy="all" width="100%" height="100%">  
 <mx:VBox width="100%" height="100%" id="optionsBox">  
 </mx:VBox>  
 <mx:VBox width="100%" height="100%" id="pieBox">  
 <mx:PieChart width="100%" height="100%" id="resultPie" showAllDataTips="true">  
   <mx:series>  
     <mx:PieSeries field="votes" nameField="text" explodeRadius="0.1" />  
   </mx:series>  
 </mx:PieChart>  
 </mx:VBox>  
</mx:ViewStack>  
 
</mx:Application>

The big change here comes at the end of the file where I’ve added a <mx:ViewStack> object that contains two <mx:VBox> containers. A ViewStack is a lot like a deck of cards. You can pick one card to be visible on top, while all the rest remain hidden below. In this case the first VBox, the optionsBox, will hold the buttons for the options. The second VBox, the pieBox, will hold the PieChart. The PieChart is exactly like the one from the first article.

The onGetOptions method in the ActionScript has also changed. It now checks to see if we have voted or not. If we have voted, the code sets the dataProvider on the PieChart to the updated response from getOptions. If we have not voted, it adds the buttons to the optionsBox using addChild.

The onVoteResult method, where we used to put up the alert box, now simply flips the ViewStack card over to the pieBox to present the pie chart. The pie chart updates once the onGetOptions method is fired again.

When we bring this up in the browser, and proceed to vote, we can see the resulting pie chart.

Not bad! We now have a widget that talks to a web service, picks a question at random, presents the question, then displays the voting results using a nifty pie chart if the user chooses to vote.

The only problem is that the Flash application itself is fairly heavy. In fact, on my machine at the time of this writing the SWF files are about 350–400K. That’s a little too heavy for a lightweight widget. What to do?

Moving to Runtime Shared Libraries

Thankfully, Adobe has a fix for the fat SWF problem—and it doesn’t even require any coding changes. All you have to do is tweak your project a little. The trick is to use Runtime Shared Libraries.

The idea is simple. When you compile your SWF file instead of including the library in the SWF itself, you tell the Flash player to go fetch the library at a specific URL. The Flash player then downloads the library automatically for you and caches it, so the next time it looks for the library it will just use this stored version.

To make the change, right click on the “voter” project and select “Properties.” Then select “Flex Build Path” from the left-hand column. The result is shown below.

From there, select the framework.swc file as shown here.

Double-click on the Link Type. This will bring up a dialog where you can uncheck the “Use same linkage as framework” option and select “Runtime shared library (RSL)” from the dropdown, as shown.

The final step is to click on the Add button. This brings up the dialog shown below.

Now, we enter the URL where the swz file for the framework will be located. This file must be copied from the Flex Builder installation directory to your web server.

Because this particular example uses the charting classes, we’ll also follow the same process with the datavisualization.swc library.

Where to Go from Here

These two articles should set you up well to get started with with Flex. Small applications, such as this voting application, are the perfect place from which to branch out.

If I had to define the three greatest benefits of Flex, it would be these:

• Flex makes building Flash applications easy for developers.
• Flash applications run well practically anywhere, and work just as well as their Ajax counterparts.
• Flex 3 can be used to build Flash applications small enough to create Web 2.0 widgets.

I hope these two articles will leave you pointed in that same direction (be sure to download the code archive for this article).

Quiz Yourself!

Test your understanding of this article with a short quiz — if you're quick, you'll receive a FREE copy of my book, Getting Started With Flex 3 for a limited time, thanks to Adobe.