Over a million developers have joined DZone.

Adding a new editorAction for Orion

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

In case you have not heard it yet, Orion is the new Web IDE from Eclipse. In a blog entry introducing Orion, I said that this one is going to stand out from the crowd and going to rule the world. Why can't the other Web IDEs do that? Because, Orion also would be walking the path of Eclipse, providing the ability to customize and extend. Now with Orion 0.2 M5, you can extend the editor and provide your own editorAction. This is the first and only "extension point" available, but for sure, more will follow.

For this tip, we are going to add a Dictionary look up action to the editor. The action will open up Google Dictionary in a popup window for the selected text in the editor. Yes, popup windows are so ugly, and a div would be lot better, I'll do the beautification later, so for now disable your popup blockers.

 

The extension is a simple HTML file. The beauty of this extension is that you don't need to 'deploy' anything to the server to make this happen. Everything can be done from the client side. Download & Start the Orion Sample Server. Open View Registry page. In the text box on the top right, type http://eclipse-tips.com/orion/dictionary.html and click Install. Now if you open an editor, you would see the Eclipse Tips icon:

 

If you select a text in the editor and click the icon (or press the shortcut Alt+Shift+D), you would see the new  Google Dictionary popup.

dictionary popup

In Orion, most of the API provided are Services. Look at the documentation for the list of Services available. To extend the editorAction, you need to create a PluginProvider and register a callback function for your action. You also need to provide other details such as name, icon & shortcut key. Your function will be called with the current selection in the editor along with the whole contents of the editor and where exactly your text is selected. For this plugin we are going to use only the current selection and use that to open the popup window. The run method of the action is single line:

window.open('http://www.google.com/dictionary?langpair=en|en&hl=en&
aq=f&q='+selectedText+ '&dict=L', 'google_dictionary', 'width=600,height=400,resizable=yes,scrollbars=yes')

 

The method along with the information of that is given to the provider:

provider.registerServiceProvider("editorAction", {
info : function() {
return {
name : "Dictionary",
img : "http://eclipse-tips.com/favicon.ico",
key : [ "d", false, true, true ]
};
},
run : function(selectedText, text, selection) {
window.open('http://www.google.com/dictionary?langpair=en|en&hl=en&aq=f&q='+selectedText+ '&dict=L',
'google_dictionary',
'width=600,height=400,resizable=yes,scrollbars=yes');
}
});

And then this code is called on the page load. So the entire contents of the HTML is:

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/orion-plugin.js"></script>
<script>
window.onload = function() {
var provider = new eclipse.PluginProvider();
provider.registerServiceProvider("editorAction", {
info : function() {
return {
name : "Dictionary",
img : "http://eclipse-tips.com/favicon.ico",
key : [ "d", false, true, true ]
};
},
run : function(selectedText, text, selection) {
window.open('http://www.google.com/dictionary?langpair=en|en&hl=en&aq=f&q='+selectedText+ '&dict=L',
'google_dictionary',
'width=600,height=400,resizable=yes,scrollbars=yes');
}
});
provider.connect();
};
</script>
</head>
<body>This is a dictionary extension for Orion</body>
</html>

Since the orion-plugin.js is loaded along with your HTML, you can have relative path there. But the image is loaded in the editor with an img tag, so it has to be absolute path. The shortcut key I've defined is Alt-Shift-d. You can choose the modifiers by passing in the true/false appropriately. See the Keybinding documentation for details. The contents of the body doesn't matter, as its only used as an info when someone sees the html in the browser.

 

From http://eclipse-tips.com/tips/38-adding-a-new-editoraction-for-orion

Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}