Setting up Sencha Eclipse Plugin for Sencha Touch development


MainPage

Problem Statement

Using an IDE for any programming languages makes the developer life easy and increases the overall development performance. IDE will provide required suggestion for specific classes and methods.

In Java application development, using Eclipse IDE, we can get code completion support while writing code. Similarly, we can develop Sencha application using Eclipse IDE where we will get required suggestion for Sencha API’s by using the Sencha Eclipse Plugin. This way a developer can avoid switching between Sencha docs and application code for referring docs frequently.

Sencha Eclipse plugin will help developers by providing a full set of code completion and code assistance features for Eclipse. This plugin is based on the VJET Eclipse plugin developed by eBay , provides a fully integrated development environment for JavaScript – from authoring, to execution/test, and debugging.

But in order to make it even more useful for Sencha developers, Sencha has developed Type Libraries (TL) with this plugin. So, by importing these type libraries into our project and configuring the TL(Type Library) in the project build path we are able to get the possible suggestions. By using this TL(Type Library) projects we will get support for the Sencha Touch built-in classes (like Ext.app.Profile etc ) and also your custom types, and any sub-classes you define using the Sencha Touch classes. It puts an incredible amount of power into your hands and makes Sencha Touch application development faster and easier.

Once you’ve switched your Eclipse perspective to the VJET perspective, we’ll get code assistance and syntax help as you type. Since the plugin is built directly into the Eclipse, we’ll be able to use many familiar Eclipse features such as proposals, outlining, object hierarchy, call hierarchy, and more

Scope of this article

1. Installation of Sencha Eclipse plugin in to Eclipse (Indigo).

2. Install the type library related to the version of Sencha Touch we’re using.

3. Creating a sample code by using the code assistance

Pre-requisites

Eclipse , VJET

How to do it

Let us fallow the step-by-step process which lead us to achieving the requirement.

STEP 1 : Installation of Sencha Eclipse plugin in to Eclipse.

If you have purchased the Sencha Complete license, the plugin comes along with it. Otherwise, you may download the evaluation version of the plugin from http://www.sencha.com/products/complete/evaluate

Fill the details and download the Sencha Eclipse plugin.

After the download we shall get the following files:

Sencha_pack

Sencha_plugin_pack

Extract SenchaEclipsePlugin-2.0.0.zip. It contains the following files:

SenchaTLProject

Extract the following files:

Sencha_Eclipse_Plugin-trial-2.0.0.50.zip

SenchaTouchTL-2.1.zip

ExtJSTL-4.1.zip

These TL files are useful projects for the possible suggestions.

Sencha Eclipse Plugin Installation :

Run your Indigo Eclipse, go to help menu and select “Install New Software” option. 

A pop-up window appears , as shown below. Click on the Add button.

InstallNewSoftware

A pop-up window appears , as shown below. Click on the Add button.

SelectInstallerURL

GiveDowloadURL

Click on Local… as the plug-in files are located on our file system.

Here we can give location of the extracted plugin zip file or the archive it self by giving the location.

Go the location where we have extracted the plugin zip file , and open it.

PluginFile

Click on OK button

LocationPlugin

Click on OK button

InstallPlugin

Continue the steps to complete the plug-in installation

With this Plugin installation is over.

STEP 2 : Install the type library related to the version of Sencha Touch we’re using.

We need to install the type library that corresponds to the version of Sencha Touch that you’re using. The type library contains meta data about the framework that describes build-ins methods, classes, mixins, etc and ensures the plugin provides the correct code assistance.

First we need to import TL Projects Sencha has provides to us.

Right-click in the Project Explorer area of Eclipse and click on Import->Import..

ImportProject

In the import pop-up we need to select the “Existing Project into Workspace” in the General Section.

ImportProjectpopup

Click on Next> button

ImportProjectRoot

Click on the Browse button, and Go to the location where we have extracted the SenchaTouchTL-2.1 ,because this is the project which will be used to give suggestions.

Select the “SenchaTouchTL-2.1” and click on OK.

SenchaTL

SenchaTLFinish

Click on Finish button.

SenchaTLFinal

With this importing the Type Library Project is completed.

STEP 3 : Creating a sample code by using the code assistance.

SenchaProject

VJetProject

Click on the next then it will give a pop-up window. Enter the Project Name and click on the Next. 

RegistrationMobile

Click on Next> button

RegistrationMobileBuildPath

Go to “Projects” tab in the window. In the Project tab we have to give the TL Project as the Build path project. For this click on the “Add” button in this window then a pop-up with existing projects will come.

ImportSenchaTLProject

TLSenchaProjectComplete

Click on Finish Button.

SenchaRegistrationProcomplete

Now let us see how we can create a JS file for our sample project using the plugin

First we will see how to create model, view, controllers. There is no explicit mechanism here to create model/view/controllers here in this Sencha Eclipse plugin.

But we can achieve the same with proper packages, Now we will see how to create VJET packages.

SenchaPackage1

A pop-up will appear. Give the package name and click on finish.

SenchaPackage2

Like wise create a package for the model and controller.

SenchaPackage3

SenchaPackage4

Now Create a js file in the view module.

SenchaJSFile

Give the file name

Secha_MVC

SenchajsFileName

JsFileSenchaWrite

In the Sencha Touch we have a class Ext.app.Profile which does not exist in the ExtJS

SenchaFinaloutput1

So We are able to get the Sencha Touch Related Suggestions for our development.

Summary

By using this Sencha Eclipse plugin and the Type Library projects we are able to develop Sencha Touch applications very fast and we will get code assistance to avoid wrong values or wrong methods.

At Walking Tree we practice and recommend Sencha Products like ExtJS and Sencha Touch to build amazing web / touch apps. In case you are looking for training or professional assistance, contact us by visiting our website.

References

Tagged with: , , , , ,
Posted in Sencha Touch
2 comments on “Setting up Sencha Eclipse Plugin for Sencha Touch development
  1. Kamlesh shete says:

    Hello sir ,
    Very Nice Post ,
    I have followed all steps and Eclipse also showing methods Related to Ext. …but when i run this program as Vjet Js application its giving errors why soo. ?? pls anyone can suggest solution .
    Thanks

  2. naveen says:

    hi
    I need sample exampe on sencha touch.how to execute the sample example.please provide me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: