Sencha Eclipse Plugin提示和技巧

Posted 周一, 03/04/2013 - 22:09 by admin

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项目向导需要执行以下步骤：

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

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

Javascript的API，如Math、Date等等。
浏览器的API，如document、window等等。
用来协助定义类型库和全局变量的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类的功能。

广告合作

Sencha相关书籍

导航

聚合

Sencha Eclipse Plugin提示和技巧

相关文章