Tuesday, August 7, 2012

Tutorial - Sencha Touch & ExtJS Code Completion for Aptana & Eclipse

Prerequisites:
Aptana or Eclipse installed
Sencha Touch SDK downloaded and extracted


Quick Installation Guide:


  1. Install Spket IDE Plugin
    1. Start Aptana/Eclipse
    2. Go to Help => Install New Software...
    3. Add new Software Site
      • Name: Spket IDE
      • Location: http://www.agpad.com/update/
    4. Install all Packages from the new Software Site
  2. Configure Spket IDE Plugin 
    1. Open Aptana/Eclipse Preferences
    2. Go to Spket => JavaScript Profiles
      1. Click "New..."
        • Name: SenchaTouch
      2. Select new Profile (SenchaTouch)
        1. Click "Default"
        2. Click Add Library
          • Library: ExtJS
        3. Select "ExtJS" => Click "Add File"
          • Find the "touch.jsb3" File in the root Directory of the Sencha Touch SDK and click ok
        4. Expand the newly added jsb3 file
          • Select all available options: e.g: Classes, DOM, Manifest
    3. Restart Aptana/Eclipse
  3. Test the Code Completion
    1. Open a javascript file => type "Ext.a" and press "ctrl+space"

Detailed Installation Guide:

  • Install the Spket IDE Eclipse Plugin

    1. Start Aptana/Eclipse
    2. Go to Help
    3. Select Install New Software...
    4. Click Add...
    5. Insert the following data in the popup window
      • Name: Spket IDE
      • Location: http://www.agpad.com/update/
    6. Click Ok 
    7. Select all the packages under Spket IDE
    8. Click Next => Next =>
    9. Accept the License Agreement 
    10. Click Finish
    11. After the installation has finished => Click Restart Now
  • Configure the Spket IDE Plugin
    1. Open the Preferences (Mac OSX: Aptana Studio 3 => Preferences)
    2. Go to Spket => JavaScript Profiles
    3. Click New...
      • Name: SenchaTouch
    4. Select new newly created Profile: SenchaTouch
    5. Click Default (to make it the default profile for all projects)
    6. Click Add Library
      • Library: ExtJS
    7. Select the newly create Library: ExtJS
    8. Click AddFile
      • Go to your Sencha Touch SDK Folder and select the "touch.jsb3" file in the root directory (of the sdk)
    9. Expand the newly added jsb3 file
    10. Select all available options
    11. Click Ok
    12. Restart Aptana
  • Test the Code Completion
    1. Open a javascript file
    2. Press "ctrl + space" for code completion
      • Example:

Note: The Code Completion only works for the "Spket JavaScript Editor", which should be the default javascript editor after the installation of the Spket Plugin.

You can check/edit the default javascript editor at:
Preferences => General => Editors => File Associations => and search for "*.js"

"Spket JavaScript Editor" should be marked as default:

14 comments:

  1. It doesn't show the content assist popup. Do I need to add Javascript project or user defined libraries? Or it works w/ any javascript file?

    ReplyDelete
    Replies
    1. No you shouldn't have to add a Javascript Project and it should work with any file.

      You just have to open the file with the "Spket JavaScript Editor"...this editor should be the default for all javascript files after installing the spket eclipse plugin.

      Delete
    2. I just added a note to the end of the blog post to clarify it ...hope this helps ;)

      Delete
  2. Thanks for all these information, I got also trouble and discover the js file was not opened by Spket JavaScript Editor even set by default. Anyway using the open with option bring everything ok.

    ReplyDelete
  3. Hey I got this working, but when I add a new .js file even code highlighting doesn't work for it. And in the file selection tabs, I see a different icon than from the ones for which it does work. could someone please help?

    ReplyDelete
    Replies
    1. Sounds like the same problem Alain had, did you tried his tip?: Right Click on the File in the Selection Tab and select Open With -> "Spket JavaScript Editor"

      Delete
  4. Hello, I got it works fine on Aptana, but on Eclipse, I don't have enough automating function.

    Such as when I type Ext.app (not recommend application, there are only apply or animator). Do you have any ideas?

    ReplyDelete
  5. Hi, I follow your instruction. but I can't find 'touch.jsb3' from downloaded Sencha Touch SDK 2.0 and Sencha CMD 3.0. The file I found in Sencha Touch 2.0 SDK is just 'app.jsb3' which doesn't provide option to select.

    Where does you find it?

    However, this is the great article to make Aptana a great IDE for Sencha Touch development. I would like to link to your article from my blog soon, if you don't mind.

    ReplyDelete
  6. I'm using sencha-touch-2.1.0 sdk with Sencha command 3 and i can't find jsb3 file

    Is it removed in the latest SDK? If so any alternative?

    -Thanks in advance
    Nag

    ReplyDelete
  7. Same problem for me. In the last SDK (2.1.0 Open GL) I can't find the jsb3 file. I can build it using Sencha Commands? If yes, How?.

    Thanks
    Giup

    ReplyDelete
  8. I did this and had the problem of finding the jsb3 file too which the SDK doesn't include anymore. The workaround for anybody that has the problem or at least what worked for me is this:

    1. Download this jbsb3 file: http://dev.europalab.com/tizportdev/demos/Senchtest/touch.jsb3
    2. Add the downloaded touch.jsb3 file to your downloaded Sencha touch folder, not the SDK at the same level where you
    have all the other sencha-touch*.js files and 'src', 'microloader', 'resources' and 'cmd' directories.
    3. Follow the steps as mentioned in this tutorial and point the jsb3 to the file you downloaded and you should be good.

    ReplyDelete
  9. Spket installed successfully but auto-complete does not work - I tried to control + space after typing Lis* - expecting eclipse to suggest "Listeners:" - Didn't happen - Am I missing something ?

    ReplyDelete