Flex 3 Beta 2 SDK + Europa = w00t!

The quest for a free Actionscript 3 and Flex 3 IDE:

Everyone has their IDE preferences and I’m partial to developing with Eclipse. Thats how my AS2 environment was and I’m used to the Eclipse development cycles, so lately I have been searching for a way to incorporate all the goodies for Actionscript 3 and Flex 3 development in one integrated Eclipse environment… for the low, low cost of free. There are plenty of other examples on the intArw3b but none that I found which covered all the bases, so here is my contribution with a step-by-step approach to doing so.

Preface:

The following examples are done within the Windows environment on a workstation running XP SP2. I will not be going into how to setup this IDE on a Macintosh, but it will be very similar minus the pathing in the ANT build file. There are some things to consider before diving in… as of this post there is no great way to incorporate syntax highlighting or intelli-sense (for free). If you want one of the better plug-ins out there, FDT3 was released not too long ago (http://fdt.powerflasher.com/). There are also a handful of ways in which debugging and trace output can be captured and displayed. These are considerations that you have to decide for yourself but I prefer to be able to debug within the context of the browser so I will be showing you how to use Alessandro C.’s awesome Firefox extension called FlashTracer. This seemed to be the most generic way that I anticipated most users to want their debugging sessions to function, but in the future I may amend/enhance this post to demonstrate how to use your localhost to load the SWF in an HTML wrapper and use a RoR service to capture trace/debug output into a shell. But thats for another time

Download Inventory:

Go down the list and download all the necessary components. You may want to download and unzip the packages to a ‘eclipse_tmp’ directory prior to setting up your eclipse instance. I also recommend doing this so that when you copy files from the temp you can rollback easily if something gets messed up when you are setting up your Europa instance.

1. If you are not using the debug version of the latest Flash player (you can check by right-clicking on a SWF in the browser and if you an item in the context menu ‘Debugger’ then you can skip this step.) Un-install your current flash player and get the Flash Debugger player: (http://www.adobe.com/support/flashplayer/downloads.html)
2. Get Eclipse 3.3 Europa:
   (http://www.eclipse.org/downloads/)
3. Get Flex3 SDK:
   (http://labs.adobe.com/technologies/flex/sdk/)
4. Get the Eclipse EMF All-In-One bundle:
   (http://www.eclipse.org/modeling/emf/downloads/?project=emf).)
5. Get the Eclipse Web Tools Platform bundle:
   (http://www.eclipse.org/webtools/)
6. Get the Flex2 XSD file (if anyone knows where to get Flex3 XSD, please inform…):
   (http://falkensweb.com/mxml2.xsd)
7. Get FlashTracer Add-on for Firefox: (https://addons.mozilla.org/en-US/firefox/addon/3469)
8. Get Flex2Ant:
   (http://www.flex2ant.org/)
9. Get the FlexAntTasks:
   (http://labs.adobe.com/wiki/index.php/Flex_Ant_Tasks)

Configure Eclipse:

Now that you have successfully downloaded all the plug-ins, SDK’s, etc. you will want to pick a spot for your Europa instance to reside. The nice thing about Eclipse is that once you have downloaded the source, you can create as many copies as you like and run multiple instances of the application. There is no installer. After you copy the Europa instance to a desired directory (ie: C:\Program Files\eclipse3.3) you will want to copy the files from each Eclipse add-on that you downloaded earlier from the respective source directories “Features” and “Plugins” to the corresponding ones within the root of the Europa instance. If prompted to overwrite, go ahead and do so. I prefer to keep all the associated files and SDK’s at the root of the Eclipse instance so that it can be moved around without breaking path associations. Below is a picture of my root Europa directory:

Now we need to point the MXML file type to the correct association. Within the Europa IDE select Window –> Preferences. Select General –> Content Types. On the right, expand ‘Text’ and highlight ‘XML’. Click on the “Add” button and enter “*.mxml” as the file type. Press ‘Ok’ and while still in that window, on the tree list to the left expand “Web and XML” and select “XML Catalog”. Click “User Specified Entries” and click on the “Add” button and input these values, below is what you should see along with the associated values…

• URI: path to the Flex 2 “mxml.xsd” file that you downloaded earlier…
• Key: http://www.adobe.com/2006/mxml

The next step is to setup the Flex2Ant association within Europa. The step-by-step for this is after the jump (http://www.flex2ant.org/install.html).

Next, lets setup some preferences within the IDE to suit Actionscript/Flex development. Since we are going to use the Java language as a way to map Actionscript syntax, most of the configuration will take place in the “Java” section of the menus. Note: at this point you could skip the Java setup and install the ASDT plug-in for Europa. Some people have had success even though it uses AS2 class references. If you would like to go that route please skip this section and go here (http://aseclipseplugin.sf.net/updates/) I am not going to cover how to setup the project in this method, but you can install this plug-in simply by going to [Help-->Software Updates-->Find and Install-->Search for new Features-->Next-->New Remote Site] Enter “ASDT” for the NAME and “http://aseclipseplugin.sf.net/updates/” for the URL.

1. To change the code formatting: [Java-->Code Style-->Formatter] and tweak the settings to your liking.
2. Another helpful area to come back to is the [Java-->Code Style-->Code Templates] where you can setup a template to stub methods and comments to your style.
3. To change the code coloring: [Java-->Editor-->Syntax Coloring] and tweak to your liking.
4. Remove Auto-Activation [Java-->Editor-->Content Assist] and un-check “Enable Auto activation”.
5. Last but not least, setup Europa file reference for Actionscript ‘.as’ extension: [Window-->Preferences-->General-->Editors-->File Associations-->] : Add “.as” as a file type.

Setting up a new Europa AS3 Project:

When you setup a new AS3 or Flex 3 project in Europa keep in mind that none of the standard types that y0u would expect to see such as “Flex Project” will be available. The closest thing to use is a generic Java project. I am going to demo how to setup a basic AS3 project in the future I will explain the subtle differences to create a Flex project Go to {File–>New–>Project}. Select {General–>Project} , name it “AS3_project” and press “Next”. Now name your project and finish the wizard. You should see a directory structure in your Navigator window. If the Navigator is not open, go {Window–>Show View–>Navigator}. Right click on the folder icon that is named after your project in the navigator window. Select from the menu {New–>Other–>XML–>XML}. Press “Next” and name the file “build.xml” and press “Finish”. Right-click on the project folder again and go {New–>Folder}. Name it “src” and press “Finish”. Right-click on the new “src” folder and go {New–>File} and call it “Main.as“. You should now have a project structure like the one in the screen-shot below:

Go ahead and write your own or dump the supplied AS3 code below into the “Main.as” class and save it off..

[as]
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main()
{
trace(“Hello World”);
}
}
}
[/as]

Open the “build.xml” file, its blank and we need to put stuff in it Which brings us to the next section….

Making ANT Work:

Now we can move on to creating an ANT build file. This file is going to establish associations to the remaining files that you downloaded earlier. This is why I prefer to copy those files to the root of the Europa instance for easier pathing and portability. Apache ANT is a very vast tool that I will just be scratching the surface of in this demo. If you want to check out its capabilities, go here (http://ant.apache.org/manual/index.html). You can control all sorts of fun things in your ANT build, like playing a sound file on your computer when the compiling is successful or fails, executing .bat files to carry out other processes during the build, displaying a custom image while compilation is occurring, etc…. I am going to show you how to create a lean and mean ANT file for building our project with the following key parts:

• Use mxmlc to compile your code.
• Tailor the mxmlc compiler parameters beyond the defaults.
• Create an HTML wrapper for loading the compiled SWF.
• Setting the parameters of the output SWF.
• Using a template to include “express-install” and specify the major and minor versions of the flash player.
• Execute the wrapper HTML file in a browser of your choice.

To get right to the sample ANT build.xml file you can right-click and save this link: (ANT build file). Bring the XML file up in the Europa IDE so that you can see whats going on and modify the paths to your system settings.

This is not intended to be a primer on ANT, so I will be assuming some prior knowledge on your part and or just giving you the essential knowledge to customize the sample ‘build.xml‘ file to your needs.

Within the <project> tags:

[xml]

Pretty straight forward here… the <taskdef> node creates a new task for ANT and should be modified to point to the path where your copy of the ‘FlexAntTasks’ jar file you downloaded earlier.The <property> node named “FLEX_HOME” should be modified to point to the path where your Flex 3 SDK lives.The <property> node named “FIREFOX_HOME” should be modified to point to the pathe where your Firefox application lives, or you can use a different browser but keep in mind you will not be able to use the FlashLogger plug-in to view debug/trace output.The <property> node named “src.dir” should be modified to point to the package structure of where your “Main.as”, “Application.mxml”, or whatever entry-point class resides that you have created in your Eclipse project.The <property> node named “bin.dir” should be modified to point to the directory where you wish to deploy your compiled SWF file and corresponding HTML file, etc.The next block with the <target> tag named “compile” contains all the references that the mxmlc compiler needs… If you want to have a look at all the allowable compile options go here (http://flexstuff.googlepages.com/FlexCompilerOptions.html) . Its good to know whats possible and what the defaults are. The options that I specified are mainly for faster compilation and extra debugging info.

[xml]





[/xml]

The next <target> node is named “wrapper” and what do you know, its responsible for the HTML wrapper generation and some compiled SWF properties. To take a look at what Adobe has to say about configuring this part of the ANT task have a look here (http://labs.adobe.com/wiki/index.php/Flex_Ant_Tasks#Using_the_html-wrapper_task)

[xml]





[/xml]

Last, but not least we have the <target> called “runInBrowser”. You will again want to modify the path in the <arg> tag to the file system path of the generated .html file that the build will produce. You can also see that we are executing the ‘Firefox.exe’ file here to spawn the browser and pass it the index.html file to load. Another important thing to notice in all the root <target> nodes is the attribute “depends”. This is used to create a sequence of commands for ANT to carry out. So that compilation happens first, then the wrapper generation and finally the launching of the newly created HTML file in the browser! If you take a look all the way back at the top in the <project> node you can see that the first action triggered is the “runInBrowser” task. That way all the events are then queued by default when the ANT file is run.One final trick for us Actionscripter’s is to map the familiar key sequence “Ctrl+enter” to run our new ANT build. Go to {Window–>Prefs–>General–>Keys} and find the ANT build command. Copy it, then in the copied command enter the new key combo of your liking.Viewing in FireFox:At this point you should be able to use the new compile shortcut you created to invoke the ANT build for your new project. The output console should start churning away and in 3-4 seconds you should see the browser launch with your blank SWF file! If there are any errors you will see them printed out to the console. When Firefox launches the HTML file with your SWF in it go to {Tools–>FlashTracer} and a sidebar will appear. If everything is wired-up correctly you will see your “Hello World” trace in the log Here is the obligatory screen-cap:

Thoughts:

Well, there you have it. You should be up and running a stable IDE for developing and compiling AS3 and Flex 3 projects! There is room for improvement, as always. Hopefully in the way of syntax highlighting and or code-completion. There is also much more configuration that I left on the table to tailor the IDE to your taste and speed up your dev process. Also, there is a lot ANT can do as well that I left our for the sake of brevity and there are a variety of tools out there for you to choose for capturing trace and debugging logs (tail, fdb, eclipse console, etc.) I’ll gladly attempt to answer any questions that you might have or problems getting this setup on your machine. HTH, happy coding!