Setting Up The Flex 4 SDK With Eclipse IDE

http://www.seanhsmith.com/2010/03/29/flex-for-free-setting-up-the-flex-...
Sean Smith
Flex for Free: Setting Up the Flex 4 SDK with Eclipse IDE
I recently wrote about Adobes release of Flash Builder 4, ColdFusion Builder and the free Flex 4 SDK. While Flex Builder is a great IDE, as Im sure are Flash Builder and ColdFusion Builder, most independent developers cannot afford the licenses that range into the hundreds of dollars. What is an aspiring or shoe-string budget Flash developer to do? Fortunately, there is a legal and free method of developing and building Flash applications using the free Flex 4 SDK in combination with the open source Eclipse IDE. The first things you will need to do is grab the Flex 4 SDK (http://www.adobe.com/go/flex4_sdk_download) and a version of the Eclipse IDE (http://www.eclipse.org/downloads/) . Any version of Eclipse should do but I recommend using either Classic or the one for PHP Developers as Im currently using. Install Eclipse to where ever you would like and extract the Flex 4 SDK files to any easily accessible folder. For the purposes of this tutorial, I extracted mine to the following path on my Windows Vista laptop: C:\AdobeSDK\Flex\4.0 Open up Eclipse and start a new project by clicking File -> New -> Project. The New Project wizard should open. Select Project from the General group in the list and click the Next button.
(http://seanhsmith.com/wp-content/uploads/2010/03/01.jpg)
For the purposes of this tutorial, we will call this project Test Project. Type this into the Project name field and either leave Use default location checked or uncheck it and specify your own workspace location. I will leave this checked. Click the Finish button.
Eclipse should create your project and add it to your Project Explorer window pane. We will mirror the standard folder structure that Flex Builder uses and create three new subfolders to our project called bin, libs and src. Right-click on your project folder, point to New, and then click on New Folder. Enter bin into the Folder name field and click the Finish button. Repeat this process twice more, entering the folder names libs and src each time. When you are finished, you should have three subfolders below your root workspace location.
1 of 6
8/17/2011 4:19 PM
The bin folder is where we will save the compiled Flash .swf file. The libs folder is where you will drop any .swc file libraries that your project will use. Lastly, the src folder is where all of your project source code will be stored. Before we continue, I recommend adding an editor for the *.as file extension in Eclipse and associating it with the Java editor since ActionScript 3 is very similar in syntax. To do this, click either Window from the menu if using Windows or from Eclipse if using a Macintosh and then click Preferences. This will bring up the Eclipse Preferences dialog window. Expand the General node in the tree and then expand Editors. Click on File Assocations to see the file associations pane. Once there, click the Add button next to the File types list.
Enter *.as in the File type field click the OK button. The file type should now be added to the File types list. Make sure this new item is selected by clicking on it.
Next, click the Add button next to the Associated editors list, which should be empty. Make sure the Internal editors option is selected and then select Java Editor from the list. Click the OK button.
2 of 6
8/17/2011 4:19 PM
The new associated editor should appear in the Associated editors field. Click the OK button to save and exit the Eclipse Preferences window.
Now we are going to create our MXML file that will define our application layout and appearance. It also serves as the entry point that the compiler uses when linking everything together. Right-click on the src folder, point to New, and then click File. The New File window should appear. For this tutorial, I will name the file application.mxml but this realistically can be whatever valid filename you want to give it.
The application.mxml file should now be in your src folder and the editor should automatically open. Since this is not a Flex tutorial, I will just provide a valid Flex 4 MXML skeleton that we will use to test the compiler. Enter the following into the application.mxml
3 of 6
8/17/2011 4:19 PM
editor window: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> </s:Application> Now we are going to create our builder for this project. Right-click on your project folder (in this case, Test Project) and then click on Properties at the very bottom of the popup menu. This will open the Properties window for your project. Click on Builders in the list on the left side if it is not already selected. This is the pane where you define your project builders which is essentially the process of pointing to the compiler and feeding it the proper arguments.
Click the New button to the right to create a new build factory. A window will open that should have Program selected in a list. Just click the OK button when you see this window.
This will launch the Edit Configuration window. You should already be on the Main tab but if youre not make sure it is selected. At the very top there is a Name field where you can give the builder a name. Since this is a process you will have to repeat for each project you create, I recommend giving it the same name as your project so you know which builder goes to which project. In this case, I named mine Test Project. Click the Browse File System button below and to the right of the Location field. Navigate to the folder where you extracted the Flex 4 SDK files and then to the bin subfolder. Select the mxmlc.exe file if youre on Windows or just the mxmlc file with no extension if you are on Macintosh from this folder. In my case, the path was C:\AdobeSDK\Flex\4.0\bin\mxmlc.exe. Click the Browse Workspace button below and to the right the Working Directory field. If your project folder is not already selected, select it and click the OK button. Next, you need to define the arguments that are fed to the mxmlc compiler. Enter the following into the Arguments field. src/application.mxml -output=bin/application.swf -library-path+=libs/ -target-player=10.0.0 Essentially what I am telling the compiler to do is take the application.mxml file from the src folder, compile it using any available
4 of 6
8/17/2011 4:19 PM
libraries from the libs folder and target the Flash 10 platform (required for Flex 4 projects), and save the compiled SWF as application.swf in the bin folder. There are many other options available to use with the compiler, but these are probably the most useful, in my opinion. UPDATE: If you are using the Flex 4.5 SDK, Adobe is now requiring Flash 10.2 as the minimum version of Flash player. You will want to change the -target-player=10.0.0 compiler argument to be -target-player=10.2.0 After youve entered these options, your screen should look something like the following.
Before you click the OK button, theres a few other options that might be handy to turn on. Click the Build Options tab and then look for and place a checkmark in the Launch in background and During auto builds options. This will make your project compile every time you save a file. This is useful when you need feedback from the compiler as to whether certain tags or code are valid. If you are compiling a very large SWF, these options are probably not advised.
Click the OK button and your project should now begin to compile. If you did everything right, you should see something like the following in your console output window: Loading configuration file C:\AdobeSDK\Flex\4.0\frameworks\flex-config.xml C:\Users\Sean\workspace\Test Project\bin\application.swf (37842 bytes) If you dont see any errors in red, then everything compiled successfully and you have a fully functioning Flex development environment in Eclipse! Happy coding!
5 of 6
8/17/2011 4:19 PM
Tags: Eclipse,Flex
6 of 6
8/17/2011 4:19 PM

Setting Up The Flex 4 SDK With Eclipse IDE

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Setting Up The Flex 4 SDK With Eclipse IDE

Uploaded by

Copyright:

Available Formats

http://www.seanhsmith.com/2010/03/29/flex-for-free-setting-up-the-flex-...

You might also like