Starting Out with Adobe Flex 3

-          Damodar Chetty

-          May 30, 2008

 

A typical rite of passage for any developer wanting to learn a new language or framework is to write a simple Hello World application.

Well, we're in the process of strategically positioning ourselves in the world of Rich Internet Applications, and the product of choice happens to be Adobe's Flex product that is based on its wildly popular and widely disseminated Flash Player.

So, what better way to get started than to wander off to the Adobe web site and download the latest version of Flex (Flex Developer Center). If you remember the excitement of creating Java applications using nothing more than Notepad, esp. after the heavyweight Microsoft IDEs, you will understand why I chose to download the Flex 3 SDK rather than FlexBuilder. This page is unfortunately a minefield, since Adobe tries real hard to get you to try out FlexBuilder, and I had to actually read this page before I could get at the free SDK. Not that I have anything against FlexBuilder, after all its built around an IDE that I've grown to enjoy, but for a first project, I don't really need any hand holding, thank you.

Before you go any further, make sure that you have the latest Flash Player installed - i.e., version 9. Flex 2+ requires a newer ActionScript Virtual Machine. Smarter wrappers than the one I use below would detect your Flash Player version and walk you through installing it, but for now, dumb's the word.

In short order, I unpacked the downloaded ZIP file to c:\Flex3SDK, resulting in a plethora of folders under it. These things make my head spin, so I ignored all this activity, and simply added C:\Flex3SDK\bin to my PATH environment variable. This allows you to execute the compiler (mxmlc) directly from the command line.

To verify that you can execute your compiler, open a command window and execute mxmlc -help.

Create a folder for your starter application - c:\dev\flex\HelloWorld.

Within it, create a HelloWorld.mxml file, with the following contents:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

  <mx:Button id="alertButton" label="Say Hello"
   click="mx.controls.Alert.show('Hello World!')" />

</mx:Application>

There is a lot going on in here, and in a later article, I'll step through this, but for now take it on faith.

Now, use the mxmlc compiler to compile this into AVM bytecode:

mxmlc HelloWorld.mxml

This should result in a HelloWorld.swf file in the same folder. Again, there're a ton of options that you can specify for mxmlc, but remember we're keeping it real simple for now.

Next, in the same folder, create an HTML wrapper file that will host the HelloWorld.swf file.

<html>

<body>

  <object

    id='application'

   classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'

    codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/
   swflash.cab#version=9,0,0,0'
   height='100%' width='100%'>

   <param name='src' value='HelloWorld.swf'/>

   <embed name='application'                                       
     pluginspage='http://www.macromedia.com/shockwave/download/
     index.cgi?P1_Prod_Version=ShockwaveFlash'

     src='HelloWorld.swf'

     height='100%'

     width='100%'/>

  </object>

</body>

</html>

That's it - now open this file in IE or FF and you'll be able to execute the application. In my case, the file is at: file:///C:/dev/flex/HelloWorld/HelloWorld.html.

This may seem like a trivial exercise - but if you're a newbie, congratulations! You've just understood the mechanics behind a prototypical Flex "application".