如何编写 Cloud9 JavaScript IDE 的功能扩展(2)

实现 Format JSON扩展

好，现在我们已经有了基本概念，让我们开始真正来实现 format json扩展。首先完成我们需要属性和方法。我将添加一nodes数组，其中包含该扩展所需的所有UI元素。我们用hook方法来创建一个菜单来初始化formatjson扩展，并显示一个格式化窗口接受用户输入的缩进值。代码如下：

{ name : "JSON Formatter", dev : "Ajax.org", alone : true, type : ext.GENERAL, markup : markup, nodes : [], hook : function(){ var _self = this; this.nodes.push( mnuEdit.appendChild(new apf.item({ caption : "Format JSON", onclick : function(){ ext.initExtension(_self); _self.winFormat.show(); } })) ); }, init : function(amlNode){ this.winFormat = winFormat; }, enable : function(){ this.nodes.each(function(item){ item.enable(); }); }, disable : function(){ this.nodes.each(function(item){ item.disable(); }); }, destroy : function(){ this.nodes.each(function(item){ item.destroy(true, true); }); this.nodes = []; this.winFormat.destroy(true, true); } }

在hook方法中创建一个菜单依附到mnuEdit。mnuEdit是对编辑器菜单的全局引用。现在我们的UI元素的名字挂靠在全局命名空间下(可能会在将来的版本中变更)。Cloud9中可用的UI元素表如下，并指定了哪些扩展添加了这个元素。

NameExtensionPurpose
mnuFile       顶部菜单栏的 File 菜单  
mnuEdit       顶部菜单栏的 Edit 菜单  
mnuView       顶部菜单栏的 View菜单  
mnuEditors       view菜单的 editors  
mnuModes       Window菜单的布局菜单  
mnuPanels   ext/panels/panels   顶部菜单栏的windows菜单  
vbMain       布局的主vbox  
tbMain       主菜单栏  
barMenu       菜单  
barTools       主菜单栏的第一栏  
sbMain       底部的状态栏  
mnuFile          
mnuFile          
winDbgConsole   ext/console/console   控制台面板  
tabConsole   ext/console/console   控制台窗口的tab元素  
winFilesViewer   ext/tree/tree   树面板  
trFiles   ext/tree/tree   树面板中的树元素