Sencha的Eclipse插件提示和技巧

原文：http://www.sencha.com/blog/sencha-eclipse-plugin-tips-tricks/

Sencha的Eclipse插件是一个完整的用于流行的Eclipse IDE的代码辅助和验证插件。有了该插件，就可以获得标准的Sencha Touch（最新的Sencha Eclipse Plugin 1.1）、Ext JS类型以及作为项目一部分定义的自定义类型的代码辅助。在这篇文章中，将展示一些技巧和提示，可以令Sencha Touch开发更高效。

如何配置Sencha的Eclipse项目

在示例中，将开始使用Sencha的CMD生成应用程序并在Eclipse使用插件配置它。

首先，使用Sencha的CMD 3来生成一个Sencha Touch 2.1应用程序的框架。在示例中将创建一个名为abc的应用程序。首先要做的是改变Touch SDK的根目录然后运行以下命令：

sencha generate app abc abc

接着，要导入Sencha Touch类型库。因为该项目基于Sencha Touch 2.1，所以起名为“SenchaTouchTL-2.1 ”。这将提供所有所需的元数据用来支持丰富的代码辅助和验证。

现在，准备创建一个新的VJET项目，不过这里使用的是已经存在的源文件。这个可通过VJET项目向导来完成。

在新的VJET项目向导需要执行以下步骤：

1. 选择从现有的源代码创建项目并选择生成的abc应用程序目录。如果没有指定目录，会在Sencha Touch SDK目录下创建一个。稍后也可以移动目录。
2. 如果不想改变生成的应用程序的目录结构，可以选择“Use project folder as root for sources”，而不是选择“Create separate folders for sources”，这样可以阻止创建一个新目录。
3. 如果要使用工作集，那么选上“Add project to working sets”，否则，条过这一步。
4. 确保单击的是下一步，而不是完成。如果单击完成，项目可能会有多个错误。

在VJET设置页：单击Details区域下“Configure inclusion and exclusion filters”链接。

在“Inclusion and Exclusion Patterns”页，可以为不需要扫描但希望保留在项目中的Javascript文件添加排除规则。排除包含在Sencha Touch SDK中大量的JS库文件很有必要。在这一步，添加排除规则：touch/

现在，要设置项目的依赖来启用已导入Eclipse的Sencha Touch 2.1。选择“Add...”并复选项目SenchaTouchTL-2。另外，如果要把SDK外共享的Ext JS类拉进来，还可以复选这些项目。在VJET，默认情况下，并不是每一个项目都能看到所有类的。默认情况下提供了以下3组API：

1. Javascript的API，如Math、Date等等。
2. 浏览器的API，如document、window等等。
3. 用来协助定义类型库和全局变量的VJET VJO Javascript API

如果应用程序可以使用最新版的EcmaScript API或其它库，可以从VJET开源项目下载页https://www.ebayopensource.org/index.php/VJET/Downloads下载更多的类型库并导入更多的项目。

这就完成了！

查看脚本资源浏览器，应该可以看到加载的项目abc。注意，Sencha Touch文件看起来并不象一个包，只不过是一个普通文件夹。这表示该文件夹不需要进行验证扫描，这样，就看不到Sencha Touch的SDK的代码错误了，只能看到应用程序代码的错误。现在，编写一些Sencha Touch的Javascript代码。

高级代码辅助

使用Sencha Touch要面对的一个挑战就是要了解所有可用的配置项，并要确保设设置了正确的值。Sencha Eclipse插件知道如何提示配置项，在Ext.create输入第二参数时会提示，在Ext.define下输入配置字段时会提示，以及在任何Ext基本应用程序根据xtype对象输入文本字段时提示。

打开abc/app/view/Main.js文件，并转到配置段，在这里可添加一个面板的配置项并添加一些子组件到面板。在这种情况下，代码辅助既需要面板的配置项，也需要标题栏的辅助。正如所看到的，得到的建议还包含了直接从Sencha Touch SDK中嵌入的文档。

要获得建议，在高亮显示的选择行按下Ctrl+Space：

在另一个示例，可以结合Ext.create和xtype来获得正确的配置项辅助。打开默认包下的app.js：

现在，转到Ext.create函数调用处，为了演示添加第二个参数对象文本，然后按下Ctrl+Space，将看到如图所示的配置项：

另外，代码辅助对对象文本和函数回调还有更高级的支持。下面通过Sencha Touch SDK做一下演示，然后演示如何通过添加JSDuck注释来为Sencha Touch类提供一样的代码辅助。

例如，API中Ext.each的函数回调参数会提供正确的带参数的替换代码，并在选择参数建议后返回语句，然后在使用任何定义的参数时，提供正确的辅助。

如果函数是带有多个已知字段的对象文字，那么也可能获得代码辅助，如Ext.application：

为了事自定义的Sencha Touch类型能获得插件提供的参数辅助，可以使用JSDuck来注释应用程序的类。这些添加的注释可以用来作为辅助，也可以作为很好的代码文档。下面，使用JSDuck文档来生成这些注释。

Ext.define("abc.examples.CallBackDemo", {
 
	/**
	 * @param {Function} arg
	 * @param {String} arg.bar
	 * @param {Boolean} arg.zot
	 * @param {String[]} arg.three
	 * @param {String/Date[]} arg.four
	 * @param {String} arg.return Returns String 
	 */ 
	callbackEx:function(arg){
}
 
})

当输入f并按下Ctrl+Space，将获得匿名函数参数的提示。

一旦选择了提示的参数，就会发现匿名函数作为一个参数添加到函数里了。所有在JSDuck注释指定的参数都会有正确的辅助，如参数bar的类型是字符串，就能看到字符串类型的提示。还支持不同类型的提示，如果是第4个参数请求提示，会看到数组和字符串的提示，如果访问的是数组的一个成员，将看到日期提示。

辅助还可以为已知字段的对象文字提供提示。

以下这个例子，个个选项参数实际上有2个已知字段startName和callback。callback事件上是一个带已知参数和返回类型的函数。

Ext.define("abc.examples.OptionsDemo", {
	myFunc:function(options) {
	 	// code here
	}
})
 
Ext.define("abc.examples.OptionsDemo", {
	/**
	 * @param {Object} options
	 * @param {String} options.startName
	 * @param {Function} options.callback
	 * @param {String} options.callback.name
	 * @param {Date} options.callback.startDate
	 * @param {String} options.callback.return
	 */
	myFunc:function(options) {
	 	// code here
	}
})

小结

添加Sencha Touch 2.1类型库到Sencha Eclipse插件可为创建移动应用程序提供丰富的代码辅助、验证和搜索功能。要做的只是在Eclipse中创建一个新的带Sencha Touch类型库的VJET项目来使用很棒的代码辅助功能。可以获得Sencha Touch SDK的内置类型的功能以及自定义的Sencha Touch类的功能。

相关阅读：

VJETDoc comment syntax
Getting Started with Sencha Eclipse Plugin
The New Sencha Eclipse Plugin
Sencha Cmd

作者：Justin Early
Justin is currently the Lead Senior Software Engineer and Consultant at Avantsoft. He is the lead developer for the VJET JavaScript IDE project at Eclipse and leads the development effort for the Sencha Eclipse Plugin. Contact Justin on Twitter.