Adobe Flex

Draft

<pageby nominor="false" comments="false"/>

Definition

“Adobe Flex is a software development kit and an IDE for a group of technologies initially released in March of 2004 by Macromedia to support the development and deployment of cross platform, rich Internet applications based on their proprietary Macromedia Flash platform.”" (Wikipedia, retrieved 15:49, 6 September 2007 (MEST)).

In April 2007, Adobe announced that the Flex SDK would be released open source. A visual programming environment was provided in the form of the Flex Builder that was to remain proprietary and commercial.

In October 2007, a press release announced that not only the price of Flex Builder was to be dramatically reduced for developers but, even better, it was to be offered for free to students and educators.

“By making it easier for educational institutions to adopt Flex 2, we are ensuring that students and researchers are better equipped to harness the power of Web 2.0 and RIAs”, said Peter Isaacson, vice president of education marketing at Adobe. (Adobe Press release at Reuteurs, retrieved 19:03, 27 October 2007 (MEST)).

Installing the Flex Framework

The Flex SDK 2.0.1 (or higher) from Adobe

• Download this free SDK from Adobe:

http://www.adobe.com/products/flex/downloads/

For Windows and Mac there is a Flex Builder plugin for Eclipse. Otherwise there is a platform independent compiler, the Adobe Flex2 Software Development Kit (SDK).

Installing the Adobe Flex2 Software Development Kit (SDK) for Windows

• Unzip it somewhere
• Edit the Environment variables through the configuration panel to include the bin directory in the path: I.e. something like Parameters->Config Panel->System->Advanced (I don't have an English System at hand).

Installing the Adobe Flex2 Software Development Kit (SDK) for Ubuntu

• Unzip it somewhere (I put it under /usr/local/flex)
• Under Linux change permissions of the shell scripts in the bin directory, in particular mxmlc
• Then add this directory to your path. E.g. under my Ubuntu I added in file /etc/bash.bashrc:

export PATH=${PATH}:/usr/local/flex/bin

Installing the Adobe Flex2 Software Development Kit (SDK) for Mac OSX

• Unzip it somewhere (I put it under /Applications/flex_sdk/flex_sdk2/)
• Open terminal, go to the flex_sdk directory. Make sure the files in the bin directory have the right permissions. Type "ls-al". File details should start with "-rwx". If no "x" appears, type "chmod u+x *" to give execution permission to all files in that directory.
• Then add this directory to your system paths. Go to your home directory ("cd $home"), edit the file (in the terminal window, type "open .profile" or "mate .profile" if you have textmate installed). Add the path to the file.

export PATH=$PATH:/Applications/flex_sdk/flex_sdk_2/bin/

Save the file. Then make sure the profile file is being initiated.

source .profile

If you have the TextMate code editing software installed, download the Flex and AS3 Bundles for TextMate.

Writing Flex Applications

Flex can appear a bit tricky to install for a largely non technical person. Once the framework installed, it is very easy to start writing Flex applications.

The starting point is the writing of a mxml document or an Actionscript 3 program.

A Flex program is a text file that contains a combination of xml elements and optionally actionscript instructions.

A basic mxml document would look something like this:

file myFirstApplication.mxml

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

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="160" 
>
    <mx:Panel 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
        title="My First Application"  
    >

        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

Put the text above in a text file. Save the text file as "myFirstApplication.mxml". Assuming the Flex framework is properly installed, in the terminal, type

mxmlc myFirstApplication.mxml

Information appears on the screen and about half a second later, if all is well, you get informed that a file "myFirstApplication.swf" has been produced. Open this file in a flash player or in a web browser.

SWF files generated by Flex require Flash Player 9 or above.

This is part of the Flash series of articles. But it is not a tutorial !!

See also:

• Actionscript 3 as an entry point for learning Actionscript programming.
• Flash ActionScript 3 overview

Editing software / IDEs

• You can use any programming editor, but you should check if your favorite editor has an ActionScript syntax mode. At least you should have syntax highlighting JavaScript, e.g. you can also check out Web_authoring_system#Programmer.27s_editors_with_HTML_support web editors.

Otherwise check out:

• Flashdevelop. Free and open source tool that provides syntax support and an interface with the Flex compilers.
• Adobe Flex Builder, a commercial Eclipse plugin from Adobe. It is free for education upon request.
• ... or use the built in ActionScript editor in CS3.

Links

Adobe tutorials

• Creating Flex components
• MXML and ActionScript (Series of tutorials)

Other

• Creating Flex Components by Bruce Eckel (the person who wrote what is probably the best Java book)

• PHP and Adobe Flex, by Daniel Williams, Php Builder, 2007.

• Flex for PHP Developers

• Flexexamples.com Peter deHaan's blog (He works in the Flex team at Adobe)

• Flex tutorials slides in PDF by Dai (Blog XML: Technologies de l'information et du Web, in French !). *.rar compressed files to download.