Getting Started with Flex 2

After reading about Flex 2, I wanted to give it a try for myself. Adobe provides a free command-line compiler in the Flex SDK, downloadable with registration from their surprisingly clunky web site.

The download is just a zip file that you can extract and immediately begin using. Within a few minutes I was able to compile and test the sample applications, and from there it wasn't too hard to figure out the minimum setup I needed to create my own first application:

1. Create an empty directory under the document root of your web server.
2. Copy samples/explorer/AC_OETags.js to the new directory.
3. Copy samples/explorer/explorer.html to the new directory. Rename it first.html
4. Edit first.html and replace all instances of explorer with first
5. Copy samples/explorer/build.sh to the new directory.
6. Edit build.sh and change to the relative path to mxmlc so it points to wherever you extracted the SDK.

Once that was done, I created a new main layout file named first.mxml to declare my application:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>

I used mxmlc to compile this into first.swf. I was then able to view first.html in a browser and successfully access my first (empty) Flex application.

Building user interfaces with Flex 2

After several years in the trenches, I am very sick of building rich browser-based user interfaces using DHTML. Even relying on fancy libraries like scriptaculous or the Yahoo User Interface Library, the interface never acts quite as nice as a desktop application. Loading can be slow. Uneditable labels and components are selectable. Objects can stutter and flicker or get stuck on unexpected boundaries when dragged. Different combinations of browsers and operating systems yield different results and bugs.

The whole programming model is also tedious. Not so much because of JavaScript, but because HTML is awkward for declaring layouts and wiring together components and data sources.

Adobe Flex 2 seems to offer a very compelling alternative to DHTML for rich browser-based application interfaces. With Flex you build interfaces in three parts:

1. XML files that declare layouts, components and other static objects. Flex includes a full set of standard interface components such as trees, lists, menus and form controls. You can also create custom components.
2. Script files (ActionScript) for implementing event handlers and other dynamic behavior.
3. Server-side data sources and callbacks to handle data flow to and from the client.

Besides being compelling from a programming perspective, the standard components look and feel beautiful and responsive on all browsers and platforms. This demo is my favorite since it shows off each component along with the code required to use it.