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.

No comments:

Post a Comment