如何编写 Cloud9 JavaScript IDE 的功能扩展
上周末我们在JSConf.eu发布了 Cloud9 IDE ,同时发布了对应的GitHub项目。在4天时间里该项目得到340个人的关注和将近50个fork。Cloud9的口号是由"由Javascripters 为Javascripters创建的IED",这口号有点递归,它意味着你可以hack这个ide使它变得更强大。Cloud9项目开始之初就尤其注意考虑这点了;Cloud9中的每一个功能点都是一个扩展(extension)。在IED启动的时候我们用优秀的 requireJS 库加载所有的扩展。前端UI使用 ajax.org platform (apf),apf 使我们轻松地模块化Cloud9的用户界面。下面开始详细介绍怎样为Cloud9编写扩展。 一个扩展的生命周期是从它作为requireJS的模块开始的。我将简述requireJS的基本语法,想深入了解requireJS请参考这个文 档。一个扩展会依赖其他的扩展和一些核心模块。我们将编写一个给编辑器中选定的JSON代码进行格式化的扩展。该扩展依赖核心模块:core/ide, core/ext, core/util 和编辑器管理扩展:ext/editors/editors.让我们称该扩展为formatjson,然后将其置于ext文件夹下。
|
jingxing05
|
require.def第一个参数标识扩展的名字,第二参数中 ide,ext ,util和 editors 代表传入该扩展依赖的对象引用,formatjson扩展的第五个依赖是加载为一个文本的xml文件。 ‘text!’ 语法告诉 requireJS 不要将参数引入的文件解析为 javascript,仅将其中的内容作为文本返回即可。所有依赖加载完毕后将调用第三个参数代表的回调函数,在回调函数中将我们的扩展注册到扩展管理器 中,让我们看看扩展文件的结构。
{name : "JSON Formatter",dev : "Your Name Here",alone : true,type : ext.GENERAL,markup : markup,hook : function(){},init : function(){},enable : function(){},disable : function(){},destroy : function(){} } 属性和方法详解: 属性
|
jingxing05
|
方法
|
jingxing05
|
实现 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元素表如下,并指定了哪些扩展添加了这个元素。
|
jingxing05
|
还有更多建好的元素。可以在各自的扩展或通过DOM/XPath操作找到他们。例如在工具栏和状态栏之间有一个hbox包含3个vbox元素。
<a:hbox><a:vbox /><a:vbox /><a:vbox /> </a:hbox> 可以用XPath选择器来访问元素: vbMain.selectSingleNode("a:hbox/a:vbox[2]"); 这条查询将定位到hbox中的第二个vbox。这个vbox含有了打开的文件tab和控制台面板。然后你可以像我们在formatjson扩展中对菜单的处理方法一样将你想要的元素添加到该vbox。 |
jingxing05
|
MarkupUI 标记然后format json 扩展会弹出个窗口给用户来设置缩进的空格数。我们用aml标记语法来创建这个窗口。我将aml代码放到名为formatjson.xml的xml文件中,并在最外层添加了一个扩展所需的根元素:a:application,看起来像这样: <a:application xmlns:a="http://ajax.org/2005/aml"><!-- Your UI markup here --> </a:application> UI标记可以包含html和 AML元素。我们使用AML的一个下拉列表spinner和两个按钮来描述对json格式化的窗口。 <a:windowid = "winFormat"title = "Format JSON"center = "true"modal = "false"buttons = "close"kbclose = "true"width = "200"><a:vbox><a:hbox padding="5" edge="10"><a:label width="100">Indentation</a:label><a:spinner id="spIndent" flex="1" min="1" max="20" /></a:hbox><a:divider /><a:hbox pack="end" padding="5" edge="10 10 5 10"><a:button default="2" caption="Format" onclick = "require('ext/formatjson/formatjson').format(spIndent.value);"/><a:button οnclick="winFormat.hide()">Done</a:button></a:hbox></a:vbox> </a:window> 格式化按钮绑定了onclick事件来调用我们扩展的format方法,它传入了spinner的值。这就是我们在扩展中需要实现的方法,让我们动手吧。 |
jingxing05
|
自定义函数格式化函数有一个参数,来指定json中缩进的空格数。首先获取当前选择的代码,如果选中的代码为有效的json,则对其格式化,更新到当前选中的代码,否则给用户一个错误提示。 我们需要加载另一个依赖来完成该功能,就是ace编辑器的Range模块。于是我在顶部将ace/Range添加到依赖列表中,然后调用参数"Range"。格式化函数看起来如下(我给每个部分添加了注解)。 {...format : function(indent){//获取当前编辑器var editor = editors.currentEditor;//从当前编辑器获取选中的对象var sel = editor.getSelection();//获取当前的文档对象引用var doc = editor.getDocument();//获取当前选中对象的range对象var range = sel.getRange();//从range对象获取选中的文本var value = doc.getTextRange(range);//尝试将选中的文本转换为JSON,并格式化 //然后再回转为文本字符串,如果出现错误则给用户显示错误.try{value = JSON.stringify(JSON.parse(value), null, indent);}catch(e){util.alert("Invalid JSON", "The selection contains an invalid or incomplete JSON string","Please correct the JSON and try again");return;}//如果格式化成功则用格式化后值替换掉range对象var end = doc.replace(range, value);//用格式化的值更新当前选中的部分 sel.setSelectionRange(Range.fromPoints(range.start, end)); },... } 我们的扩展现在可以使用了,但让我们再添加点东西。 |
jingxing05
|
Key快捷键绑定我希望使用快捷键来使用这个扩展,window使用: Ctrl-Shift-J,mac用Command-Shift-J。Cloud9中用户可以自行配置快捷键。要实现上述功能,还需几个步骤。首先在 ext/keybindings_default文件中为我们的扩展新添windows和mac的默认键绑定部分。 ..."ext" : {..."formatjson" : {"format" : "Ctrl-Shift-J" // Or "Command-Shift-J" for the mac file},... }... 然后必须要让快捷键管理器知道该扩展对什么快捷键响应和显示什么UI元素。添加名为hotkeys和hotitems的hash表: hotkeys : {"format":1},hotitems : {}, 现在你有两种途径为键绑定添加处理器了。直接的方式是在扩展中添加响应方法,方法的名称与hotkeys中指定的名称相同即可,此处就是“format”。因为我们的json格式化扩展有一个菜单来显示快捷键,我更喜欢将响应方法连接到菜单的onclick事件上,这样当我按下快捷键时这个方法被执行。而且当我使用快捷键时这个菜单按钮应该点亮。可以在hotitems哈希表中添加菜单项来达到目的: this.hotitems["format"] = [this.nodes[0]]; 现在我们可以在Tools菜单下的Extendtion Manage中来激活该扩展了,可以观看下面这段视频来看看,如何在3分钟内完成这个扩展。(视频下载) |
jingxing05
|
其他资源
When you need help with creating an extension 在你开发扩展需要帮助的时候请到Cloud9的 Google Group 。可以向github的issue跟踪issue tracker of GitHub提交任何你发现的问题。Cloud9的所有开发者在Twitter上十分活跃。在扩展Cloud9的路上祝你好运。我都等不及要看你会扩展出什么了。 我们非常乐意将你酷毙了的扩展添加为Cloud9的子模块,或者在Github上提交pull request。
玩得开心!
如何编写 Cloud9 JavaScript IDE 的功能扩展相关推荐
- jdk nashorn_Nashorn-JDK 8中Java和JavaScript的组合功能
jdk nashorn 从JDK 6开始,Java附带了基于Mozilla的Rhino的捆绑JavaScript引擎 . 此功能使您可以将JavaScript代码嵌入Java,甚至可以从嵌入式Java ...
- Emacs Lisp 功能扩展集锦
From 参考 Emacs Lisp 功能扩展集锦 session.el desktop.el ibuffer.el browse-kill-ring.el ido.el tabbar.el spee ...
- Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...
- WebStorm——最智能的Javascript IDE
http://www.cnblogs.com/jnoodle/archive/2011/11/15/2250041.html WebStorm是什么? WebStorm是JetBrains的一个专门为 ...
- 从ES5到ESNext-这是自2015年以来添加到JavaScript的所有功能
I wrote this article to help you move from pre-ES6 knowledge of JavaScript and get you quickly up to ...
- 编写高性能JavaScript
编写高性能JavaScript 文本来源:点击打开链接(这个排版比较舒服) 本文来源:http://www.admin10000.com/document/4988.html 很多JavaScript ...
- Vue3官网-可复用组合式API(十四)实例 property(\$slots,\$attrs)、渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能),插件
Vue3官网-可复用&组合式API(十四)实例 property($slots,$attrs).渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能), ...
- 1. WebStorm-The smartest JavaScript IDE 2. Node.js 3. egret
1. WebStorm-The smartest JavaScript IDE(可以作为TypeScript代码编辑器) 2. Node.js 3. egret(http://www.egret-la ...
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能(六)
目的: 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性 ...
最新文章
- 一个GDIPlus的Bug -- OutofMemory异常
- 这次真的是下定决心了
- webstorm 激活方法
- (转)更新Java final常量后,请重新编译你的class
- HH SaaS电商系统的销售订单归档服务
- Pixysoft.Framework.MemoryCache 开发实录
- UVA - 1587 ​​​​​​​Box
- 【OpenCV 例程200篇】94. 算术平均滤波器
- Windows Phone 7 有损 缩略图的生成!
- 水体专题提取与叶绿素a浓度反演
- Windows下vim方式操作软件+Gvim使用
- 2022届秋招笔试题小结:图
- lv官网编码查询_图文讲解,如何免费自主查询商标近似情况
- python 生意参谋操作
- 局域网***原理与防御(网络执法官类)
- java 匿名邮件_java开发邮件发送(匿名)
- 【生产调度】基于Harmony Search (HSPMS) 和 Shuffled Complex Evolution (SCEPMS) 实现并行机器调度附matlab代码
- 如何设置一个按钮 左边方形右边圆形
- IDEA 文件夹颜色对目录的影响分析
- python代码~小人比心表白