Screenshot of the Week #28: NetBeans + JavaScript = True!


Apologies for my low activity on this blog recently. I've been swamped during the NetBeans 6.1 development cycle.
The main reason is that I've been completely consumed reimplementing the JavaScript support in NetBeans. It is
now built on the same infrastructure as the Ruby editor. It's been quite a sprint to get it done, but we're
about to freeze NetBeans 6.1, and it's in. And I think NetBeans now compares quite favorably against other JavaScript
IDEs and editors.



Does this mean I've moved on from Ruby, and the NetBeans Ruby support is now in maintenance mode?



Far from it! Not only did we double the size of the NetBeans Ruby team from 6.0 (when Martin Krauskopf and myself
were the team); in 6.1 Erno Mononen and Peter Williams joined us. And I'm still in charge of and working on the
Ruby editor - which in 6.1 adds complete Rails 2.0 support (and Rails 2.1 - I just yesterday integrated support
for the new UTC timestamp migrations), as well as
a bunch of new quickfixes, and tasklist integration, etc.



However, a lot of the work I've been doing has been on the editing infrastructure, which benefits
Ruby directly. For example, in NetBeans 6.1, the long file indexing process which would happen on every IDE startup
now happens only on the first startup. And more importantly, we're much more robust now in handling complicated
embedding scenarios in ERb/RHTML files. Where in 6.0 we had a lot of custom code to handle ERb specifically,
the generic language embedding support we have now means that most Ruby (and JavaScript!) editing features work
automatically and correctly in ERb files as well. So features like mark occurrences and semantic highlighting
which were not available in 6.0 now work in ERb files as well for Ruby.



My main motivation for working on the JavaScript editor was that we often got the feedback
from NetBeans Ruby users along the lines of "I love your Ruby editor, but my Rails application also needs JavaScript,
and I go to other tools for that". We want NetBeans to be a complete editing solution, and JavaScript is obviously
vital for any web framework, including Rails. Therefore, to be a top notch Ruby IDE, we have to have top notch JavaScript
editing as well.



So what are the new compelling JavaScript features in NetBeans 6.1? I'm not going to show everything here, but here's
a Rails-focused introduction to some of the features.



First, let's create a new Rails project. Then I open the public/javascripts/prototype.js file that ships with Rails (click for full size):







First, take a look at the semantic highlighting. Prototype-style method definitions are bolded. As with Ruby, unused local variables, parameters and catch scope variables etc. will be detected and underlined. And NetBeans figures out the scope of variables and shows you global variables in a different color (green, but that is obviously configurable). This helps you find cases where you perhaps have a typo so instead of referencing a local variable, you're accidentally trying to read a nonexistent global variable. Or, as is the case in this screenshot, they were probably accidentally declaring a global variable:






I doubt that the intention for this function was to leak out a new variable named position; the intention was probably to have included a var keyword here to make the loop variable local like this:







Let's move on to the quickfixes. Take a look at the vertical scrollbar on the right - here it is again (flipped horizontally) :





Each little yellow mark corresponds to a quickfix warning NetBeans has added at roughly that position in the source file. The tasklist view lists these such that you can sort by type. (This isn't some doctored up testcase file to exercise the quickfixes - this is the standard prototype.js file.)
Every quickfix type can be disabled - and they also offer links to more information about the error. Here's the warning for multiple return values:






The mark occurrences feature lists all the exit points of a function when you place the caret on top of the corresponding function keyword. Here you can see that we have both a plain return; with no return value, as well as another return with a value. How would a caller of this function treat the return value of this function?



There are a lot more detectors, which I will describe in a future blog post. Now, let's open the default index.html file that ships with Rails. Here's code completion on the Prototype $() function:






As you can see, it uses the HTML parse information (this is part of the language infrastructure I talked about earlier) to locate all the element ids in the document and offers those as completion. As you can see it includes those ids that were accessed by Rails' own $-calls for the lines above.



Code completion also works with the Prototype $$() function, which performs CSS selections. First, show the used element types in the document:






Then filter on the HTML element classes in the document:






There's just one - from a few lines later:






We can also filter on the many CSS pseudo classes:





This post is already getting long so I won't get into all the JavaScript features now.
Here's a blog entry somebody
else wrote with some more features and screenshots. The main point of this blog entry was to explain why
I've been so busy, what's in store for NetBeans 6.1, and to reassure you that NetBeans Ruby and JavaScript support
is going to continue developing at rapid clip. Code editing is a top priority for NetBeans!

Comments:

Gotta say, 6.1 is the nicest all-in-one XHTML/JavaScipt/CSS editing experience I've ever had. Nice work!

When you run out of languages to implement support for, it would be awesome if perhaps NetBeans could start getting some code completion support inside annotations, particular beans-binding and JPQL expressions would benefit hugely from this - to make up for the lack of type safety.

Posted by Casper on April 04, 2008 at 09:46 AM PDT #

Hi Tor,

really nice improvements, one thing I find better in eclipse. It's css completion. Eclipse has css elements divided into the groups, each has own icon (elements representing color, table, padding) and also completion for units (px, %, em) would be helpful. I'm not good at css so sometimes it helps. But it's just a little thing.

Posted by Denis on April 04, 2008 at 11:16 AM PDT #

Any plans for jquery support?

Posted by austin_web_developer on April 04, 2008 at 02:32 PM PDT #

Good day, Tor! Nice changes! Will the http://deadlock.netbeans.org/hudson/job/ruby/ be working again to see them?

Posted by ruby.freeman on April 05, 2008 at 12:35 AM PDT #

When am I going to be able to print my Rails code??

New features seem less relevant than this very basic requirement???

Best wishes - in hope .....

Posted by Robin McKay on April 05, 2008 at 01:48 AM PDT #

Thank you all for your comments!

Austin_web_developer - yes, jQuery is already supported (as are several other javascript frameworks). Just copy the jquery.js file into your source directory and you should be all set!

Ruby.freeman - You don't need http://deadlock.netbeans.org/hudson/job/ruby/ -- not only does the nightly release builds (linked to from the above url) include the Ruby functionality, if you want the hourly build you can get it here: http://deadlock.netbeans.org/hudson/job/trunk/ - drill into lastSuccessfulBuild/artifact/nbbuild/dist/zip/ to get the zip files for the latest build.

Robin - As far as I know there's no issue with printing Rails code? That's a core IDE feature so not something I'm tracking, in case there are bugs related to it, but there's a print module for this functionality (http://print.netbeans.org/) and menu items right in the File menu to print it. Is there a bug somewhere with this?

Casper and Denis, thanks for your ideas!

Posted by Tor Norbye on April 05, 2008 at 02:13 AM PDT #

Thanks, Tor! I've downloaded and run netbeans from zip - everything works just nice, except macroses - it seems that they are broken again

Posted by ruby.freeman on April 05, 2008 at 08:19 PM PDT #

What about word wrap in netbeans? I've searched high and low for this, but can't seem to find it anywhere in netbeans.

Posted by austin_web_developer on April 05, 2008 at 08:28 PM PDT #

Good idea austin_web_dev. Word wrap would indeed be a nice feature. One way to beat Visual Studio in this, would be if it wrapped to the same column in the next line rather than at column 0 - that way indentation/scope semantics is preserved. Also greatly enhances the experience of working with multi-line-strings in Java.

Editplus does something like that: http://www.editplus.com/ss/editplus.gif

Posted by Casper on April 05, 2008 at 10:24 PM PDT #

Any chance of the JavaScript editor catching stray commas? You know, the ones that stop IE running my script which works OK in FF and Opera :-)

Posted by Allan Cochrane on April 06, 2008 at 06:27 PM PDT #

Cool! I just love it! Like anything else Tor touching (except Java itself, it's still not mine) :)

Thanks Tor!

PS: Tor, by the chance when you can implement remote file system for RoR plugin ( I think it will be beneficial not only for RoR).
At this moment I am using rsync replication (based on cygwin's ssh.exe and rsync.exe and shared public key) to update the scripts when I did the change. It would be nice to use this feature natively in the plugin itself, and update only file which has been changed.

Posted by Sergey Kuznetsov on April 07, 2008 at 01:48 AM PDT #

One more thing.
I miss support of HAML syntax!

:)

Posted by Sergey Kuznetsov on April 07, 2008 at 01:52 AM PDT #

Hi Autstin_web_developer and Casper,
sorry, our editor doesn't support soft word wrap yet; this is tracked in
http://www.netbeans.org/issues/show_bug.cgi?id=89894
and is planned for 7.0.

Hi Allen,
yes - there's a quickfix for trailing commas. If internet explorer is among your targeted browsers it will warn about this, offer one fix to remove it and another for more information, which takes you to this page:
http://wiki.netbeans.org/JavaScript_trailingcomma
As you can see I'm a bit light on details for this error so if you can help edit the page or provide better references that would be great.

Hi Sergey,
there's a team hard at work on PHP support for NetBeans and they've implemented some kind of remote file system (I think it might be ftp-based). I will be looking at how to leverage this in RoR as well once the 6.1+JavaOne sprint is over (e.g. in about a month). Also, I believe Dylan is working on HAML support, I've been talking to him about it recently. This is a build he posted quite a while ago:
http://mediacast.sun.com/users/~tor/media/org-netbeans-modules-haml.nbm/details
I'm not sure where the current bits are.

Posted by Tor Norbye on April 07, 2008 at 02:03 AM PDT #

I miss support of Merb in NetBeans. I hope it's planned too ;)

Posted by | on April 07, 2008 at 06:20 AM PDT #

Seems that Merb is getting more and more attention. I've filed:

http://www.netbeans.org/nonav/issues/show_bug.cgi?id=132265

You might CC yourself there to watch the progress.

Posted by Martin Krauskopf on April 07, 2008 at 08:21 AM PDT #

Tor great work. Are there any plans to augment Swing Builder so that it can generate Ruby instead of Java? That would be killer!

Posted by Mike on April 07, 2008 at 11:51 AM PDT #

Martin Krauskopf: Good news! Thanks :)

Posted by | on April 07, 2008 at 04:03 PM PDT #

Re Printing Problem

This bug has been around from before the start of March. It is listed as issue 128846 in the bug list. Nobody seems to be doing anything about it.

I'd be interested to know if any other readers can get their system to print.

Posted by Robin McKay on April 07, 2008 at 05:04 PM PDT #

Hi Robin,
issue 128846 can't be fixed in NetBeans; it's a JDK bug which affects all applications - Eclipse too. There's more information here:
https://bugs.launchpad.net/ubuntu/+source/sun-java6/+bug/156191
It lists a workaround which apparently works for a lot of people:

"You can have it work by specifying the Orientation in every printers in Cups
System -> Printing
For each printer select Job Options tab and specify Orientation to whatever else instead of "Automatic Rotation"."

The associated JDK bug is in the "in progress" state.

Posted by Tor Norbye on April 07, 2008 at 11:03 PM PDT #

Thanks Tor, I'll try that.

As far as I can see Netbeans is owned by Sun who also develop the JDK. So I do think the problem should have been fixed long before now.

Maybe you can pass my comment on to wherever it might have a positive effect.

These are hard maths problems ...

Posted by Robin McKay on April 08, 2008 at 03:27 AM PDT #

Hi Robin,
your first comment was "New features seem less relevant than this very basic requirement???" - so I wanted to explain that printing on Linux isn't broken or not fixed at the expense of new NetBeans features. Though Sun funds development for both NetBeans and the JDK, individual engineers like myself typically cannot work on all these codebases - developing a JDK native Linux printer driver requires quite a different skillset than NetBeans tool development :)

Rest assured the JDK group definitely have this bug on their radar.

Posted by Tor Norbye on April 08, 2008 at 05:45 AM PDT #

Good day, Tor! This question is definitely not for you, but may be you know this - is there in netbeans subversion a way to see the diff not only between HEAD and local versions, but also between any revisions? That would be very useful!!
Tnanks!

Posted by ruby.freeman on April 08, 2008 at 04:09 PM PDT #

I'm loving the new Javascript stuff, and the Ruby/Rails stuff. Great work. I have a few minor usability questions that someone may be able to answer. Most of these are OS X specific (I think).

- What happened to the key mapping option for delete-next-character? I like to set that to Control-D; on a mac laptop there's no other good way to delete the next character. A minor issue, but very frustrating. Most mac apps, including Safari which I am using to type this comment in, use C-d to delete the character.

- On a mac laptop keyboard (and maybe others) there is no page up/page down. So what's the best way to select a region from the current cursor position to the top or bottom of the page? In TextMate and most other Mac apps I can do APPLE-SHIFT-UP ARROW or down arrow to accomplish this (including Safari). But in NetBeans it copies the current selection. Very handy but also very confusion for a mac user.

- I can't get the C-f7 hot key that runs all the tests to work. Can anyone else get this working on a mac?

Thanks!

Steve Molitor

Posted by Steve Molitor on April 09, 2008 at 02:51 AM PDT #

Hi Tor,
Looks excellent.
Since JavaScript is done are there plans for ActionScript & MXML files.

Posted by DK on April 10, 2008 at 01:17 AM PDT #

"True" should be lower case:

NetBeans + JavaScript = true;

Posted by Mark Kahn on April 10, 2008 at 04:11 AM PDT #

Hi Ruby Freeman,
I have no idea since I don't use the subversion support - but try the various NetBeans forums; there are interfaces on Nabble for example:
http://www.nabble.com/Netbeans.org-f2602.html
Try the users one.

Hi Steve,
I'll forward these comments to the editor team where the default keymaps for different OS'es (as well as keymaps like the Eclipse ones) are maintained.

Hi DK,
there aren't any plans for MXML yet.

Hi Mark,
yes, good point - but NetBeans will still complain since you can't have an expression (x+y) on the left hand side of an assignment :)

Posted by Tor Norbye on April 10, 2008 at 04:23 AM PDT #

I miss support of Merb in NetBeans. I hope it's planned too ;)

Posted by www.iwantfreebets.com on April 10, 2008 at 08:55 AM PDT #

Merb> Nobody currently works on AFAIK, but kind of planned:

http://www.netbeans.org/issues/show_bug.cgi?id=132265

You might CC yourself there to watch the status.

Posted by Martin Krauskopf on April 10, 2008 at 06:02 PM PDT #

I reckon the original "True" was correct - it's obviously a cunningly named int variable designed to trick the unwary. Question is whether it's meant to be the assignment True = Netbeans + Javascript or the = is a typo for ==?

int Netbeans = 1, Javascript = 1, True = 2;
System.out.println((Netbeans + Javascript == True) ? ":-)" : ":-(");

Posted by Andy Stevens on April 10, 2008 at 11:26 PM PDT #

Hi Tor,
I haven't found the Javascript plugin in RC1. I know it was in last beta. Where will I find it?

Posted by Martin J. on April 11, 2008 at 05:28 AM PDT #

It's there (in RC1) - the JavaScript support is a part of the base IDE cluster and is therefore part of all the different IDE configurations - Java, Ruby, etc. If it's not working, can you provide a few more details (write to me or the netbeans user aliases directly, not in this comment thread). See the nabble link above for example.

Posted by Tor Norbye on April 11, 2008 at 05:38 AM PDT #

Can anyone give a quick summary of constraints running javascript locally in Netbeans (i.e. Run the javascript file) versus as part of a rails web application? For example when I try to run the following code it doesn't recognize the "alert"...

=============
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}

cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"

cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
==============

Thanks

Posted by GregH on April 14, 2008 at 04:47 PM PDT #

PS. I note I can't put in breakpoints. Is there a plan to put breakpoint support in for 6.1?

Posted by GregH on April 14, 2008 at 04:56 PM PDT #

2Robin: I just saw on Planet JDK: http://blogs.sun.com/darcy/entry/openjdk_6_sources_for_b09
It seems that printing issue has been fixed.

Posted by Denis on April 15, 2008 at 02:50 AM PDT #

NOT allowed

Posted by guest on April 15, 2010 at 08:13 PM PDT #

Post a Comment:
Comments are closed for this entry.
About

Tor Norbye

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today