Basic Layout of the IDE

1.Motivation

The main objective of this deliverable is to build the basic GUI for the proposed Web-based IDE with proper layout and basic drag and drop functionalities. The same layout will be used for the future work to include more functionality to all the elements in the GUI.

2.Goal

The goal of developing the basic layout of the IDE is to start the real working for the web-based IDE and also to implement all the basic features using the knowledge gained from the previous two deliverables.

3.Implementation

The basic layout developed is accomplished in three steps namely Developing the basic layout, Developing the drop downs and Creating the XHTML elements.The open source libraries required to develop the above functionalities are jquery.min.js, jquery.treeview.js, and jquery-ui.js.
Developing the basic layout:
The complete layout of the IDE is mainly categorized as the following

• Horizontal Navigation Bar
• File system
  • Project div
  • Controller div
• View
  • Page view
  • Code view
• HTML tool bar

Horizontal navigation bar is the one which is similar to that of any IDE which includes file, edit, search, project and help. Each in turn has its own drop down of options. Project div is the Tree-view listing of the projects saved to the saved by the developer. Controller div is the vertical dropdown list where in the entire collection of controller files (a kind of libraries) on the server are listed, each in turn has the list of the functions in it.

Creating the Draggable and Droppable objects:
In order to create a Draggable object we need to call draggable( ), to add extra features to it we can use some options like helper, cursor, drag etc, and specify the action needed. In this case in order to get a clone of the object that is dragged and the change of cursor I used clone an d move as my values to the options.
The developer is given option of viewing both the page view and the code view. Whenever he drops an HTML tag from the toolbar the element appears in the page view and the corresponding code will appear in the code view. HTML tool bar is the one the developer uses to create the XHTML pages by dragging these elements on to the page view or code view.The basic layout without any functionality developed using basic HTML div and ul tags and CSS.

Developing the drop downs:
Each element in the horizontal navigation bar has a drop down which will be triggered by a mouseover event. For making the IDE user friendly and include the drop down functionality of the Controller files, the drop down list of the Controller files which contain only the function names will be triggered by a mouseclick event on the controller file.

This is achieved by adding the following functions.

node.onclick=function() {
	this.className+=" over";}
	node.onmouseout=function() {
	this.className=this.className.replace(" over", "");
}

Creating the XHTML elements:
The elements listed on the right hand side table of the IDE list all the HTML lists. On a drag and drop of these elements on the view component we can obtain the preview of the HTML document created. In order to obtain the link with the controller functions the user has to drag and drop the HTML elements on to the controller files. A working of the basic layout which includes the title tag, a button and a table. These elements can be dropped on the controller files to obtain the link to the functions.

4.Remarks

The Layout developed includes all the basic functionality of the drop downs and the drag and drops of the IDE. This deliverable made be accomplish the basic foundation of the IDE and gave me knowledge of the technical concepts needed to work further. All the future work on the Web-based IDE will be on the top of this layout.

5.Code