Tuesday, February 1, 2011

Orion M5 and Plugins

We delivered Orion M5 yesterday and I wanted to talk briefly about a cool new feature that you can try out for yourself, namely Plugins.

Similar to the Eclipse Desktop, in Orion you use plugins to extend the environment. What's different is that an Orion plugin is not something you install into your server. Instead, an Orion plugin is a link to an external site that contains an HTML document and some plugin JavaScript.

The ideas are best illustrated by working through a very quick example where we add a JavaScript beautifier plugin.
  1. Download an Orion stable build unzip and run it. Here's some instructions to help get you started.
  2. Connect and login into Orion - http://localhost:8080/
  3. Navigate down to org.eclipse.orion.client.core/static/js/compiled/coding-editor.js -- shortcut
  4. Think to yourself oh snap minified JavaScript, I'm hosed.
  5. Open a new tab and go to the Plugin Registry page -- http://localhost:8080/view-registry.html
  6. Paste the following URL (http://jsbeautifier.org/orion/jsbeautify.html) into the install box on the right and click install. If you mess up click the red "X" to clear the registry and start again.
  7. Return to your editor tab and refresh the page.
  8. You should see a new "bat" icon on the action tab right next to coding-editor. Click it.
  9. Bask in the glory that is well formatted JavaScript with minified variable names
All the interactions here are browser-side with no server involvement other than to provide the HTML page. Instead, Orion's opening an iframe (and eventually a web worker) and then using cross-document messaging to get the plugin to perform the "editorAction".

In terms of the code required to write a plugin you need just one script "orion-plugin.js" as well as your implementation. Here's the HTML for another very simple "editorAction" that you can try out.
<!DOCTYPE html>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script type="text/javascript" src="orion-plugin.js"></script>
  window.onload = function() {
   var provider = new eclipse.PluginProvider();
   provider.registerServiceProvider("editorAction", {
    info : function() {
     return {
      name : "UPPERCASE",
      img : "/favicon.ico",
      key : [ "u", true ]
    run : function(text) {
     return text.toUpperCase();
Files: upper-plugin-example.html, orion-plugin.js

For the moment in M5 "editorAction" is our one and only extension point. We're working on M6 now and figuring out other places where we want to offer similar extensibility. If you have ideas or better still would like to try your hand at writing plugins we'd love for you to get involved. Feel free to visit us on IRC at #eclipse-orion and pipe-in.

Tuesday, January 11, 2011

A New Eclipse WebDev Blog

Today Mike Milinkovich introduced the Eclipse Orion project, something I've been involved in planning while an internal project at IBM and care deeply about. Orion is not our first foray into this space as the platform team experimented a bit more than two years ago first with our own work (demo'ed at Eclipsecon 2008) and then later integrating with what was at the time Mozilla Bespin (now Skywriter).

As a developer I find myself spending an ever increasing amount of time in the browser, developing, testing, and exploring what's possible. The web is not one mega site and what we're envisioning for Orion follows from that. With Orion our emphasis is not on massive in-page integration and instead are looking at what it means to integrate by linking and creating developer tooling that re-uses existing functionality already out there on the Web.

At Eclipse I've been active in web developer tools, server runtimes, and web component integration for some time now. In addition to new work at Orion I know from first-hand experience that there is a hugely valuable body of interesting work going on in the web development space at Eclipse and lots to talk about. This blog is my attempt to in particular shed light on those tools at Eclipse related to web development and detail some of the challenges and ideas generated from the community.