Eclipse IDE explained in a nutshell

The Eclipse IDE consist of several graphical user interfaces. Each of these interfaces has a specific purpose. You can decide which interfaces to switch on and off depending on your development needs. The major break down is as follows:

Workspace
The location where all your files will be created. Eclipse has a project explorer which is essentially your project folders & files. You can have multiple workspaces on your machine and switch between them as and when required.

Perspective
This is basically all the interfaces you are looking at when launching Eclipse. As mentioned above you can personalise what you want to see. A perspective is a collection of graphical user interfaces, i.e. views. Similar to workspaces you can have multiple perspectives. The default is Java as Eclipse is primarily a Java development tool. Written in Java for Java.

After installing FDT, Eclipse should open up the Flash perspective by default. This is extremely powerful as I can setup different workspaces for different programming/scripting languages. I can keep all my Java projects together and similarly all my HTML and Flash projects respectively. Each workspace has its default perspective associated to it. I could have different language projects in the same Workspace and just switch the perspective as required. Later in this post I explain how I like to setup my workspace.

Views
Views are the graphical user interfaces that make up each perspective. Views as with perspectives can be customised to the developer's needs. Each workspace remembers what views are in use and therefore you can have specific views for say your Java Perspective and also specific views for Flash. In Java I might not need the SWFViewer View so I can disable it. Similarly in the Flash Perspective I might not require the Junit View.

Getting started

We use the following tools for our Actionscript projects:

• Download Eclipse 3.3 Europa or higher from http://www.eclipse.org/downloads/ »
  
• Install FDT 3 using the update site is: http://fdt.powerflasher.com/update
  
• Webtools for Eclipse http://download.eclipse.org/webtools/updates/ (Optional)
  

Webtools is only required if you want to be able to edit HTML, JavaScript, XML and CSS with code hinting and colour syntaxing. I do not cover this plug-in however after this post you should be well capable of installing this plug-in without any problems.

Installing plug-ins for Eclipse

There are two ways to install a plug-in for Eclipse. The first would be to copy the features and plug-ins folder manually from your plug-in download archive to the root of the installed eclipse location. The second would be to use the update site should one exist for the plug-in you want to install. An update site doesn't always exist as it depends on the author of the plug-in to create one. Basically as oppose to downloading the archive file for the plug-in you download it through the Eclipse interface wizard and Eclipse installs it in the correct location.

It is obviously much better to manage your plug-ins this way. I would advise you use this method always if available. It is entirely possible for you to remove the wrong files and that could have a severe impact on Eclipse itself. Although that is quite a serious warning it is not the end of the world. The good news is that as long as your workspace is in tact, i.e. no files are corrupt etc.; you should be able to install a new version of Eclipse without any problems and set the workspace to point to your old one.

Creating a new Update site

• Launch Eclipse
  
• Help » Software Updates » Find and Install
  
• Select Search for new features to install and click Next
  
• Click on New Remote Site
  
• Give the site a descriptive name for easy future reference
  
• Enter the URL to the site and hit OK
  
• Check the newly added site and click on the Finish button.
  
• Usually Update Site Mirrors dialogs will popup if a mirror site is available. Here you can select a mirror location closer to home or check the Automatically select mirrors checkbox and let Eclipse do it for you.
  
• Hit ok
  
• You should now see a Search Results dialog with all the updates for your new plug-in

How it works
Eclipse works on dependencies and extensions. Basically this is how they manage different versions, capabilities and mostly so that many developers can write their own plug-ins/features and extensions for the Eclipse IDE. Similar to running and making programmes work on different operating systems. What is the difference between a feature and a plug-in? Well a feature holds information about the plug-in, dependencies and installation. It can also consist of many plug-ins and other features. An update site links to a feature as oppose to the actual plug-in.

Due to this you might want to install a plug-in that actually requires (dependant on) another plug-in and an error will appear in the dialog's white space as soon as you select the feature that you want to install. As far as I know this is common with older style plug-ins because creating plug-ins for Eclipse 3x has changed quite a bit since Eclipse 2x. However this does come down to the way the plug-in was created and there isn't much you can do without tracking down this dependency in order for your plug-in to be installed.

Click on Select Required if you are installing a plug-in while searching for Eclipse project updates. By default you should have 2 remote sites after installing Eclipse called Europa Projects updates or Europa Discovery Site. These sites contain updates for the Eclipse IDE and can also help solve some of these dependency issues. If you get an error while trying to install a feature click on Cancel and do the update process again except this time include the above mentioned update sites.

If this doesn't work try unchecking the Show the latest version of a feature only checkbox. Unchecking this will show all the versions available within this feature to show and there might be a previous version you can use.

Important note: For the purpose of this post you shouldn't get this dependency error. By installing the Classic Eclipse Europa IDE release and FDT3 you will have everything you need. The above solution is for future additions you might want to make to your development environment.

Managing Eclipse plug-ins

• Launch Eclipse
  
• Help » Software Updates » Manage Configuration
  
• Expand the tree on the left
  
• Select a feature
  
• The right frame should give more info on the selected feature and give you some extra options like Scan for updates
  
• If you want to uninstall a plug-in right click on the feature on the left and select uninstall
  

Eclipse workspace

It is a good idea to have different workspaces for different clients. By doing this you reduce the amount of projects you have in one workspace as it can fill up quite quickly. Darren Schall has a post specifically about understanding the power of Eclipse workspaces. Having loads of projects in one single workspace can slow Eclipse down as FDT builds each project on start-up to give you any errors in your class files. So I would suggest having one location on your machine with the following folders. Each of which will become its own workspace. In each of these clients workspaces you will have multiple projects. This is just a recommendation and not a requirement. I like to work this way as I deal with a lot of clients and a whole lot of projects every year. Below is just an example of what I mean.


Fig 1a. Different client workspaces


Fig 1b. Different projects within each workspace

Eclipse/FDT memory issue

• It's not really an issue but rather an adjustment that has to be made for FDT3 to fully function
  
• When you download Eclipse the default memory allocation for Eclipse is 256Mb
  
• For use with FDT3 we will have to change this to 512Mb. Don't worry it's very straight forward
  
• Browse to your Eclipse installation directory
  
• Open the file "eclipse.ini" with a text editor and change the line -Xmx512m
  
• Save it and close. That's it. Now Eclipse will use 512Mb memory and FDT will be able to fully function
  
• Restart Eclipse and Voila!
  

FDT basics

After installing FDT it is important to setup the MX package on your machine for use in AS2 projects. MX has a different package structure and thus FDT doesn't include it in the Core library. Luckily there is an easy way for us to include it in the Core library so we don't have to manually add this every time we create a new project. After doing this the MX package will be added automatically each time you create a new project in this workspace. Here is how we do it:

• Go to C:\Program Files\Adobe\Adobe Flash CS3\en\First Run\Classes
  
• Create a new folder called "mx_only"
  
• Copy the mx package to this new folder
  
• Launch Eclipse
  
• Windows » Preferences » FDT » Core libraries
  
• Core AS2 Default library » Edit » Browse » AS2_CORE_DEFAULT » Edit
  
• Copy the location
  
• Browse to this location
  
• Copy the mx_only package you create earlier to this location
  
• Create a new AS2 project and voila the mx package should be available

Fig 2a. Window » Preferences » FDT » Core Libraries


Fig 2b. CoreAS2Default


Fig 2c. CoreAS2Default » Browse


Fig 2e. Copy the location to clip board

Creating a new FDT project

Creating a flash project is a three part process. Choose a name for you project. Select the linked library you want to use. After successful creation assign a source folder where your classes will reside.

• Make sure you are in the Flash perspective. To do this go to Window » Open perspectives » Other
  
• Select Flash and hit OK
  
• Go to File » New Flash Project » Actionscript2 or Actionscript 3 » Finish
  
• Create a source folder, usually called src
  
• Right click no folder and select Source » Add to classpath
  
• Right click on src folder and create new Class
  
• Type the package name where this class will be located in, e.g. com.wezside.core
  
• Give the class a name and click on Finish

Ctrl + Enter run setup

So a complaint I hear from a lot of developers are that FDT and Eclipse is great however you need to constantly jump between the Eclipse IDE and the Flash IDE. For an AS2 project this is absolutely true but there are some tweaks you can add to your Eclipse environment to improve this workflow. For AS3 projects you could use FDT to run your code without an FLA at all. You can create FLA libraries or use external assets and embed/load them at runtime and compile your project without requiring any FLA at all.

After this little tutorial you should be able to run your current application using the shortcut Ctrl+Enter as you would run "Test Movie" in the Flash IDE. This obviously only works once you have it setup.

• Window » Preferences » Run/Debug
  
• Launching » in the Launch Operation group select Always launch the previously launched application
  
• Window » Preferences » Keys
  
• Scroll down to Run Last Launched
  
• Focus the Binding textfield, i.e. click into it
  
• Hit backspace then Ctrl + Enter
  
• Click OK
  
• Run » Open Run Dialog
  
• Right click FDT Flash IDE
  
• Project browse to project that you want to run
  
• Browse to the FLA
  
• Operation » Select TestMovie » Delete ASO Files before Flash execution (Optional)
  
• Apply » Run

After you have done this Ctrl+Enter will be a shortcut for the last run FDT Flash IDE configuration. So you can set up all you projects and run the one you are currently working on for the first time. There after you can use Ctrl + Enter. Very useful indeed.


Fig 3a. Window » Preferences » Run/Debug » Launching


Fig 3b. General » Keys » Run Last Launched » Binding » CTRL + Enter


Fig 3c. Run » Open run dialog » Right click FDT Flash IDE » New


Fig 3d. Complete the Project, FLA and Operation group info

What are the differences between a Linked Library and an SWC?

There is no fundamental difference. An SWC is a collection of classes, i.e. a compiled set of classes. A linked library is reference to a collection of classes that is not compiled but can also be an SWC. An SWC can be setup to be a linked library. This was used in MX days to create components and to distribute a set of classes. Now it is an acceptable format for distributing components and a collection of classes.

Setting up Eclipse/FDT with the Flex 3 SDK

I would suggest you only read this part should you want to create a flex project or use the flex compiler for your project. If not then ignore this as it might just be a little bit confusing.

By default FDT creates an Actionscript 3 project using the Flash CS3 library (playerglobal.swc). You will notice this if you create a project using FDT3's Create new Flash Project wizard. The project language grouping will show CS3 if the Actionscript 3 radio button is selected. You can however change this so that you compile your project with the Flex SDK which is absolute free from the kind folks at Adobe. Typically this setup can be used to setup the AIR compiler so you can start writing those application from within Eclipse and FDT.

So how do we create a new compiler for use with Eclipse and FDT? Easy follow these steps and you should be up and running in no time.

• Download the Flex 3 SDK from Adobe labs http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html »
  
• Extract this to a location on your machine and make sure there are no spaces in the folder name
  
• Window » Preferences » Core Libraries » AS3 Core Libraries
  
• Fast Add » Type » Flex 3 SDK
  
• Path » Browse » Installed flex 3 sdk location » OK » OK
  
• File » New Flash Project
  
• Project language » Flex_3_SDK_0 » Next
  
• Change Core Library » Flex_3_SDK_0 » OK » Finish
  

Important things to know:

• FDT won't give you code completion for MXML but it will for AIR if you add the correct sdk
  
• Using flex controls, i.e. components won't compile in the Flash IDE. This is because the Flash IDE uses a different VM as far as I know. If I am wrong can someone please correct me?
  
• You can however use flex control and compile you project using the sdk itself, afterall that is what the above process was all about right. See Running a project using Flex 3 SDK for info on how to do this.
• Flex containers, controls and other components won't work in a pure AS3 project unless you use the MXML Application file to initialise everything that is required for these components to run. There has been blogged about this quite often and some people have found workarounds. Read more here »

Fig 4a. Window » Preferences » FDT » Core Libraries » Fast Add


Fig 4b. Fast Add » Type » Flex 3 SDK » Path Browse » Installed flex 3 sdk


Fig 4c. New Flash Project » Project Language » Flex 3 SDK » Next


Fig 4d. Change Core Library » Flex 3 SDK » OK » Finish

Running a project using Flex 3 SDK

This step is depending on the successful setup of the Flex SDK mentioned above. So you've added the SDK and now you can't compile using the Flash IDE - wtf? Easy there cowboy. By using the Flex SDK you won't be using the Flash IDE at all but rather the compiler will generate the SWF from the code. Here is how we do it:

• Run » Open Run Dialog
  
• Right click FDT AS3 Application » New
  
• Complete the groups Project, Main Class & Output
  
• Select the Flex SDK tab
  
• Make sure you Flex_3_SDK_0 is selected
  
• Select the Compiler arguments tab
  
• Here you will change the properties of your SWF like frame rate, size and background colour
  
• Click Apply & Run
  
• Keep an eye on the Console View - it will tell you when the compilation is done or if you have any errors in your code

For a full list of compiler settings see this post by Senocular »

This sdk is the same that is used for Flex Builder, so this means we should be able to compile an MXML file too. Give it a go. Create a simple MXML file and select it as your main class. You should be able to compile this as you would a normal class.


Fig 5a. Run » Open Run Dialog » Right click FDT AS3 Application » New


Fig 5b. Complete Project, Main Class & Output


Fig 5c. Adjust compiler settings as required

Automatic building and cleaning projects

Upon launching Eclipse after successfully installing and creating FDT projects, FDT should automatically build the workspace. This means it checking the codes for errors and warnings and displaying them. This also happens when you save a file. You can clean a project and then re-build it, i.e. refresh FDT if you need to force FDT to re-evaluate your classes. Sometimes the last state of errors are displayed if you open a file and only updates when you alter and save the file. This doesn't happen too often but sometimes can.

Building projects automatically can be by simply deselecting the Build Automatically option in the menu under Projects. Similarly cleaning a project can be done here as well.

Version control

In Eclipse all version control software work in the same way. Everything happens from the Team view and is mostly accessed through the context menu.

Basics: How to use SVN and Eclipse

Retrieving files

• Install the Subclipse plug-in using the update site http://subclipse.tigris.org/update_1.2.x
  
• Restart Eclipse
  
• If the SVN Repository view is not open then open it like so
  


• Window » Show view » Other
  
• SVN
  
• SVN Repository
  


• Right click on the view and select New » Repository location
  
• Type in the url to the repository location e.g. http://papervision3d.googlecode.com/svn/
  
• Right click on the new repository and select Checkout
  
• Select Check out as a project in the workspace
  
• Click Next if you want to checkout to another workspace otherwise you can hit Finish
  

Adding a project to a repository

• Right click on the project in Flash Explorer
  
• Team » Share Project... » SVN » Next » Use project name as folder name » Finish » OK

Committing changes

• Right click on File(s)
  
• Team » Commit

Basics: How to use the VSS Eclipse plug-in

• Download the latest plug-in files from sourceforge http://sourceforge.net/projects/vssplugin/ »
  
• Extract this into your root eclipse installation folder
  
• Restart Eclipse if open
  
• Create a new Flash Project (requires that FDT is installed)
  
• Right click on the project and select Team » Share project
  
• Select VSS Configuration Wizard
  
• Enter username
  
• Enter password
  
• VSS Directory: Browse to folder location of srcsafe.ini
  
• Relative mountpoint: Browse to the project you want to link to and click ok
  
• Click on Finish
  
• Right click on the project and "get latest version". This will copy all the latest files from the repository to your machine.
  
• Right click on project Team » Update State. This will update the checkout status so you can see if someone else is working on specific files

Hopefully this post will help some people to get started with Eclipse and FDT. I know it took me along time to understand everything and I think a starter document like this would have been very handy. Well, sharing is caring. How cheesy is that?