How to compile function extensions for Cloud9 JavaScript IDE

Source: Internet
Author: User

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 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 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 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.