Playing with Flex

Fri, 06/08/2007 - 9:18am by ejk

We have quite a few in-house applications written in Adobe (formerly Macromedia) Flash. It's an easy way to layout your GUI and build dynamic animations. Another plus is the ability to run it on multiple platforms.

But Flash is intended as an animation tool: you layout graphical elements on a timeline for movements and transitions. You can then go to keyframes in the timeline and attach ActionScript code to them in order to do your programming logic. This model is sufficient for development and deployment, but it becomes a little troublesome to maintain. There is no easy way to search the ActionScript code that has been attached to the different objects in the timeline. Say you need to correct the logic surrounding all the calls to your updateWidget() function. You have to manually navigate through the timeline, searching over the bits of code until you find what you're looking for, and basically cross your fingers that you've corrected them all.

There are some strategies in Flash that can alleviate the problem to a degree: You can use external ActionScript files and include them into your project: this allows you to use an external editor to search the files for what you need. The ideal solution is to have a Flash project containing one keyframe, with one line including your main ActionScript file, then do all your grunt work in external ActionScript.

So why Flex? Flex is a way to generate SWF files, just like Flash, but it allows you to use code to generate the graphical interfaces instead of drawing them on a timeline. So instead of this:

I can write code like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/HelloWorld/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="160"
>
    <mx:Panel 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
        title="My Application"  
    >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="32"/>
    </mx:Panel>
</mx:Application>

Which results in this. Easy, quick, and I'd say the default styling looks pretty good.

Flex contains a rich library of predefined functions for UI building: buttons, menus, textboxes, panels, etc. which makes it ideal for quickly developing rich internet applications or even standalone applications. Also, as you can see, every part of the application is in text format, making maintenance duties that much easier.

Adobe has just released Flex 3 in open beta, grab it while it's hot, and head over to the Flex developer's center for some cool tutorials.