Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
32K views

Tutorial: Spket: Setting Up Eclipse IDE For Ext JS and JQuery Development

This document provides instructions for setting up the Spket Editor plugin in Eclipse IDE to enable autocomplete for Ext JS and JQuery development. It details how to install Spket Editor, configure Ext JS and JQuery libraries and files, and set the file associations to enable autocomplete in JavaScript files. Completing these steps will allow auto-complete functionality for Ext JS and JQuery coding in Eclipse similar to autocomplete for Java and other supported languages.

Uploaded by

Loiane Groner
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
32K views

Tutorial: Spket: Setting Up Eclipse IDE For Ext JS and JQuery Development

This document provides instructions for setting up the Spket Editor plugin in Eclipse IDE to enable autocomplete for Ext JS and JQuery development. It details how to install Spket Editor, configure Ext JS and JQuery libraries and files, and set the file associations to enable autocomplete in JavaScript files. Completing these steps will allow auto-complete functionality for Ext JS and JQuery coding in Eclipse similar to autocomplete for Java and other supported languages.

Uploaded by

Loiane Groner
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development

Loiane Groner – http://loianegroner.com - http://loiane.com

Spket:  Setting  up  Eclipse  IDE  for  Ext  JS  and  JQuery  development  

This tutorial will walk you through how to set up Eclipse IDE for Ext JS and JQuery development
using Spket Editor.

I use Eclipse IDE daily at work, and it is my favorite IDE – I am a Java developer (JEE). Since Java
Web is the platform I work on, I also use Ext JS and JQuery for client side code. What I like about
Eclipse is the auto-complete feature. It saves me some time when I am coding. Unfortunately, this
feature applies only to Java language (or any other language you use – PHP, C, C++ - supported by
Eclipse IDE) and I miss it when I am coding in Ext JS or JQuery.

Recently, I found this plugin for Eclipse – Spket Editor, and it really helped me a lot. Now I can code
in Ext JS or JQuery using the auto-complete feature. Before this, I had to consult Ext JS or JQuery API
to see if they contain what I was looking for.

Topics covered in this tutorial:


• How to install Spket Editor plugin for Eclipse
• Setting up Ext JS
• Setting up JQuery
• Setting up other languages and features

How  to  instal  Spket  Editor  plugin  for  Eclipse.  

1 – Open Eclipse, on the menu bar click on “Help” → “Install New Software”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com

2 – It will open “Install” popup. Click on “Add” button.

3 – On “Name” field type “Spket” and on “Location” type “http://www.spket.com/update/”. Click on


“Ok” button.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
4 – Select all the components all click on “Next”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
5 – Click on “Next” again.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
6 – Select “I accept...” and then click on “Finish”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
7 – Wait while it installs Spket...

8 – If you get a security warning, click on “Ok”.


Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
9 – You have to restart Eclipse to apply the changes. Click on “Restart”.

Setting  up  Ext  JS  

1 – If you use Mac, go to menu bar “Eclipse” → “Preferences”.


Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
If you use Linux or Windows, go to “Window” → “Preferences”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
2 – Select “Spket” → “Editors” → “JavaScript Profiles” and then click on “New”.

3 – Type “ExtJS” and click on “Ok”.


Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
4 – Select “ExtJS” from the list and click on “Add Library”.

5 – Select “ExtJS”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
6 – Select the second “ExtJS” option and click on “Add File”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
7 – Select “ext.jsb2” and click on “Open”. This file is inside ExtJS folder (you have to download
ExtJS).
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
8 – Select the components you want to have the auto-complete feature – I selected them all. Then select
the first “ExtJS” option and click on “Default”. Do not click on “Ok” or “Apply” yet.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
9 – Now we are going to configure Spket editor. Select “General” → “Editors” → “File Associations”.
Select “*.js” from the list. Spket JavaScript Editor will be the second one on associated editors list.
Select it and click on “Default”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
10 – Click on “Ok”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
11 – Now let's test it!

Setting  up    JQuery  

It is the same process we did for ExtJS, now we are going to do the same for JQuery.

1 – If you use Mac, go to menu bar “Eclipse” → “Preferences”.


Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
If you use Linux or Windows, go to “Window” → “Preferences”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
2 – Select “Spket” → “Editors” → “JavaScript Profiles” and then click on “New”.

3 – Type “JQuery” and click on “Ok”.


Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
4 – Select “JQuery” from the list and click on “Add Library”.

5 – Select “JQuery”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
6 – Select the second “JQuery” option and click on “Add File”.
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
7 – Select “jquery.js” and click on “Open”. (you have to download jquery from jquery.com).
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
Tutorial: Spket: Setting up Eclipse IDE for Ext JS and JQuery development
Loiane Groner – http://loianegroner.com - http://loiane.com
8 – Now let's test it!

Setting up other languages and features

If you want to set up other languages (YUI, MooTools, Prototype), please check Spket page:
http://spket.com/javascript-editor.html

That’s all Folks!

For  more  Java,  Ext  JS  and  related  technologies  articles,  please  visit:  

http://loianegroner.com - English
http://loiane.com - Brazilian Portuguese
Find us on Facebook: http://www.facebook.com/pages/Loiane-Groner/134400473255914

Twitter: @loiane

You might also like