Pimp My Eclipse – Part 2

Ok so I’ll assume that you took my advice and installed Eclipse 3.4 with the Flex Builder plugin. I’ll only be testing things on Mac and Windows on this latest version of Eclipse. The focus of this post will be on implementing snippets in Eclipse. If you are using FDT then you already have some great templating features at your disposal. If you’re using Flex Builder then you will have to improvise, at least until Flex 4 hits the streets. Let’s now take a look at your options.

WST Snippets Panel
A popular choice for snippets in Eclipse is the Snippets panel from the Web Tools Platform plugin. To get it, go to Help > Software Updates. Click on the Available Software tab and then twirl down the Web Tools (WTP) Update Site section. Check off the Web Tools Platform (WTP) 3.0.3 check box and then click to install. This snippets panel is very powerful as it allows you to define variables in your snippets. When you click to insert a snippet you will be prompted to fill in the variables. The biggest downside of this panel is that you have to click to insert a snippet. There doesn’t appear to be any way to insert a snippet via some trigger text ala TextMate. This is a deal breaker for me.

Eclipse Monkey
Another powerful way to insert snippets is via Eclipse Monkey. This is similar to Grease Monkey as it allows you to use JavaScript to control Eclipse. This enables you to basically do anything you want. There are already some great examples out there for ActionScript development. To install Eclipse Monkey, follow the same procedure as for WST but go to Europa Discovery Site > Other Tools > Eclipse Monkey and install the plugin. To create a snippet you have to essentially create a Javascript file that you can assign to a keyboard shortcut. Since you are scripting, you can do anything you want and it is much more powerful than any other option. The downsides are that it is considerably more work to create a snippet and there is also no panel for viewing your snippets. This option is powerful but is too much work for my liking.

Snip Tree View
This is my favorite option of the bunch. The Snip Tree View panel come as part of the CFEclipse plugin. To install CFEclipse you will need to again go to software update but this time add a new site by clicking Add Site. Enter http://www.cfeclipse.org/update and then twirl down the site. Under Cutting Edge check off the 1.3.2 beta check box and install it. So why do I like this option the best? First off it is the closest to the functionality found in TextMate. You can assign trigger text to a snippet and also define variables. When inserting the text you will prompted to fill in the variables. The panel itself is also very well designed which is important to me.

Now there are couple of important things to note about the above options. Firstly, the keyboard functionality in Eclipse Monkey and Snip Tree View will not work when editing MXML files. If you work in some MXML and then start editing an AS file it will still not work. I have to restart Eclipse to get it to work again. I have no idea why this is. You can still click to insert snippets when in MXML mode though.

Another problem with Snip Tree View is that the CFEclipse toolbar must be visible in order to get the keyboard control to work. This toolbar contains a ton of things and is very unsightly. My solution to this was to write a plugin whose only job is to call the insert snippet command in the CFEclipse plugin. This way you only have to have the nice icon from my plugin visible. As you can tell, an editor’s UI is very important to me. To install this plugin download the ZIP file and extract the contents to your eclipse/plugins folder. When you relaunch Eclipse you should see the new icon in your toolbar. I’ve highlighted it in the screenshot below. If you don’t see it you need to customize your perspective to include the Insert Snippet toolbar. I modified to the keyboard shortcut for this command to Shift-Space which makes it very fast for me to insert a snippet. You can make it whatever you want.

Until next time,
Lee

Comments

  1. December 2nd, 2008 | 2:19 am

    [...] via [...]

  2. December 2nd, 2008 | 6:00 am

    Great post Lee.
    I found templating with Eclipse monkey the most easy and performing way to automate code completion within an eclipse installation with flexbuilder plugin.
    I wrote something on how to setup eclipse monkey for actionscript development here few weeks ago
    http://www.flashfuck.it/2008/10/21/auto-generate-getters-setters-and-custom-code-in-flex-builder/

  3. December 2nd, 2008 | 7:21 am

    Lee, what would you say is your primary app workflow ( not necessarily your prefered ) ? The best I can come up with is Textmate for Flash/PHP only work, and Zend Studio with the Flex Plugin for my Flex/PHP/Remoting work. I haven’t gotten into Zend as much as I’d like, your endorsement ( if that’s the right word ) of Zend has stimulated me to try Zend Studio tho. The problem with Zend Studio is that ( I think ) it’s the older version of Eclipse, and they don’t offer a Plugin for Eclipse like Adobe has a Flex plugin. What circumsgtances do you use Eclipse w/Flex Plugin, Zend Studio, and Textmate in any combination.

    In any case, your tutorials are great. Please keep em comming.

  4. December 2nd, 2008 | 8:35 am

    Which makes me wonder, what’s in your snippets, Lee?

  5. Rom
    December 2nd, 2008 | 8:41 am

    Hey Lee when are you going to make the Ribbit tutorial available? Man please do it fast – just because of your this delay I can lose up to 30 K. :-)

  6. iamdave_md
    December 2nd, 2008 | 8:55 am

    Lee,
    Great work. It will save me much time.

  7. Naga
    December 2nd, 2008 | 9:05 am

    Thank you for the Snip Tree View plugin!

  8. VV
    December 2nd, 2008 | 9:49 am

    Lee, thanks for great tips. Personally I wouldn’t be able to survive in Eclipse without GIT plugin (http://git.or.cz/gitwiki/EclipsePlugin, resp. http://cho.hapgoods.com/wordpress/?p=159)...

  9. December 2nd, 2008 | 9:53 am

    Any reason your plugin shouldn’t work with Flex Builder 3.0.2?

  10. David Harsha
    December 2nd, 2008 | 10:34 am

    How do I get the cfeclipse toolbar to be hidden? Thanks for these posts, they are very helpful.

  11. David Harsha
    December 2nd, 2008 | 10:53 am

    Nevermind. I figured it out.

  12. December 2nd, 2008 | 1:10 pm

    Hey Lee, maybe you can help me out with this. I only see a “web developer tools” plugin from the ganymede discovery site. Should I be looking for something specifically called “Web Tools Platform?”

  13. Peter
    December 2nd, 2008 | 3:44 pm

    To: Bryan Bartow – I had same problem, but I solved this problem using small hack (I’m sorry Lee :) ). I deleted some rows from plugin Manifest file (META-INF/MANIFEST.MF).

    Specifically those:

    Require-Bundle: org.cfeclipse.cfml;bundle-version=”1.3.2″,
    org.eclipse.ui;bundle-version=”3.4.1″

    After Flex Builder starts up, you must enable toolbar from “Customize Perspective -> Commands” and there check “Insert Snippet”. After this, all works well, for me.

    Funny part at the end. If you put all removed rows back to the Manifest file, plugin still works. I don’t know why.

    I hope, this help someone. :)

  14. George
    December 2nd, 2008 | 7:15 pm

    What’s that button with the Flash icon? Do you have Flex/Eclipse setup to automatically initiate a build in the Flash IDE (the way FlashDevelop does)?

  15. lee
    December 2nd, 2008 | 7:51 pm

    @George Yes. You can read about this plugin at http://theflashblog.com/?p=482.

  16. lee
    December 2nd, 2008 | 11:06 pm

    is there a way to make the eclipse interface looks more modern? I just installed the Java Developer edition 3.4.1 and OMG it feels so wrong. Otherwise, I’m looking forward to custom class introspection (or w/e you call it).

  17. December 3rd, 2008 | 12:49 am

    For Flex Builder 3 enhancements check out this post.

    http://www.insideria.com/2008/04/flex-builder-enhancements-snippets-and-todo.html

    With regards to snippets, make sure you back them up. I’m still recovering from the shock after not backing mine up and doing a re-install.

  18. John
    December 3rd, 2008 | 3:36 am

    Is there a way to get the auto import statements working in eclipse like it did in flex?

  19. December 3rd, 2008 | 5:13 am

    All I can say is brilliant. I tried all sorts of things to remove that stupid CFEclipse bar…

  20. John
    December 3rd, 2008 | 5:49 am

    Ignore the last post, a restart seems to have done the trick. I made a custom logo to fit in with the CS4 family

    http://kungpoo.com/eclipseicon.jpg

    it was very rushed and the size isn’t exactly right when it’s lined up (demagnified) but it does the job for me. I haven’t uploaded the .icns because I don’t think adobe will be too happy about it, if there’s enough interest I might do it properly though. Just incase anyone was wondering I just used Myriad Pro Semibold for the text.

  21. December 3rd, 2008 | 7:05 pm

    How can I hide the menu bar in eclipse?

  22. December 9th, 2008 | 1:01 am

    The link to the insert_snippet plug-in doesn’t work (404). It would be so nice to get rid of all those CF icons.

  23. evans
    December 10th, 2008 | 12:36 pm

    hi lee, just wanted to say, i like your tutorials and what you have done with the gotoandlearn website..but the only problem is am in africa and don’t have access to 24hr internet connnection, so i was hoping you would make the tutorials on gotoandlearn FLV so i can download it and learn it at home..THANK YOU VERY MUCH

  24. December 15th, 2008 | 4:13 pm

    The link to the insert_snippet plug-in doesn’t work (404).

  25. January 9th, 2009 | 2:49 pm

    Hi Lee and everyone,

    am I right that if you switch workspace in Eclipse that you can’t see and use your snippets from snip tree view. Can I somehow copy or export/import them from one workspace to another? Or where on my mac are they located?

    thanks,

    Jeff.

  26. January 14th, 2009 | 8:04 pm

    Right now I’m using the WST Snippets panel. It really sucks that there’s no triggers or even keyboard shortcuts, but I’m not willing to install CFEclipse just to get one feature, and I need it to work with MXML files. And writing a JS file just to get a snippet seems counter-productive, even Monkey is powerful.

    It would be great if there was a Snippets panel that had triggers, variables, custom keyboard shortcut assignments. Right now switching to FDT is looking pretty good… their templates and live coding features are pretty impressive. Too bad they don’t have MXML support either.

  27. January 14th, 2009 | 8:06 pm

    What we need from Adobe is some kind of SDK to make it easier for us mere mortals to start making our own FB extensions, similar to how easy it is to make JSFL files for Flash, we need something like that for Flex Builder… and then maybe we’ll have more community initiatives to extend Flex Builder features.

  28. February 3rd, 2009 | 10:08 am

    To answer my own question:

    If you want to use your snippets in another workspace, you can find them in

    {workspace location}\workspace\.metadata\.plugins\org.cfeclipse.cfml\snippets

    Just copy and paste this file in the same folder in your new workspace,

    thanks,

    Jeff.

  29. Rob
    February 27th, 2009 | 12:34 am

    Has anyone been able to get Peter’s hack to work for Flex Builder 3.0.2?

    I tried deleting the lines he cited, I even tried deleting the entire require bundle section. I’ve tried just about every variation and I never see “Insert Snippet” as a checkable option when I go to Customize Perspective > Commands. I only see Insert Snippet under the CFEclipse checkbox but that turns on the whole toolbar again…

    Could someone post some screens so I can see if I’m doing it totally wrong. Thank You!

  30. JD
    April 21st, 2009 | 2:56 am

    @Rob

    Kinda… After struggling through it, I noticed Peter’s hack will allow the icons to appear, but the functionality wasn’t working like it should have (no keyboard shortcuts), at least for me anyway.

    In order to get it working great, there are two important aspects. First, I went in and edited the Manifest file (MF) to have a required Eclipse version of 3.3 INSTEAD of 3.4. Here’s how the “Require-Bundle” section of my MF looks…

    Require-Bundle: org.eclipse.ui,
    org.cfeclipse.cfml;bundle-version=”1.3.2″,
    org.eclipse.core.runtime;bundle-version=”3.3.0″,
    org.eclipse.ui.editors;bundle-version=”3.3.0″,
    org.eclipse.jface.text;bundle-version=”3.3.0″,
    com.adobe.flexbuilder.editors.common;bundle-version=”3.0.214193″
    Bundle-RequiredExecutionEnvironment: J2SE-1.5

    … the other important point to this is you need to edit the MF before you move it to your Flex Builder 3/plugins directory, or else you need to remove the flashblog plugin folder, restart Flex, shutdown Flex, move it back, then finally restart Flex again – while you ask yourself “are snippets really worth it?” – Yeah, they are.

    Lastly, be sure to update the “keys” settings under “Window -> preferences…” as Lee does in his video tutorial here: http://www.gotoandlearn.com/play?id=94 – From there you should be all set.

    Hope that helps anybody trying to get this working in FB3 Standalone. My luck, FB4 will be out in a couple days and I’ll have to hack all this stuff again… haha… In all serious though – snippets are such a time saver. Can’t wait to set up all the different filters and props for different TweenMax configs and PV3D stuff.

    PS: Right on Lee for hooking it up with all these tips/tricks/plugins.

  31. July 21st, 2009 | 4:02 pm

    [...] Not all will help you with ActionScript coding but there are quite a few that will. I use the Snippets panel found in the CFEclipse plug-in, the ToDo panel, and the Status Memory Monitor [...]

  32. August 31st, 2009 | 6:37 pm

    [...] articles that Lee Brimelow wrote about making your Eclipse look better (Pimp my Eclipse part 1, part 2, part 3). There is a lot of stuff from his articles I did no use, but that could be useful [...]

  33. October 7th, 2009 | 9:26 am

    Well the Insert Snippet toolbar does not work under Flash Builder Beta 2.

    Any way to make that work ?

    And is there a way yet to make it work in MXML files ?

Leave a reply