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.
- Download Eclipse 3.1
- Extract the .zip file to "install" it. I extracted mine to C:\Program Files (there is no setup wizard).
- 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:
- wtp-wst-0.7.zip (This is the web standards subproject)
- 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.
- Now that the appropriate plugins are installed, we need to configure Eclipse to recognize .mxml.
- Start Eclipse
- 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.
- 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
- Click OK to close the preferences window.
- 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!