Build A Web 2.0 Voting Widget With Flex: Part I

Once we’ve installed the ILOG Elixir controls on the machine, we can link them into the project by referencing the Elixir libraries. From there, we add a reference to the Elixir PieChart3D instead of to the original PieChart control.

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()" xmlns:ilog="http://www.ilog.com/2007/ilog/flex">  
 <mx:HTTPService id="votes" resultFormat="object" url="http://localhost/votes.xml" />  
 <mx:Label fontSize="20" text="{votes.lastResult.votes.topic}" />  
 <ilog:PieChart3D width="100%" height="100%"  
   showAllDataTips="true"  
   dataProvider="{votes.lastResult.votes.options.option}" elevationAngle="30">  
   <ilog:series>  
     <ilog:PieSeries3D field="count" nameField="name" explodeRadius="0.1" />  
   </ilog:series>  
 </ilog:PieChart3D>  
</mx:Application>

And when brought up in Flex Builder 3, it looks like this figure.

Now we’re really cooking with gas! With Elixir we can change the rotation of the chart, the colors, the viewing angle, the lighting, and more. We can even do all that on the fly by responding to mouseclick events and changing the parameters on the chart using ActionScript. This functionality allows the voter to spin the chart around and view it from different angles.

This is about as far as I’m going to go with the interface in this article series. To finish up, I’ll demonstrate how to use a different data transport technology, AMF, instead of XML. AMF is easier to use, particularly when you’re both reading and writing data—more on this in the next instalment!

NOTE:
AMF and XML aren’t the only ways that Flex can access data. Your applications can read JSON, text, AMF, or go direct to binary data through sockets. In other words, wherever your data is and whatever the format, Flex applications can get to it.

Going to AMF

Let’s use the free AMFPHP package to build an AMF service on the web server. AMFPHP comes with a built-in service browser, which I’ll show you in a minute, plus a directory where you put your services. In this case, we’ll add a new service to a new “votes” directory called VoteService.

Here’s the PHP code for VoteService:

<?php  
include_once(AMFPHP_BASE . "shared/util/MethodTable.php");  
class VoteService  
{  
 function getVotes()  
 {  
   return array( 'topic' => 'What is the best Star Wars movie?',  
       'votes' => array(    
           array( 'name' => 'Episode IV', 'count' => 150 ),  
           array( 'name' => 'Episode V', 'count' => 250 ),  
           array( 'name' => 'Episode III', 'count' => 50 )  
         )  
       );  
 }  
}

For this example, we’re just going to return the same data as we’d have gained from the XML file on the server. That way, if the results look the same we know everything’s in order.

To test the service, navigate to the amfphp/browser directory in your browser. You should see something like this.

Next, click on the votes/VoteService and hit the Call button. This causes the AMF browser to invoke the service and display the results, as shown here.

We can see that the data is returned correctly as an ActionScript object that’s very easy to manipulate.

From here, we can change the HTTPService from the original PieChart application to a RemoteObject service. The RemoteObject class connects to the AMF endpoint and then defines a bunch of methods. You can see this in the updated source:

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  
 creationComplete="voteRO.getVotes.send()">  
<mx:RemoteObject id="voteRO"  
 endpoint="http://localhost/amfphp/gateway.php"  
 source="votes.VoteService" destination="votes.VoteService"  
 showBusyCursor="true">  
<mx:method name="getVotes" />  
</mx:RemoteObject>  
 <mx:Label fontSize="20" text="{voteRO.getVotes.lastResult.topic}" />  
 <mx:PieChart width="100%" height="100%"  
   showAllDataTips="true"  
   dataProvider="{voteRO.getVotes.lastResult.votes}">  
...  
 </mx:PieChart>  
</mx:Application>

Yes, that’s a lot more code than the HTTPService required to achieve the same outcome (don’t forget to download the code archive for this article). But using AMF instead of XML will make it a lot easier to perform both the vote collection and vote addition from the widget that we’ll create in the next article of this series.

What’s Next

So far, we’ve installed Flex Builder and created an application that displays some vote tallies from either an XML or an AMF data source. In the next article, we’ll upgrade this example to provide the voter with a way to submit votes before seeing the vote tallies.

Quiz Yourself!

Test your understanding of this article with a short quiz, and receive a FREE PDF of my book, Getting Started With Flex 3. The first 100 people to complete the quiz will also receive a paper copy delivered to their door for FREE, thanks to Adobe Systems.

Take the quiz!