Sencha Inc. | HTML5 Apps

Blog

Sencha Eclipse Plugin Tips & Tricks

January 14, 2013 | Justin Early

Guest Blog Post

Sencha Eclipse Plugin is a full code assist and validation plugin for the popular Eclipse IDE. With the plugin, you're able to get code assist for standard Sencha Touch (new in Sencha Eclipse Plugin 1.1) and Ext JS types, as well as custom types that you define as a part of your project. In this article, I will demonstrate some of the tricks and tips that can make you a more productive Sencha Touch developer.

How to Set up Your Sencha Eclipse Project

In this example, we'll start with a Sencha Cmd generated application and get it set up in Eclipse with the plugin.

First, you want to leverage Sencha Cmd 3 to generate a skeleton Sencha Touch 2.1 application. I am creating an application called abc in this example. You first need to change the directory to the root of the touch SDK and then run this command.

 
sencha generate app abc abc
 

Next, you'll want to import the Sencha Touch type library. The project name is called SenchaTouchTL-2.1 for Sencha Touch 2.1. This provides all the metadata required to support rich code assist and validation.

Now, you are ready to create a new VJET Project, but we want to use the source that already exists. This can be done with the New VJET Project wizard.



On the New VJET Project wizard you will need to select:

  1. Create project from existing source and select the directory where the abc application was generated. If you didn't specify a directory, it will be created under the Sencha Touch SDK directory. You can always move the project later.
  2. Since you don't want to change the directory structure of the generated app, you need to select "Use project folder as root for sources" rather than "Create separate folders for sources" to prevent a new directory from being created.
  3. If you use working sets, you should check "Add project to working sets", otherwise you can skip this step.
  4. Make sure that you click next. Do not click finished. If you click finished, your project may get multiple errors.


On the VJET Settings page: click on the link "Configure inclusion and exclusion filters" under the Details section.



On the Inclusion and Exclusion Patterns page, you can add exclusion rules for JavaScript files you don't need to scan but still want in your project. This is great for excluding the larger library JS files included in the Sencha Touch SDK. In this step, add the exclusion rule: touch/



Now, you will set up the project dependencies to enable Sencha Touch 2.1 which you must have already imported into Eclipse. Select Add... and check the project SenchaTouchTL-2. In addition, if you want to pull in shared Ext JS classes outside the SDK, you can also select those projects by just checking them. In VJET, by default, not all classes are visible to every project. You do however get 3 groups of APIs available to you by default:

  1. JavaScript APIs such as Math, Date, etc.
  2. Browser APIs such as document and window
  3. VJET VJO JavaScript APIs to help define type libraries and globals.

If your application can use newer EcmaScript APIs or other libraries, you can import more projects in more type libraries from the VJET open source project download page: https://www.ebayopensource.org/index.php/VJET/Downloads



You're finished!

You can review the Script explorer, and you should see project abc loaded. Notice that the Sencha Touch folder doesn't look like a package but just a generic folder. This indicates that this folder is excluded from the validation scan, and you will not see any errors on the Sencha Touch SDK code, just application code. Now, let's write some Sencha Touch JavaScript code.



Advanced Code assist

One of the challenges with Sencha Touch is knowing all the configuration options that are available and ensuring that you are passing the correct type. Sencha Eclipse Plugin understands the configuration options which should be suggested for the second argument to Ext.create, for the config field under an Ext.define, and for xtype object literal fields in any Ext based application.

Open the abc/app/view/Main.js file and go to the config section where you can add more config options for the panel and add items to the panel. In this case, we want code assist for both cases in the Panel config, and we also want to get assist for titlebar options. As you can see, you get proposals for both as well as the embedded documentation taken directly from the Sencha Touch SDK.

To get the proposals, select the line that is highlighted blue and type Control + Space:





In another example, we can combine Ext.create with xtype and get the correct configuration option assist. Open app.js under the default package:



Now, go to where the Ext.create function is being called and add a second argument object literal for demonstration purposes and select control + space. You can see the options are available here as well.



In addition, there is advanced support for code assist for object literals and function callbacks. I will start with some examples from the Sencha Touch SDK and then show you how you can get the same code assist by adding JSDuck comments to your Sencha Touch classes.

For example, the function callback argument in the API Ext.each will provide the correct replacement code with arguments and return statement once the argument proposal is selected and then provide correct assist when using any defined arguments.









If the function takes an object literal with multiple known fields, then you can also get code assist such as with Ext.application:



To get Sencha Eclipse Plugin to provide function argument assist for your own Sencha Touch types, you can use JSDuck comments with your application classes. This adds value to the assist and will help document your code better. Later, you can use the JSDuck documentation generator which will also use these comments.

 
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 typing f then control + space, you will get a proposal for the anonymous function arg.



Once you select the proposal arg, you will notice that an anonymous function is added as an argument. You will see correct assist for all the arguments that were specified as part of the jsduc comments such as the the argument bar is of type String you can see the proposals for String below. Support for variant type assist is also available if you request assist for the argument four you will see proposals for Array,String, or Date depending on if you are accessing a member of an array.



Assist can also work for object literals with known fields.

Take this example, where the options argument can actually have two known fields startName and callback. The callback is actually a function with known arguments and return type.

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






Conclusion

Adding the Sencha Touch 2.1 type library to Sencha Eclipse Plugin provides rich code assist, validation, and searching capabilities for building mobile applications. All you need to do is create a new VJET Project in Eclipse with the Sencha Touch type library to leverage awesome code assist capabilities. You get all this functionality for the built-in Sencha Touch SDK types as well as your own defined Sencha Touch classes.

References:

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

There are 13 responses. Add yours.

CiaranT

2 years ago

If only this functionality was in Sencha’s own Architect…. wink

Ingscam

2 years ago

Is possible to drag and drop with this plugin in eclipse and generate the code in java?. Cause i’m programming in java, not in javascript. please answer? thanks.

John Nelson

2 years ago

I guess I didn’t have the project dependencies already in my project. Not sure how to do this so I’m left in the cold again.

Sure wish there was a Visual Studio plugin. They are so easy to install and use. It’s great to debug without having to use the browsers development tools.

Kazuhiro Kotsutsumi

2 years ago

I translated it into Japanese.

http://www.xenophy.com/extjsblog/5077

Provision: Japan Sencha User Group
http://www.meetup.com/Japan-Sencha-User-Group/about/

Ekambos

2 years ago

@Ingscam
I m not working for Sencha but stay tuned for something in that Direction smile

Satish Kumar

2 years ago

I am having a doubt , How to import the Sencha Touch Type Library .

Next, you’ll want to import the Sencha Touch type library. The project name is called SenchaTouchTL-2.1 for Sencha Touch 2.1. This provides all the metadata required to support rich code assist and validation.

Justin Early

2 years ago

This is a test to see if I can comment

Justin Early

2 years ago

@Sathish Kumar Let me try to clarify the steps to get the type library Eclipse project.

1. You must have access to the Sencha Complete or Sencha Team Complete downloads.
2. Once you have the corresponding download. Look for the zip file named SenchaEclipsePlugin_XXX.zip and extract that file.
3. Then you will see another ZIP file named ExtJSTL_XX.zip or SenchaTouchTL_XX.zip (where XX is the version number of the SDK) those ZIPs are Eclipse Projects which can be imported into Eclipse. See this wiki for more information about importing zips. http://wiki.eclipse.org/VJET/Importing_VJET_JavaScript_Type_Libraries

mohammad

2 years ago

what about packaging please ?

Justin Early

2 years ago

@mohammad I am not sure I understand your question.

mohammad

2 years ago

i mean generate apk

lav

1 year ago

please tell me , how to use validation in select field.

sunil

10 months ago

Any free plugin or IDE to build the Sench Touch project?

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.