Flash Snippets panel for Flash Builder 4

I am releasing an early test version of the snippets panel that I have been working on for Flash Builder 4. Now this panel is essentially a re-skinned version of the great SnipTreeView panel that I modified to also work with MXML files. Now when I say this is an early version I really do mean it. Expect it not to work and if it does, well you will be pleasantly surprised then. Download the JAR file and place it into your Eclipse plugin folder. I am only really targeting Flash Builder 4 but you can try your luck with Flex Builder 3.

Please watch the video below to see how to use the panel and let me know in the comments if it worked for you. If it didn’t please let me know your OS, Eclipse version, and Builder version. Hope you like it!


Pimp My Eclipse – Part 3

Update: Last night I uploaded a slightly wrong version. Please redownload and install this to be sure things work smoothly. Sorry about that.

So I have now developed a new plugin project that contains the previous two that I have blogged about. Keeping everything I’m doing in a single plugin project makes it a lot easier to keep track of and update. I have also added a new feature. The CFEclipse plugin contains a button to launch a color picker. This works fairly well but I wanted one that would format the color in the octal format that ActionScript expects. Their plugin also doesn’t properly position the cursor after insertion. Check out the screenshot below to see the new toolbar containing Flash Test, Insert Snippet, and Insert Color.

To install the plugin, download the ZIP file and extract the contents into your Eclipse 3.4 installation. Make sure you remove the previous plugins that may have installed from me. You can go into the Eclipse preferences and add or modify the keyboard shortcuts for these items.

I’m about to start working on turning my Project Builder AIR application into an Eclipse plugin. This will make things smooth. Let me know if you have other ideas for the plugin.


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,

Pimp My Eclipse – Part 1

As you can tell from the last few posts, I’m currently obsessed with customizing Eclipse to make it a better environment for writing ActionScript. This is the first in a series of posts talking about the things I’m doing to make Eclipse a more enjoyable experience. I should note that a while back I came across a post called Pimp my ‘clipse on Mims Wright’s blog. This post talked about various plugins that can enhance Eclipse. Hopefully Mims is ok with me riffing off his post title :-) . Ok let’s get started.

Eclipse Version
The first thing to talk about is what version of Eclipse you will be using. In my opinion it is better to download the latest stable release of Eclipse rather than using the standalone versions of products like Flex Builder or FDT. This way you can take advantage of the latest features and plugins coming out of the Eclipse community. I’m using Eclipse 3.4.1 which I got by downloading the Eclipse for Java Developers package.

ActionScript Editor
Here is the point where there will be a lot of disagreement. Basically you have two options, Flex Builder and FDT. Flex Builder 3 costs $249 but can also be gotten for free if you’re a student. FDT comes in three different versions, the cheapest being $416. Now to the tricky part. Which is a better AS editor? Unfortunately the answer isn’t an easy one. Flex Builder’s biggest plus is that it is not just an ActionScript editor as it is also the only full-featured IDE for doing Flex development. This is huge if you are doing, or thing you may be doing any Flex work. The word on the street is that FDT is working on MXML support but I haven’t heard any time frame on this. For pure ActionScript development, FDT has many features that Flex Builder doesn’t have. If you only do pure AS development, FDT may be a better choice. For me, I’m using Flex Builder as I occasionally do projects that use the Flex framework. Whichever tool you choose, download the plugin version of the product and install it into the Eclipse installation I talked about in the last section.

Eclipse Icon

Ok this one is purely cosmetic. I hate the standard Eclipse icon and I hate seeing it in the dock. I found a replacement icon using Google images. Unfortunately the site it came from was down so I can’t give them credit. I took the PNG and created .ico and .icns versions which you can use if you want. See the screenshot at the right for how it looks in my dock. Much better in my opinion.

Splash Screen
One thing uglier than the icon is the splash screen. This one is a little harder to change. Luckily there is a nice plugin called Random Splash Screen that allows you to customize it. Download this plugin and put it into your Eclipse plugins folder. Restart Eclipse and then go into the Preferences window. Under the General section you should see the Random Splash Screen option. From the preferences screen you can click to the pick link to choose a new splash screen. I created a simple one that you can use or you can take a shot at something better. You can see my version below.

In the next installment I’ll talk about some important plugins you should install to make Eclipse into a lean, mean, ActionScript machine.