Base Classes

A plugin is always an instance of Plugin() either in it's pure vanilla form or one of the many classes that are based on it. These classes all provide additional functionality on top of the base Plugin() features, which include event handling and management of resources used by the plugin for easy loading and unloading. Other classes add unique features that can be re-used throughout Cloud9. For instance the Editor() class serves as the base class for any of the editor components.

Here's an incomplete list of the different types of base classes:

• Dialog
• Panel
• Editor
• MountTab
• DebuggerPanel
• CollabPane
• PreferencePanel

The code for creating a basic plugin is this:

JavaScript

var plugin = new Plugin("Your Name", main.consumes);
var emit = plugin.getEmitter();

plugin.on("load", function(){ });
plugin.on("unload", function(){ });

plugin.freezePublicAPI({
    show: show
});

Some of the base classes allow for setting extra options to create the instance. These options are always passed as the 3rd argument to the constructor.

JavaScript

var plugin = new Dialog("Your Name", main.consumes, {
    name: "my-plugin-name",
    allowClose: true,
    title: "Some Title"
});

Base classes often also introduce new events to the life cycle of the plugin. For instance the Dialog base class adds these events:

JavaScript

plugin.on("draw", function(e){ });
plugin.on("show", function(){ });
plugin.on("hide", function(){ });

One Base Class per Plugin

📘

Rule of Thumb

Only include one base class per plugin.

For instance, If your package needs to interact with one or more dialogs. Create one or more plugins, one for each dialog. Provide an API for your dialog and access that interface by importing the dialog in your plugin (via main.consumes).

Creating your own Base Class

To create your own base class use the plugin.baseclass() method to mark your class as such.

JavaScript

define(function(require, module, exports) {
    main.consumes = ["Plugin", "ui"];
    main.provides = ["MyBaseClass"];
    return main;
    
    function main(options, imports, register) {
        var ui = imports.ui;

        function MyBaseClass(developer, deps, options) {
            var plugin = new Plugin(developer, deps.concat(main.consumes));
            var emit = plugin.getEmitter();
            
            // Get the name from the options (optional)
            var name = options.name;
            
            // Mark this plugin as a base class
            plugin.baseclass();
            
            // Set the public API (Plugin won't be frozen)
            plugin.freezePublicAPI({
                
            });
            
            // Set default name (will append integer)
            plugin.load(name, "myclass");
    
            return plugin;
        }
        
        register(null, {
            MyBaseClass: MyBaseClass
        });
    }
});