Article
About the Author
Jack Herrington
Jack Herrington is an engineer, author, and presenter who lives and works in San Francisco, USA. He writes regularly on the topics of Flex, Ajax, Silverlight, PHP, and Ruby on Rails at http://jackherrington.com.
Build A Web 2.0 Voting Widget With Flex: Part I
There are few things that people like to do more than give their opinion about a subject of interest to them—especially on the Web. This can be very useful for engaging your site's visitors, measuring their interest in a topic, or just allowing them to express themselves. Web 2.0, and the advent of Rich Internet Applications (RIAs), allow for the installation of polling widgets on your web site, making it easier than ever to take the pulse of your community.
There are several different technologies you could use to build an interactive voting widget, but the end user needs to be considered carefully. For instance, you could use Ajax—but this approach can introduce issues with client-side compatibility. You could use Applets, but that’s not a popular choice at the moment—too many web surfers disable the Java VM in their browsers.
A very good option, on the other hand, is Flash. Practically everyone has it installed—who hasn’t come across a link to YouTube at some point and wanted to watch a video?
But what if you’re not across Flash? And isn’t Flash really an animator’s tool anyway? Well, as we’ll see, it’s easy for developers to build Flash applications using the Flex framework—freely available as open source from Adobe. In this article, the first of two on this complex subject, we’ll walk through the process of building a Flash widget for voting using the Flex framework.
Download the code archive for this article if you'd like to play along at home.
Pay attention—there will be a quiz at the end! The first 100 people to complete the quiz will win a copy of my book, Getting Started With Flex 3, delivered to their front door for FREE, thanks to Adobe. You can also download the book in PDF format for free for a limited time.
Flex Basics
Before we go any further, we’ll pause for a minute to talk about the Flex and Flash applications and where they fit into the client landscape. Take a look at the following graphic.
This diagram demonstrates how a Web 2.0 web page interacts with a PHP web server. The web page uses one of several tools to communicate with the web server. It can use Javascript and Ajax to make a request of the server, then update the page with the new data. Or it can use a Flash application to provide functionality to the user. This Flash application can either take up the entire page, or it may be contained to a widget that takes up just a portion of it. Flex has been used very successfully in both scenarios.
Flex applications are made of roughly three parts: the MXML that defines the interface, the ActionScript code that contains the application logic, and resources such as images and audio. To draw an analogy with web technologies, the MXML and ActionScript would be HTML and JavaScript respectively.
Now you could download the SDK and program your application using a simple text editor, but there’s a better option—a really good IDE called Flex Builder 3, available free from Adobe as a 30-day trial.
The following diagram shows Flex Builder 3 and how its function fits into the life cycle of generating a Flash application SWF.
Flex Builder manages the MXML, ActionScript, and resources as a project. It uses the Flex SDK compiler to continuously compile the project as you make changes. That temporary output SWF file is then launched in your default browser to do the testing.
Hopefully this provides some context for getting started with Flex. If you’d like a more detailed walk-through of this subject, I recommend you try this excellent tutorial on Flex for beginners.
Getting Flex Up and Running
The Flex Builder 3 installer comes with everything you need built in. It automatically installs the Flex SDK, as well as the Eclipse-based IDE and the AIR runtime (which is useful if you want to build a desktop application rather than a web app.
Once you have Flex Builder 3 installed on your machine, launch it and you should see something like this.
This is the empty Flex IDE. The next step is to create our first Flex project. Select Flex Project from the New menu and you should see this window.
You can name your project whatever you like. I chose Voteview, since for the purposes of this article I’m only going to build an application that views the current vote totals. We’ll discover the interactive widget in the next article.