How to compile function extensions for Cloud9 JavaScript IDE

Last weekend, we released Cloud9 IDE in JSConf. eu and the corresponding GitHub project. In four days, the project received 340 people's attention and nearly 50 forks. Cloud9's slogan is "IED created by Javascripters for Javascripters", which is a bit recursive and means you can use the ide to make it more powerful. At the beginning of the Cloud9 project, pay special attention to this. Each function in Cloud9 is an extension ). When starting the IED, we use the excellent requireJS library to load all the extensions. The front-end UI uses ajax.org platform (APT), which makes it easy to modularize the Cloud9 user interface. The following describes in detail how to write extensions for Cloud9.

The lifecycle of an extension starts from its use as a module of requireJS. I will briefly describe the basic syntax of requireJS. For more information about requireJS, see this document. One extension depends on other extensions and some core modules. We will compile an extension for formatting the JSON code selected in the editor. This extension depends on core modules: core/ide, core/ext, core/util, and editor Management Extensions: ext/editors. let's call this extension formatjson and place it under the ext folder.

Require. def ("ext/formatjson ",
["Core/ide ",
"Core/ext ",
"Core/util ",
"Ext/editors ",
"Text! Ext/formatjson. xml "],
Function (ide, ext, util, editors, markup ){

Return ext. register ("ext/formatjson ",{
// Object definition
});

}
);

Require. def: the first parameter identifies the extension name. In the second parameter, ide, ext, util, and editors indicate the object reference of the extension dependency, the fifth dependency of formatjson extension is the xml file loaded as a text. 'Text! 'Syntax tells requireJS not to parse the file introduced by the parameter into javascript, and only return the content as text. After all dependencies are loaded, the callback function represented by the third parameter will be called. In the callback function, our extension is registered to the Extension Manager. Let's take a look at the structure of the extension file.

{    name   : "JSON Formatter",    dev    : "Your Name Here",    alone  : true,    type   : ext.GENERAL,    markup : markup,    hook    : function(){},    init    : function(){},    enable  : function(){},    disable : function(){},    destroy : function(){}}

Details about attributes and methods:

Attribute

Attribute name	Required?	Description
Name	Required	Extended name for display in Manager
Dev	Optional	Developer name, which is displayed in the extended manager mainly to honor developers
Alone	Optional	Boolean value, which indicates whether the extension is an independent extension or a sub-extension of an extension.
Type	Optional	Extension type. Currently, only ext. GENERAL and ext. EDITOR are supported. This attribute is likely to be discarded in future versions.
Markup	Optional	String, the markup text defined by the extended UI
Visible	Optional	Boolean value indicates whether the extension is visible during loading. This attribute is only valid for Panel extension.

 

Method

Method Name	Required	Description
Hook	Optional	This method is called during extension registration, allowing you to delay extension initialization. For example, you can add a menu item to initialize the extension. During initialization, the value of the markup parameter is parsed and the init method is called. If no hook method is defined, the extension registration will be initialized immediately. After you specify a hook, You have to initialize the extension. Extension Initialization is completed by calling ext. initExtension (_ self);, where _ self is. Panel extension references. Panel hook functions usually have only one declaration: panels. register (this );
Init	Required	This function is called after the UI markup mark string is parsed during initialization. Make all the extended elements introduced in the markup available and correspond to the correct position. This function is also called when the extension is started in the Extension Manager. For editor-type extensions, the first parameter is the tab page element, indicating that the extension can be used to fill its UI. for Panel, the first parameter should be set to this. panel transmits a panel element (usually a window element) on the Cloud9 UI ).
Enable	Required	Called when the frontend enables the extension. This function is called immediately when you click a panel extension in the front-end menu (for example, this action is displayed after a menu item is clicked ). Do not confuse the enable or disable extension in the Extension Manager. enable or disable extension calls destroy and init methods.
Disable	Required	Called when the frontend disables an extension. This function is called immediately when you click hide panel extension in the front-end menu (for example, this action is not displayed after a menu item is clicked ). Do not confuse the enable or disable extension in the Extension Manager. enable or disable extension calls destroy and init methods.
Destroy	Required	Called when the extension is canceled. Clear the introduced UI elements, event processors, and other States when logging out. Called when the extension is disabled in the Extension Manager.

1 2 3 4 Next Page