Skip to content

Perspective

Descriptors


To contribute a new Perspective to the Web IDE you need to create one model (*.extension) and one descriptor (in *.js) files in your project:

my-perspective.extension

{
    "module": "my-project/services/my-perspective.js",
    "extensionPoint": "ide-perspective",
    "description": "The description of my perspective"
}
  • module - Points to the corresponding perspective descriptor (see below).
  • extensionPoint - Where and how this perspective will be shown. Some of the possible values are:

    • ide-perspective
    • ide-view
    • ide-editor
    • ide-database-menu
    • ide-documents-content-type
    • ide-workspace-menu-new-template

my-perspective.js

exports.getPerspective = function() {
    var perspective = {
        name: "My Perspective",
        link: "../my-project/index.html",
        order: "901",
        image: "files-o"
    };
    return perspective;
};
  • name - The exact name of the perspective.
  • link - The location within the same or external project pointing to the entry HTML file which will be rendered as a perspective
  • order - Used to sort the perspective tabs in the sidebar.
  • image - The name of the image which will be used for this perspective. This is a Font awesome icon name.

The project structure in this case should look like this:

| my-project
|---- extensions
     |----> my-perspective.extension
|---- services
     |----> my-perspective.js
|---- index.html
|---- js
|---- css
|---- ...

The names of the extensions and services can be different following the layout of your project.


Implementation


In general you can embed any valid HTML in the index.html file and it will be rendered in the place where the perspective should be embedded.

For a full example you can look at sample-ide-perspective.

For а real world example you can look at Database Perspective Project.

Back to top