Consuming the Embeddable Orion Editor

Lately, I have been playing around with Orion a.k.a web-based-ide-from-eclipse and am really enjoying it. More so, because it is very different from the traditional eclipse-based plugin development.


Andrew's blog is a great preview into the capabilities of the Orion Editor.....more importantly, the fact that it can be embedded into any custom application. Well, I tried creating a small application to read the source files that we have in our source repository and render them on my custom editor page (internally running the Orion Editor).  I could have used the Navigator to display my content, but wanted my own good looking explorer to go along with it. Secondly, I also wanted my navigator besides me when I am working with the source code of any one repository file, rather than opening the file contents in a separate browser tab. Well.....I like it that way and I am sure many others do !!!


Let's have a look at the script that embeds the Orion editor into your application. Here it is...

Further explanation of this code is available in this blog. What this is basically doing is, to search for a HTML tag with name, "Orion" and replace it with the editor. Pretty cool and Out-Of-The-Box.....


Now comes the next step and that is to integrate the editor with my Navigator. My Navigator is a dojo tree that displays the repository content. The editor should display the contents of the file selected in the tree. Most importantly the fact that I can't work with the Navigator and the Editor at the same time.


The problem with the above mentioned snippet is that the editor component is created with some content and I need to refresh the editor with the contents of the file selected in my Navigator. The tag that houses the editor now looks something like this...



The HTML tag which houses the editor now has a parent DIV element. The Orion Editor integrated with my custom Navigator looks something like this...

The following java script code snippet recreates a <pre> tag on change of the selection in the Navigator under the parent <DIV> tag and the contents of the newly selected file is passed to the newly created editor. The following javascript snippet does the trick for me....

The snippet disposes off the previously created editor under the parent DIV tag and recreates another DIV tag with id as 'orion'. Hence, every time I select a new file in my Navigator, a NEW Orion editor is created and the contents rendered for me. I can browse through my repository content without having to bother about what happens to the editor and I can view the contents of a file without losing my Navigator.


The next thing that I am going to do is to expose my repository as a Orion plugin and integrate it with Orion. Check this post to understand how to do that. The deterrent, currently is the fact that I cannot work with the Navigator and the Editor together.

Extending the Orion Navigator

Having developed Eclipse plugins for some years now, I thought Orion was just the next logical thing to do, or at least, try. How many people would actually bet on Orion's success as an IDE...Not many! But that's the point. It is not an IDE. It is just another web application. Well, if you liked google docs, you wouldn't hate this either !!


Setting up a local Orion environment isn't a big deal too and soon, I had created an account, logged in and created a couple of folders and files in it. The editor with some "very cool" syntax highlighting and content assist features was a revelation and the fact that I was on a browser didn't really matter. This blog clearly explains the steps to embed the Orion editor into a custom application. But, then came the next big question...How do I extend the Navigator to display content from some other system, such as a repository or a remote server. I didn't want to write new code but wanted to view existing content. Some investigation into the navigator implementation and with the help from some sample plugins already available, i could figure out a way to contribute custom content to the Navigator. Here's how.....


Create the Contributor Plugin
The orion plugin is a simple HTML file. I've named it navigatorContentPlugin.html. The plugin registers a service provider with the orion.core.file service. The plugin provides an implementation of the FileService API. The plugin looks something like this....

Add an empty FetchContentService function to the plugin to make sure that the  plugin installs successfully. Follow the steps here to install the plugin. Refresh the navigator to load the plugin and fetch the custom content. See snapshot below.

Develop the Plugin

Clicking on the node will try and fetch content from /democontent which obviously does not return any workspace item right now. Next, we look at the FileClient API and implement the function loadWorkspace to return content for this node. Below is an implementation of the loadWorkspace function.

Prepare the Response

The link in the url above i.e. /plugins/workspaces.json fetches any folders and files that might be listed under the workspace identified by /democontent.   The response looks something as below..

The above response is rendered onto the Navigator on click of the Demo Content node. See Navigator snapshot below...

For more details on the File Server API for the Orion Client, check this link. In order to render the contents of the file in the Orion editor or to fetch the children of the folder on expanding, try implementing the fetchChildren(location) and the read(location) functions.