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
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/
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.
Which makes me wonder, what’s in your snippets, Lee?
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.
Lee,
Great work. It will save me much time.
Thank you for the Snip Tree View plugin!
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)...
Any reason your plugin shouldn’t work with Flex Builder 3.0.2?
How do I get the cfeclipse toolbar to be hidden? Thanks for these posts, they are very helpful.
Nevermind. I figured it out.
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?”
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.
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)?
@George Yes. You can read about this plugin at http://theflashblog.com/?p=482.
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).
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.
Is there a way to get the auto import statements working in eclipse like it did in flex?
All I can say is brilliant. I tried all sorts of things to remove that stupid CFEclipse bar…
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.
How can I hide the menu bar in eclipse?
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.
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
The link to the insert_snippet plug-in doesn’t work (404).
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.
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.
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.
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.
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!
@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.
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 ?