Skip to main content

Moving MY IDE in the CLOUD

Posted by lamine_ba on October 1, 2012 at 12:52 PM PDT

STUPIDITY is the next level to INTELLIGENCE
Anonymous

INTRODUCTION

Ladies and Gentlemen, right now the web is really living an exciting time. Even in my craziest dreams, I would have never thought that one day I would have the chance to write this blog post and to share with you the story of how I was able to build for my web application, a virtual editor that can run in the cloud and that can embed with an insolent ease any JavaScript SOURCE CODE or WYSIWYG editors. But no story does come without the rise of a need and the more I'm programming and the more I'm convinced that Eclipse, NetBeans and such are not the right tools for us to build quickly a web application when we are all seeing the mismatch between the two contexts in which both are running. So it is with an immense pride that I'm fully endorsing projects like Eclipse Orion for the great work they are doing in showing us the right way to how to become a more ambitious community.

TRANSFORMING MY WEB APPLICATION INTO MY IDE

Ladies and Gentlemen, like the universe, I will extend my web application to make it be my IDE with just the simple use of back-end modules that one can download or use remotely from my platform. But you must keep a note that such story cannot be written with the stateful nature of JSF. And that to make it possible, we have to replace in this case, the wrong concept of a Managed Bean by that of a true Stateless Restful web service written with a scripting language like Groovy and to continue to use all the other goodness in JSF. And Facelets is really one of those since it is really on top of it that I have built my amazing Multi-Templating System [ Metamorfaces ]. And when my Client-Side Oriented Java web application framework, [ YouControl ] will be released, maybe you will give it a try and appreciate as much as possible the great pleasure of using a Facelets Template remotely.

THE ARCHITECTURE OF A MODULE

Ladies and Gentlemen, assuredly the story is quite simple. Like for a Template and a Plugin, a Module has a metadata and like for a JAX-RS web service, it is bound to a path. And if you have the great chance to have it installed locally in your application, surely it is stored under the modules directory.

Modules Directory

And there is no difference between a front-end and a back-end module except the fact that the last one is bound to an url which does start with the /admin path. And that surely only a back-end template can show the pages of a back-end module so that we can have the concept of a web application that has TWO FACES. Wooow! Again, what kind of crazy story that one is?

Module Metadata

  1. <module path="/admin/modules">
  2.  
  3.         <name>Module Manager</name>
  4.         <creationDate>14/12/2011</creationDate>
  5.         <author>Mamadou Lamine Ba</author>
  6.         <copyright>lamine_ba:creations</copyright>
  7.         <authorEmail>laminba2003@yahoo.fr</authorEmail>
  8.         <authorUrl>http://www.java.net/blog/120355</authorUrl>
  9.         <version>1.0</version>
  10.         <license>GPL</license>
  11.         <description>Modules Management System</description>
  12.         <menus>
  13.            <menu label="Extensions">
  14.                 <menuitem  label="Modules" view="/"/>
  15.            </menu>
  16.         </menus>
  17. </module>

MY PLUGGABLE VIRTUAL EDITOR

Ladies and Gentlemen, assuredly SIMPLICITY IS THE KEY. I have created WITH A LOT OF HUMILITY, a pluggable virtual editor packaged into a reusable component that can display any file

  1. <c:fileEditor folder="modules/customers"/>

And maybe to open your Groovy, your xhtml, your images, your markdown files, you will use ?

Orion Editor
ACE Editor
Code Mirror
Edit Area
CLEditor
CKEditor
EpicEditor
Image Flow
Wmu Slider
Flex Slider

Plugin Skeleton

plugin.js

  1. (function(environment){
  2.  
  3. var MyEditor = {
  4.      
  5.       scripts:["dependency1.js","dependency2.js"],
  6.       styles:["mystyle.css"],
  7.       canOpen:function(file){
  8.            return !file.isImage() && !file.isFolder();
  9.       },
  10.       open:function(tab){
  11.      
  12.            tab.display(function(data){
  13.                 //render the content of the file on the tab                  
  14.            });
  15.      
  16.      }
  17.      
  18. };
  19.  
  20. environment.register("MyEditor",MyEditor);
  21.  
  22. })(environment);
  23.  
  24.  

To see them in action, just select a file or a folder and click on the Open With Button....






twitter : lamine_ba

 

AttachmentSize
editors.PNG2.72 KB
modules.PNG2.7 KB
moduleManager.PNG4.82 KB
CLEditor.png5.4 KB
ACE-Editor.png237.54 KB
CKEditor.png2.69 KB
CodeMirror.png10.51 KB
EditArea.png22.8 KB
ckeditor_screenshot.png59.68 KB
ImageFlow.png169.99 KB
WmuSlider.png200.56 KB
FlexSlider.png339.02 KB
editor-skeleton.PNG2.96 KB
moduleManager.PNG75.33 KB
virtual-editor.PNG59.33 KB
openWithButton.PNG10.35 KB
open-With-Button.PNG11.49 KB
orion-editor.png33.71 KB
orion-plugin.png3.07 KB