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
