Setting up Eclipse for Flex

| 11 Comments | 4 TrackBacks

So you want to edit .mxml files in Eclipse, and don't want to pay for the oXygen plugin? No problem! This entry will show you how to configure Eclipse for Flex development the open-source way.

I've looked at a few of the XML plugins available (oXygen, XMLBuddy, etc) and from my own personal experience the best option that I've found for Flex development is the Eclipse Web Tools Platform.

The Web Tools Platform consists of two subprojects - j2ee and web standards. The web standards project includes editors for HTML, XML, CSS, etc. Because I'm a ColdFusion developer and don't do j2ee, I'm not interested in the j2ee subproject. By installing the web standards plugin from web tools, you can turn Eclipse in an .mxml editor, and as an added bonus get decent .css support as well.

I'll be showing more about this configuration during my From Flash to Flex talk next week, but for those of you who won't be able to attend and for those who plan on attending but want to jump ahead, here's how you can configure Eclipse for Flex.

  1. Download Eclipse 3.1
  2. Extract the .zip file to "install" it. I extracted mine to C:\Program Files (there is no setup wizard).
  3. Download Web Tools 0.7. Important: You only want the Web Standards project if you don't plan on doing j2ee work. Also, you need to make sure you get all of the requirements (under the blue requirements header) or the plugin won't work. You'll want to get all of these files on the download page:

    • emf-sdo-xsd-SDK-2.1.0.zip

    • GEF-SDK-3.1.zip

    • JEM-SDK-1.1.zip

    • wtp-wst-0.7.zip (This is the web standards subproject)
  4. Extract all of the .zip files to the directory where you extracted Eclipse to (again, mine was C:\Program Files). This installs all of the plugins.
  5. Now that the appropriate plugins are installed, we need to configure Eclipse to recognize .mxml.

    1. Start Eclipse
    2. From the menu, select Window -> Preferences. Select General -> Content Types. On the right, expand Text and highlight XML. Click the "Add" button and enter "*.mxml" as the file type. Click OK.
    3. Still in the Window -> Preferences menu, expand "Web and XML" and select "XML Catalog". Click "User Specified Entries" and click "Add" and use the following values.

      • URI: browse for the path to the mxml.xsd file (something like: C:\Program Files\Macromedia\Flex\extras\schema\mxml.xsd)

      • Key: http://www.macromedia.com/2003/mxml
    4. Click OK to close the preferences window.
  6. All that's left is create a Simple project, and add a new .mxml file. When you open it up, the XML plugin starts off in design view. Click the "source" tab on the bottom left of the content pane to go about your Flex coding as you normally would.

Whenever the web tools XML plugin sees the "http://www.macromedia.com/2003/mxml" namespace, you get full code hinting for both tags (like <mx:Button>) and attributes (like enabled="false"). It may not be an ideal solution (you don't get integrated ActionScript help), but it works pretty good and I've been having success with it.

Now, all you need to do is add a few templates to speed up workflow. The main templates I use are to set up an empty .mxml with mx:Application tags, and also a "sript block" tag to automatically create an mx:Script with CDATA. To edit your templates, go to Window -> Preferences and select "Web and XML" -> "XML Files" -> "XML Templates". The rest of the process should be pretty straightforward. Templates can be accessed via Control+Space (content assist - just look for the template name in the list).

Enjoy, and hopefully I'll see you on Tuesday!

4 TrackBacks

TrackBack URL: http://www.darronschall.com/mt/mt-tb.cgi/64

TITLE: Flex Development: PrimalScript vs. Eclipse URL: http://www.jonathanmalek.com/blog/archive/2005/10/08/510.aspx IP: 216.250.116.20 BLOG NAME: Jonathan Malek's Blog DATE: 10/08/2005 08:07:51 PM Read More

TITLE: Flex Development: PrimalScript vs. Eclipse URL: http://localhost/blog/PermaLink,guid,eab84880-be9a-485a-8ad3-41c761338512.aspx IP: 24.7.147.129 BLOG NAME: Jonathan Malek DATE: 10/10/2005 12:32:01 AM Read More

TITLE: Flex Development: PrimalScript vs. Eclipse URL: http://localhost/blog/PermaLink,guid,01bb05a8-ece9-4900-9f23-ffff7bc79658.aspx IP: 24.7.147.129 BLOG NAME: Jonathan Malek DATE: 10/10/2005 05:42:02 PM Read More

TITLE: Flex Development: PrimalScript vs. Eclipse URL: http://localhost/blog/PermaLink,guid,024a4089-7b0f-47f0-a561-96d5f823d78b.aspx IP: 24.7.147.129 BLOG NAME: Jonathan Malek DATE: 10/10/2005 05:43:35 PM Read More

11 Comments

I really tested that, and really impressive, the way you figure out.


Other cool feature that I really think is much better than wtp is create your own plug-in.

eclipse.org has a inicial tuto how to and than add the chema to you mxml file, will start coding.

But Anyway is really cool your idea.

Darron,

Awesome Job man! This coupled with FDT completely replaces Flex Builder (and then some, FDT is not free, but it is great). I can't wait until Zorn replaces everything :), but until then, this is the best solution. Thanks for posting this thread. This has helped me much.

What would you recommend for AS editor in Eclipse?

You can use the open source ASDT ( http://sourceforge.net/projects/aseclipseplugin/ ) or the commercial FDT ( http://fdt.powerflasher.com/flashsite/flash.htm ).

FDT is a better tool (more advanced features, commercial support), but if you're just looking for a decent free editor, ASDT is the way to go.

Darron, are you aware that if you download the All-in-one build of the WTP you get all the dependencies as well (Eclipse IDE, EMF, GEF and JEM)? This might be overkill based on you not wanting the Java bits and pieces, but it proves easier for me.
I've written The ACME Guide (http://www.stephencollins.org/acme/) which is a pretty comprehensive HOWTO on getting a Macromedia-based setup running on your workstation. It doesn't presently deal with Flex of Laszlo development, but it could... (Hmmm, project for the weekend?)

Dumb question. I've downloaded the right files (afaik), yet in my preferences I do not have Web and XML as a node.

Ray,

My guess is that you're missing a dependency somewhere? I would say double check that you got all of the requirements / depdendices, and that they were all installed to the correct folder.

Never mind - updated and all is well. Thanks for the article!

Hi Darron,

I set up my eclipse and flash integration exactly as you have above. Everything appears to be correct. However, I am a bit confused, and it can probably be due to lack of research on my part, but how do I now setup a new flex project and compile it as well in eclipse? Thanks!

Tonih

I've just set up eclipse to use the mxml and when I have a file with actionscript in it as well as mxml code it complains with the following error message 'An internal error occurred during: "Processing Dirty Regions".'
It works fine with a pure mxml file, but not with a mixture of mxml and as2 code.
Any ideas??

Todd Sharp has updated this (very old) tutorial to work for Flex 2:

http://cfsilence.com/blog/client/index.cfm/2007/3/26/Setting-Up-Eclipse-For-Flex-2

Leave a comment



About this Entry

This page contains a single entry by darron published on August 26, 2005 12:42 PM.

Screenweaver 3 OpenSource now available! was the previous entry in this blog.

From Flash to Flex presentation files is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Archives

OpenID accepted here Learn more about OpenID
Powered by Movable Type 5.02