Tips and tips for sencha Eclipse plug-in

Original article: http://www.sencha.com/blog/sencha-eclipse-plugin-tips-tricks/

Sencha's Eclipse plug-in is a complete plug-in for code assistance and verification of popular Eclipse IDE. With this plug-in, you can get the standard sencha touch (latest sencha eclipse plugin 1.1), ext JS type, and code assistance for custom types defined as part of the project. This article will show some tips and tips to make sencha touch development more efficient.

How to configure the sencha Eclipse project

In this example, the sencha CMD is used to generate an application and configure it in eclipse.

First, use cmd 3 of sencha to generate a sencha touch 2.1 application framework. In this example, an application named ABC will be created. The first thing to do is to change the root directory of touch SDK and then run the following command:

sencha generate app abc abc

Next, import the sencha touch library. The project is named "SenchaTouchTL-2.1" because it is based on sencha touch 2.1 ". This provides all the required metadata to support a wide range of code assistance and verification.

Now, you are going to create a new vjet project, but the existing source files are used here. This can be done through the vjet Project Wizard.

In the new vjet Project Wizard, perform the following steps:

1. Select to create a project from the existing source code and select the generated ABC application directory. If no directory is specified, a file is created under the sencha touch SDK directory. You can also move the directory later.
2. If you do not want to change the directory structure of the generated application, you can select "Use project folder as root for sources" instead of "create separate folders for sources ", this prevents the creation of a new directory.
3. If you want to use a working set, select "add project to working sets". Otherwise, this step is taken.
4. Make sure that you click Next instead of finish. If you click Finish, the project may have multiple errors.

On the vjet settings page, click the "Configure plugin sion and exclusion filters" link in the details area.

On the "allow sion and exclusion patterns" page, you can add exclusion rules for JavaScript files that do not need to be scanned but want to be retained in the project. It is necessary to exclude a large number of JS library files contained in the sencha touch SDK. In this step, add the exclusion rule: Touch/

Now, you need to set project dependencies to enable sencha touch 2.1 that has been imported to eclipse. Select Add... and check the project SenchaTouchTL-2. In addition, if you want to pull the ext JS class shared outside the SDK, you can also check these items. In vjet, by default, not every project can see all classes. By default, the following APIs are provided:

1. Javascript APIs, such as math and date.
2. Browser APIs, such as document and window.
3. Vjet vjo javascript API that helps define the type library and global variables

If the application can use the latest ecmascript API or other libraries, you can download more libraries and import more projects from the vjet open-source project download page https://www.ebayopensource.org/index.php/vjet/downloads.

This is done!

Check the script resource browser. You can see the loaded project ABC. Note that the sencha touch file does not look like a package, but is a normal folder. This indicates that the folder does not require verification scanning. In this way, the sencha touch SDK code error is invisible and only the application code error is visible. Now, write some JavaScript code for sencha touch.

Advanced Code assistance

One challenge to use sencha touch is to understand all available configuration items and ensure that the settings are set correctly. The sencha Eclipse plug-in knows how to prompt for configuration items in ext. when the second parameter is entered in create, a prompt is displayed in ext. A prompt is displayed when you enter the configuration field under define, and when any ext basic application inputs text fields based on the xtype object.

Open the ABC/APP/View/Main. js file and go to the configuration section. Here you can add a panel configuration item and add some sub-components to the Panel. In this case, code assistance requires both panel configuration items and title bar assistance. As you can see, the suggestions also include documents embedded directly from the sencha touch SDK.

For advice, press Ctrl + space on the highlighted selection line:

In another example, you can combine Ext. Create and xtype to obtain the correct configuration item Assistance. Open app. js under the default package:

Now, go to the Ext. Create function call. In order to demonstrate how to add the second parameter object text, press Ctrl + space to view the configuration items:

In addition, code assists in more advanced support for object text and function callback. The following is a demonstration using the sencha touch SDK. It then demonstrates how to add a jsduck annotation to provide the same code assistance for the sencha touch class.

For example, ext. the callback parameters of the each function provide the correct replacement code with parameters, return the statement after selecting the recommended parameters, and provide correct assistance when using any defined parameters.

If the function is an object text with multiple known fields, it may also obtain code assistance, such as Ext. application:

To customize the sencha touch type and obtain the parameter Assistance Provided by the plug-in, you can use jsduck to comment out the class of the application. The added comments can be used as an aid or a good code document. Below, use the jsduck document to generate these annotations.

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){} })

When F is input and CTRL + space is pressed, an anonymous function parameter prompt is displayed.

Once the prompted parameter is selected, the anonymous function is added to the function as a parameter. All the parameters specified in the jsduck annotation will be correctly assisted. For example, if the bar parameter is of the string type, you can see the string type prompt. Different types of prompts are also supported. If there are 4th parameter request prompts, an array and a string prompt will be displayed. If a member of the array is accessed, a date prompt will be displayed.

The helper can also provide a prompt for the object text of known fields.

In the following example, each option parameter actually has two known fields startname and callback. A callback event is a function with known parameters and return types.

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

Summary

Adding a sencha touch 2.1 Library to the sencha Eclipse plug-in provides rich code assistance, verification, and search functions for creating mobile apps. All you need to do is create a new vjet project with the sencha touch library in eclipse to use great code auxiliary functions. You can obtain the built-in functions of the sencha touch SDK and the custom functions of the sencha touch class.

Related reading:

Vjetdoc comment syntax
Getting started with sencha eclipse plugin
The new sencha eclipse plugin
Sencha cmd

Author: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.