Tuesday, March 3, 2015

How to Setup Aptana / Eclipse for ExtJS application Development

ExtJS codehint setup in aptana or eclipse, just follow the steps :

Setup Aptana Studio/Eclipse for ExtJS Development:


Aptana is powerful open source web development IDE. Please download and install Aptana Studio 3.

Now, you need to install Spket IDE plugin from spket.com. Spket is powerful toolkit for JavaScript and XML development. It enables autocomplete feature for ExtJS 4 once you install and configure Spket IDE plugin in Aptana or Eclipse.

Install Spket plugin in Aptana or Eclipse:

  1. Open Aptana/Eclipse.
  2. Go to Help menu -> 'Install New Software..'
  3. It will open following popup window as below:

    Install spket plugin in aptana
  4. Click 'Add' and enter name 'Spket' and Location 'http://www.agpad.com/update/'.

    app repository in aptana
  5. Click OK.
  6. Select all the packages under Spket IDE:

    select spket IDE package
  7. Click 'Next'.
  8. Accept the License Agreement.
  9. Click 'Finish'.

    Start installation
  10. This will download and install Spket IDE plugin in Aptana/Eclipse.
  11. After installation -> restart Aptana/Eclipse.

Now, you need to configure Spket plugin. But before you do that, download JCB for ExtJS 4.2.1. Open http://www.agpad.com/downloads/ext-4.2.1.883.jsb2 in browser and save as ext-4.2.1.883.jsb2 in the root directory of ExtJS SDK/library.

Follow below steps to configure Spket plugin in Aptana/Eclipse in windows platform:

  1. Start Apatana or Eclipse.
  2. Go to Windows menu -> Preference.
  3. Expand Spket -> select Javascript Profiles.

    set spket javascript profile
  4. Click 'New..'
  5. Enter Name as ExtJS and click OK.

    set profile name
  6. Now, select ExtJS profiles and click 'Add Library'.
  7. Select ExtJS from drowdown and click 'OK'.

    select EXTJS library
  8. Now, select ExtJS child node and click 'Add File'.

    add file
  9. Now, select jcb2 file from ExtJS library folders where you copied earlier.

    select jcb2 file
    configure profile
  10. Now, set ExtJS profile as Default profile by clicking on Default button.
  11. Click OK and restart Aptana or Eclipse.

Now, create new project and JavaScript file and press Ctrl + Space, it will show you autocomplete with help like below:

autocomplete for extjs4 classes in aptana

So this way you can get autocomplete feature in Aptana or Eclipse.

JavaScript Syntax errors and warnings:

Aptana or Eclipse comes with JSLint and JavaScript Syntax validators. However, JSLint validator is disable by default. To enable it,

  1. Go to Windows -> preference.
  2. Expand Aptana Studio node.
  3. Select Validation. There you will see JSLint Validator:

    enable JSLint validator in aptana
  4. Select JSLint validator and click OK.

So now you will get JavaScript errors and warning of your project in Problems window. However, you need to exclude extjs sdk folder because JSLint shows errors and warning for many sdk JS files.

To exclude it, right click on sdk folder in project explorer -> select Properties -> select Resource Filter under Resource node and click 'Add':

setup apatana

Select Exclude All, Files and Folders, All Children and enter * as below:

setup aptana

So now, you only get errors and warning for your JavaScript files only.

Format JavaScript code:

Aptana comes with default code formatter for JavaScript. Press Ctrl + Shift + F to format JavaScript code in Aptana.


So this way you can setup development environment using Aptana or Eclipse IDE in Windows platform.


Original Source : extjs-tutorial.com/extjs/setup-aptana-for-extjs-development


Hery Purnama 081.223344.506 , IT trainer , Excel / access VBA Macro, MS Project, Primavera,
PHP Ajax Jquery, Google Map API, Google Sketchup3D, Ubuntu, Sencha ExtJS, YII, Code Igniter,
Oracle, SQL Server,
Bandung, Jakarta, Bali, Medan, Surabaya, Yogya, Indonesia

No comments:

Post a Comment