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.
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 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.
No comments:
Post a Comment