How to use Sencha Touch 2 in Eclipse with Auto Complete feature.

We know Sencha Touch 2 is going to be a promising frame work for cross platform mobile app development. Inspite of the greate Sencha SDK provided, it's a pity that they do not provide Sencha Architect (the ultimate Sencha Touch IDE) for free ! Here I discuss how we can use Sencha in our old friend Eclipse. One thing I wanted for a while was to have the auto complete feature for Sencha API in Eclipse. Even though Googled, resources and the instructions provided  in other articles are obsolete by the time I write this. After few days I realized a way that I can enable the auto complete feature in Eclipse for Sencha Touch 2 and thought to share my experience with you, who might be desperate as I was.

Prerequisites :

Sencha SDK (used here : sencha-touch-2.1.1)
Sencha Cmd (used here : Sencha Cmd 3.1.1)
An Eclipse IDE (used here : Kepler: Eclipse Java EE IDE for Web Developers)

How to Open & Run a Sencha Touch app inside Eclipse

• Create a Sencha app skelton using sencha cmd (I have discussed this in my previous post).
• Then open Eclipse IDE and go to File menu -> other -> general -> Project
• Give a Name to the project and dis-select the 'use default location' option and browse and provide the Sencha app skelton folder we created previously.

• Configure the Tom Cat server in Eclipse.
• Run the app in the server mode.   
• If everything works fine you'll be able to view your running app at 'http://localhost:8080/<your sencha app name>/' (port number might defer according to the server configurations if its not the default) in the chrome browser. (since Sencha Touch is a JavaScript application framework developed for mobile web applications development, it supports only web browsers built on Web Kit. So you must use Chrome or Safari for testing on desktop PCs)

Enabling the Auto Complete feature for Sencha Touch 2

• In the Eclipse IDE go to Help -> Install New Software and click Add button.
• On the Name field type 'Spket' and for the location type 'http://www.agpad.com/update/' and click Ok button. Spket is a free toolkit for Java Script and it provides a plugin for Eclipse. (http://www.spket.com/)

• Select all the components and click 'Next'.

• Click Next again.

• Select 'I accept the terms ... ' and click 'Finish'.

• Wait a while till Spket gets installed and at the middle it may give a security warning, then press "OK". At the end it will prompt you to restart Eclipse, and please do.

Setting up Sencha Touch2 for auto completion

• Download the touch.jsb3 file from here
• This file has been responsible in build process in old versions but now since Secha cmd has been introduced it's no longer shipped with Sencha SDK (dilemma) and took me some time to figure out how to find one.
• You can download from my repository or from here which is the place I originally picked up. 
• Or perhaps you can download the file from here which doesn't have access to the whole API at the moment.
• You can even generate this file by using Sencha Touch SDK - Tools (or from myrepository)
  
  Generating .jsb file from Sencha Touch SDK Tools.
  After installing SenchaTouch SDK Tools, open a cmd window and cd to the folder of your app
  and type
  
  

  sencha create jsb -a index.html -p app.jsb3

  
  The new app.jsb3 file will be created in your app directory.
  read more on this :
  http://blog.lansdowntech.com/2012/02/creating-an-extjs-production-build-with-sencha-sdk-tools/
  http://docs.sencha.com/touch/2.0.2/#!/guide/building
  http://www.sencha.com/forum/showthread.php?242411-jsb3-file
  http://www.sencha.com/forum/showthread.php?260432-Eclipse-IDE-Spket-and-EXT-JS-4.2..-where-is-sdk.jsb3
  
• Save this file in the Sencha SDK folder along with sencha-touch.js , sencha-touch-all.js, ...etc files.

• Now go to Ecplise IDE and go to 'Window' -> Prefernces -> Spket -> Editors -> Java Script Profiles, and click New.
• Type 'Sencha Touch' and click 'Ok'.
• Select 'Sencha Touch' from the library and click on 'Add Library'.
• Select EXT JS.
• Select the second 'ExtJS' option and click 'Add File'
• Select touch.jsb3 file saved in Sencha SDK and click 'Open'.
• select all components and select the first 'Sencha Touch' node and click 'Default' and press 'OK'.
• Now within the 'preferences' window select General -> Editors -> File Associations and select '*.js' fro the list. Under the Associated Editors list select 'Spket Java Script Editor' and click 'Default' button and click 'Ok'.
• If everything happened smooth you should now be able to try out auto completion feature for Sencha Touch 2 in eclipse. Type Ext. and press (ctrl + space) voila!    

Note: for Mac users this post might be helpful despite of touch.jsb3 file.
If you are interested you can even have this capability in Aptana or Titanium : refer this. 

Generating Sencha Touch 2 App Skeleton

After long time I'm back to the blog. It's not because I'm free, in fact I'm busy than ever but thought to share how to generate app skeleton via Sencha Touch CMD since I don't wanna see some one else get into the same difficulties I got in to.

For your reference here's the official site for doing just this. But I bet it wont help a lot. For this for now you need all 3 below to be already installed.

1. Java Run Time Environment  JRE
2. Sencha CMD (this provides commands for us to generate the app skeleton, etc)
3. Sencha Touch 2.1.1 SDK


Ok here are the quick steps...

Step 1:
During the Sencha CMD installation it should add it's path to the environment variables automatically, but if not please do as follow.
Add the Sencha CMD path (path/to/the/sencha_cmd_installation_directory,  for example: C:\Users\Madusha\bin\Sencha\Cmd\3.1.0.256) to the Path variable in the environment variables in your Windows OS.
If it's been added successfully you should get an out put like below depicting about the version and other command menus if you type 'sencha' in the command prompt.

If the path is not set properly below Warning message will pop out.

Step 2:
You then just have to type below to generate the app skeleton.
sencha -sdk "path/to/sencha_sdk" generate app yourAppName "path/to/the/appfolder"

The app folder will be created automatically. But remember you MUST need to have double quotes when you provide the path to sencha sdk.

Note: If you can not set path of Sencha CMD in the path variable then navigate to the   sencha_cmd_installation directory via command propmt and proceed with the Step2.

Good Luck !