Setup Aptana Studio/Eclipse for Ext JS...

14
Setup Aptana Studio/Eclipse for Ext JS Development: Aptana is a 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 a powerful toolkit for JavaScript and XML development. It enables autocomplete feature for Ext JS as soon as 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..'

Transcript of Setup Aptana Studio/Eclipse for Ext JS...

Page 1: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

Setup Aptana Studio/Eclipse for Ext JS Development: Aptana is a powerful open-source web development IDE. Please download and install Aptana Studio 3.

Now, you need t o i n s t a l l Spke t IDE p l ug i n from spket.com. Spket is a powerful toolkit for JavaScript and XML development. It enables autocomplete feature for Ext JS as soon as 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..'

Page 2: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

3. It will open a popup window as shown below:

4.

5. Click 'Add' and enter name 'Spket' and Location ‘http://www.agpad.com/update/’.

Page 3: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

6.

7. Click OK. 8. Select all the packages under Spket IDE:

9.

10. Click 'Next'.

Page 4: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

11. Accept the License Agreement. 12. Click 'Finish'.

13.

14. This will download and install Spket IDE plugin in Aptana/Eclipse. 15. After installation -> restart Aptana/Eclipse.

Now, you need to configure Spket plugin. Follow the below steps to configure Spket plugin in Aptana/Eclipse in windows platform:

1. Start Aptana or Eclipse. 2. Go to Windows menu -> Preferences.

Page 5: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

3. Expand Spket -> select JavaScript Profiles.

4.

5. Click 'New..'

Page 6: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

6. Enter Name as ExtJS and click OK.

7.

8. Now, select ExtJS profile and click 'Add Library'. This opens 'Select Library' popup.

9. Select ExtJS from the drowpdown and click 'OK'.

10.

Page 7: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

11. Now, select ExtJS profile and click 'Add Library'.

Page 8: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

12. In the Select Library popup, select ExtJS and click OK.

13. Now, select ExtJS child node and click Add Folder and

select build folder under Ext JS 6 sdk folder which you downloaded earlier.

Page 9: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk
Page 10: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

14. This will add all JS files under build folder.

15. Now, set ExtJS profile as Default profile by clicking on Default button. 16. Click OK and restart Aptana or Eclipse.

Now, create new project and JavaScript file and press Ctrl + Space. This shows autocomplete feature with help as shown below:

Page 11: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

This is how 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 disabled by default. To enable it,

1. Go to Windows -> Preferences. 2. Expand Aptana Studio node.

Page 12: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

3. Select Validation. There you will see JSLint Validator:

4.

5. Select JSLint validator and click OK. Now the Problems window displays JavaScript errors and warnings for your project. However, you need to exclude extjs sdk folder because JSLint shows errors and warnings for many sdk JS files.

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

Page 13: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

Select Exclude All, Files and Folders, All Children and enter * in File and Folder Attributes as shown below:

Now, you get errors and warnings for your JavaScript files only.

Page 14: Setup Aptana Studio/Eclipse for Ext JS Developmentoobdata.com/wp-content/uploads/2020/01/extJS-setup.pdf · extjs sdk folder because JSLint shows errors and warnings for many sdk

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

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