PDA

View Full Version : Using Spket IDE for ExtJS development



Eric Suen
17 Jun 2007, 11:21 PM
Spket IDE is powerful toolkit for JavaScript and XML development, version 1.5.11 add ExtJS support.

The flash demo show you how to setup Spket IDE for ExtJS development:
http://www.spket.com/demos/extjs.html

Currently it support Ext 1.1 Stand-alone(Ext Base + Everything target defined in ext.jsb)

Please visit http://www.spket.com/ for more information...

mystix
18 Jun 2007, 2:28 AM
ooh.. nice one. :)

jack.slocum
19 Jun 2007, 5:12 AM
I installed this into Aptana and the code completion is amazing. It even shows inherited properties and functions and where they came from. The comment folding is also a nice addition. Very nice work!

Can I make a couple of requests for a future version? :)
a) An option to "auto collapse" comments when a file is opened would be huge. Some of the Ext files have 1000 lines of comments and 100 lines of code. Intellij does this and it's one of the reasons I use it currently.

b) The only other missing feature I "need" is an Outline view that parses object literals. Most Ext files (like Component.js) have tons of functions defined with Ext.extend and scrolling to find them is impossible. Intellij is the only IDE I have found that parses object literals (and variables) as functions when defined in reverse (e.g. var foo = function(){... or in an object literal), although it isn't perfect (it doesn't understand Ext.extend).

Those things aside, this is really spectacular. Can someone who knows Wiki please add it into the Learn section?

rarerules
19 Jun 2007, 5:39 AM
Very nice!!! Could be a big help.

One question: does this also work with Ext 1.0?

efege
19 Jun 2007, 5:42 AM
Those things aside, this is really spectacular. Can someone who knows Wiki please add it into the Learn section?

Done. I added a new sub-section to the Resources section of the Manual:

http://extjs.com/learn/Manual:Resources#IDEs

Please, those interested and with knowledge of IDEs (not my case), make the list grow and also write some useful introduction and descriptions :)

jack.slocum
19 Jun 2007, 5:42 AM
It's pretty easy to try it out and see. ;) It worked fine with 2.0!

aconran
19 Jun 2007, 5:48 AM
Very cool! Great work

Eric Suen
19 Jun 2007, 8:27 AM
Very nice!!! Could be a big help.

One question: does this also work with Ext 1.0?

It require ext.jsb has two target "Ext Base" + "Everything", seems "Ext Base" was added since Ext 1.1, but you can do some hack, just create a "Ext Base" target, and add files to that target, should works...

Eric Suen
19 Jun 2007, 9:07 AM
a) An option to "auto collapse" comments when a file is opened would be huge. Some of the Ext files have 1000 lines of comments and 100 lines of code. Intellij does this and it's one of the reasons I use it currently.

This one is very easy, we will add this feature in next version.


b) The only other missing feature I "need" is an Outline view that parses object literals. Most Ext files (like Component.js) have tons of functions defined with Ext.extend and scrolling to find them is impossible. Intellij is the only IDE I have found that parses object literals (and variables) as functions when defined in reverse (e.g. var foo = function(){... or in an object literal), although it isn't perfect (it doesn't understand Ext.extend).

Seems this works for me, maybe we are not talking the same thing, see the attachment

jack.slocum
19 Jun 2007, 4:09 PM
Seems this works for me, maybe we are not talking the same thing, see the attachment

A good example file would be Component.js in Ext. There are two types of definitions in this file. The "singleton style":


Ext.ComponentMgr = function(){
...
return {
register : function(c){
all.add(c);
},
... (more functions)...

The other is the standard Ext style class declaration:


Ext.Component = function(config){
...
};

Ext.extend(Ext.Component, Ext.util.Observable, {
...(functions here)...
});

I understand that parsing these out and associating them to the correct class would be pretty difficult. For me (and maybe others), it doesn't matter if they are associated with the correct class, just that they appear in the outline somewhere.

Here's some screenshots that I think will better explain what I mean:

Spket:

http://extjs.com/playpen/outlines/spket.gif

Aptana: (empty too)

http://extjs.com/playpen/outlines/aptana.gif

IntelliJ: (picks up the functions but can't figure out the class name)

http://extjs.com/playpen/outlines/intellij.gif

Even though IntelliJ doesn't give the classes proper names, in large files having the function name in the outline is better than nothing.

Thanks for taking the time to listen to feedback. I look forward to the collapsing comments.

Eric Suen
19 Jun 2007, 5:18 PM
Now I see what is your means, we will improve the outline view in next version

Eric Suen
19 Jun 2007, 6:50 PM
Very nice!!! Could be a big help.

One question: does this also work with Ext 1.0?

For those who using Ext 1.0, put following code into file ext.jsb before </project>:


<target name="Ext Base">
<include name="core\Ext.js" />
<include name="adapter\yui-bridge.js" />
<include name="yui\yahoo.js" />
<include name="yui\dom.js" />
<include name="yui\event.js" />
<include name="yui\connection.js" />
<include name="yui\animation.js" />
</target>

efege
20 Jun 2007, 4:21 PM
Posted on Ajaxian today: Spket IDE: Ext Support (http://ajaxian.com/archives/spket-ide-ext-support)

Eric Suen
2 Sep 2007, 10:57 PM
Spket IDE 1.6.3 released, the code assist now support ExtJS custom class, please visit http://www.spket.com for more information...

lastid
5 Sep 2007, 2:46 PM
Eric, I tried to update to 1.6.3, I got an error message: 'internal error: loading context' and then it seems that spket doesnt have any effects anymore.
Here is the error in the log file.
!ENTRY org.eclipse.core.jobs 4 2 2007-09-06 00:38:06.031
!MESSAGE An internal error occurred during: "Loading Context".
!STACK 0
java.lang.NoClassDefFoundError: com/spket/js/parser/CachedLexer
at com.spket.extjs.model.ExtLibrary.loadClasses(Unknown Source)
at com.spket.js.model.Context$2.run(Unknown Source)
at org.eclipse.core.internal.jobs.Worker.run(Worker.java:58)

I am using pdt eclipse.

Eric Suen
5 Sep 2007, 5:43 PM
Are you using Update Manager or update it manually? if you update it manually, you have to run "eclipse -clean" once, "com.spket.extjs" seems you update from a very old version, try remove following plugins manually:
com.spket.*1.5*

Iveco
6 Sep 2007, 8:53 AM
Great,
really nice update, thank you very much for this!
Code completion is better now :-).

lastid
6 Sep 2007, 10:13 AM
Thanks Eric, it works like a charm now.
I removed everything and install via update manager.

lastid
8 Sep 2007, 11:05 AM
Hi Eric,

Sometimes I notice that the auto complete doesn't propose the whole list that it should be. For instance:
Ext.get(el). [Ctrl + Spacebar] just shows an incomplete list of Ext.Element functions.
It shows mostly animation functions like slideOn slideOut ..., but not others like createChild, insertSibling etc.

Moreover, I cannot add templates : Window->Preferences->Spket->Editors->Javascript Editor->Templates
Here is the error from log when I click new:
---
java.lang.NoClassDefFoundError: com/spket/js/preferences/JSTemplatePreferencePage$JSEditTemplateDialog
at com.spket.js.preferences.JSTemplatePreferencePage.editTemplate(Unknown Source)
at org.eclipse.ui.texteditor.templates.TemplatePreferencePage.add(TemplatePreferencePage.java:547)
---


Maybe I made the update not like it supposed to be.

What should I do?

Thanks

Eric Suen
8 Sep 2007, 7:27 PM
The first one is a bug, I will fix this in the next version.

The template one I am not sure, because it work for me, what is your eclipse version and OS?

lastid
9 Sep 2007, 2:18 AM
The OS is windows.

My eclipse 's plugin list is in the attached file.

Thanks for your help

lastid
9 Sep 2007, 4:08 AM
Hi Eric,

I've just installed the newest version of eclipse pdt and the 'template adding' is working
Spket is a great IDE!

Eric Suen
10 Sep 2007, 3:21 AM
The code assist bug for Ext.Element was fixed in version 1.6.4, and other improvement including: code assist(Open declaration) for ExtJS configuration parameter (http://extjs.com/forum/showthread.php?t=12514), please using Update Manager to install the new version...

Thanks

srsuciu
6 Mar 2008, 12:00 PM
Does spket work with ext 2?
After I install it in aptana the outline view is not showing the private members. Is there a fix for this?

Thanks

Eric Suen
6 Mar 2008, 6:04 PM
Hi, if you means this issue http://forums.spket.com/viewtopic.php?t=414 , it will be fixed in next version, otherwise, would you mind provide more specific case?

srsuciu
7 Mar 2008, 10:05 AM
Yes Eric, actually is the same issue that I have. I'm looking forward for the new version.

Thank you

MarcWeil
24 Apr 2008, 7:00 AM
I can't seem to get all the fanciness of Spket for my JS that's embedded in other pages (such as JSPs). Is there any way to do that, or does Spket only work for stand-alone .js files?

Eric Suen
24 Apr 2008, 7:08 PM
Try Alt+Shift+/, take a look http://www.spket.com/javascript-editor.html section Code completion for ThirdParty plugins

MarcWeil
25 Apr 2008, 5:45 AM
Oh awesome! Is there any way to get Spket's syntax coloring in there as well? Code completion is only half the game. ;)

sharpguy
4 May 2008, 12:52 AM
Sounds great.

thanks

orno
21 Jul 2008, 4:54 AM
Hello, I began to use this plugin, it's very nice. But I have problems with the characters in the script.
I need to change to Latin 1, how I can fix this problem?

Eric Suen
21 Jul 2008, 8:04 PM
select the file/folder/project, click right mouse button, in context menu, click "Properties" item, in dialog, choose "Resource" category, change your encoding.

orno
22 Jul 2008, 6:21 AM
Thank you for you response, but I have been searched in Resources and I can't see Latin 1, only UTF-8, ISO-8859-1.

Eric Suen
22 Jul 2008, 7:06 AM
What is your default encoding? You can get the value via menu "Window" -> "Preferences...", choose category "General" -> "Workspace".

BTW, if the encoding is not in the list, you can add one yourself, the combo is editable, you can get the encoding here: http://java.sun.com/j2se/1.4.2/docs/guide/intl/encoding.doc.html

cking
22 Jul 2008, 10:55 AM
Thank you for you response, but I have been searched in Resources and I can't see Latin 1, only UTF-8, ISO-8859-1.

ISO-8859-1 is Latin1.

http://en.wikipedia.org/wiki/ISO-8859-1

caerolus
23 Jul 2008, 1:32 AM
I installed this into Aptana and the code completion is amazing. It even shows inherited properties and functions and where they came from.
I can't have that working. I installed the plugin and set the EXT profile, but it doesn't show the properties (not all of them) in the code completion, like the property 'text' in a Ext.Button.
How do you have inherited properties?

thanks a lot

Eric Suen
23 Jul 2008, 2:39 AM
'text' is configuration parameter, maybe you should using 'getText' method instead of 'text'?

caerolus
23 Jul 2008, 9:29 AM
'text' is configuration parameter, maybe you should using 'getText' method instead of 'text'?
yeah, I meant config parameters :))
any way of showing them?

thesilentman
13 Oct 2008, 12:16 AM
I just stumbled over the last post while searching for code completion also for the configs.
Has there been any development in that direction?

[EDIT]
Config options are displayed on the combination of ctrl+space.

tarini
22 Apr 2009, 4:37 AM
Hi to all...


How can I add my custom class created with Ext.extend to code completion?
Do I have to create a jsb file?

Eric Suen
22 Apr 2009, 9:58 AM
Hi, you can take a look at this thread: http://forums.spket.com/viewtopic.php?p=952#952

cafebabe
30 Apr 2009, 8:34 AM
Hi to all...


How can I add my custom class created with Ext.extend to code completion?
Do I have to create a jsb file?

You can add the files individually or you can create a .jsb file that contains all the files you need to load. One thing to be aware of is that they need to be loaded in the correct order to resolve any dependency issues they may have to other .js files you write or else you will not get code complete. I have wrestled with this issue myself and even gone so far as to write a build process to find these dependencies and generate a stripped down version of a .jsb file. Once you include the ext.jsb you can add this generated .jsb after it (include order is important) ... If you wanna check it out I posted it as a google code project here
http://code.google.com/p/jsb-builder/

its written in perl and thus requires the e.p.i.c. eclipse plugin, but the up side is it's runnable from within eclipse, so you generate the .jsb, and right click your project & click "reload javascript profile" and you're good, a 2 click process for code complete of custom extjs libs

DiscoBoy
6 May 2009, 12:30 AM
Does SPKET already support EXT CORE/JS 3.0 RC?
When trying this, i get no code completion at least and also no Docs are shown whn hovering my code.

deanna
6 May 2009, 7:28 AM
Does SPKET already support EXT CORE/JS 3.0 RC?
When trying this, i get no code completion at least and also no Docs are shown whn hovering my code.

Did you add ExtJS as a library to it? Then add the .jsb file from 3.0?

DiscoBoy
6 May 2009, 7:38 AM
Yes i did. Meanwhile it started to work. I don't know know why....but maybe i had to restart Eclipse. Anyway thx

wannadream
8 Jul 2009, 5:29 PM
It's cool,thanks for sharing.

t800t8
8 Apr 2010, 7:48 PM
You can add the files individually or you can create a .jsb file that contains all the files you need to load. One thing to be aware of is that they need to be loaded in the correct order to resolve any dependency issues they may have to other .js files you write or else you will not get code complete. I have wrestled with this issue myself and even gone so far as to write a build process to find these dependencies and generate a stripped down version of a .jsb file. Once you include the ext.jsb you can add this generated .jsb after it (include order is important) ... If you wanna check it out I posted it as a google code project here
http://code.google.com/p/jsb-builder/

its written in perl and thus requires the e.p.i.c. eclipse plugin, but the up side is it's runnable from within eclipse, so you generate the .jsb, and right click your project & click "reload javascript profile" and you're good, a 2 click process for code complete of custom extjs libs

cafebabe, can you explain how to add the files individually? Thanks.

t800t8
8 Apr 2010, 8:07 PM
cafebabe, can you explain how to add the files individually? Thanks.

Ah, I found it, but seems adding the files individually doesn't work properly. Even I took care about the order but some of classes don't show up.

steffenk
9 Apr 2010, 3:30 AM
Not all is found with autocomplete. I guess there are some inconsistencies in the jsb file, there was already another post with this issue.

htammen
18 Mar 2011, 3:01 AM
Did anyone succeed in using Spket with ExtJS 3.3.1 and STS 2.5.2?


I´ve installed Spket 1.6.18 as Plugin
Then created a JavaScript profile for ExtJS like described at the Spket homepage


But I don´t see any code completion, documentation or anything else. Have restarted STS several times.

Any hints?

firefoxSafari
20 Mar 2011, 12:15 PM
Did anyone succeed in using Spket with ExtJS 3.3.1 and STS 2.5.2?

I´ve installed Spket 1.6.18 as Plugin
Then created a JavaScript profile for ExtJS like described at the Spket homepage

But I don´t see any code completion, documentation or anything else. Have restarted STS several times.

Any hints?

I've never actually tried with STS, but I've used Spket successfully wth other Eclipse variants. Here are some things to check.

When you made the Ext-JS profile, were you sure to make it the default by selecting it and clicking the 'Default' button?

Are you sure the Spket js editor is being used instead of the default js editor that comes with Eclipse? You can right-click the file and try open with and select the Spket editor. If this is the case, you can set Spket to be the default through the file associations. Window->Preferences->General->Editors->File Associations.

Also, when you modify Spket profiles you should be able to right click a project in your workspace and select something like 'Reload JavaScript profile' instead of having to restart Eclipse, though if you do this you might have to close any open .js files first.

Not sure if these will help you, but I've seen others run into them with other versions of Eclipse.

htammen
21 Mar 2011, 4:53 AM
It works.
Most times the problem sits in front of the computer. I forgot to set the profile to default.

Thank you very much.

princewei
22 Mar 2011, 10:07 PM
Can I make a couple of requests for a future version? :)
a) An option to "auto collapse" comments when a file is opened would be huge. Some of the Ext files have 1000 lines of comments and 100 lines of code. Intellij does this and it's one of the reasons I use it currently.

b) The only other missing feature I "need" is an Outline view that parses object literals. Most Ext files (like Component.js) have tons of functions defined with Ext.extend and scrolling to find them is impossible. Intellij is the only IDE I have found that parses object literals (and variables) as functions when defined in reverse (e.g. var foo = function(){... or in an object literal), although it isn't perfect (it doesn't understand Ext.extend).

Those things aside, this is really spectacular. Can someone who knows Wiki please add it into the Learn section?

jzhang1
9 Jun 2011, 11:42 AM
I installed Aptana Studio3. I have Spket 1.6.18 installed as plugin. I am configure the EXTJS4.0. I am following the old version of spket. I am configuring the JavaScript Profiles. This is the steps:
Window/Preferences/Spket/JavaScript Profiles/New/ give a name ExtJS/ Add Library/ExtJS/Add File/ I am not sure where can I get the ExtJS4.0 .jsb file.

Can anybody help me with it?

Thanks a lot!

burnnat
22 Jun 2011, 12:43 PM
I installed Aptana Studio3. I have Spket 1.6.18 installed as plugin. I am configure the EXTJS4.0. I am following the old version of spket. I am configuring the JavaScript Profiles. This is the steps:
Window/Preferences/Spket/JavaScript Profiles/New/ give a name ExtJS/ Add Library/ExtJS/Add File/ I am not sure where can I get the ExtJS4.0 .jsb file.

Can anybody help me with it?

Thanks a lot!

Take a look at this thread (http://forums.spket.com/viewtopic.php?f=6&t=1866) from the Spket forums. You can get the jsb2 file here (http://www.agpad.com/downloads/ext-4.0.2a.jsb2), and you'll probably also need to update Spket with this jar (http://www.agpad.com/downloads/com.spket.js_1.6.18.jar).

loiane
10 Oct 2011, 2:44 PM
This screencast may help you:

http://vimeo.com/30308177

pardha
27 Dec 2011, 7:50 PM
Hi, I have installed and configured spket IDE to work with Ext js 4, But while I am trying to debug/run it says Lanuching error, 'Mechine Debug Manger' without any other info. what whould be the reason
thx