Posted in
Tips
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.
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.
| Next > | |
|---|---|
