Tuesday, June 14, 2011

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.

No comments:

Post a Comment