X

Geertjan's Blog

  • February 9, 2015

Extending the JavaScript Editor in NetBeans

Geertjan Wielenga
Product Manager

Just about every other week, it seems like there's a new JavaScript framework out there. Each comes with their own idioms and constructs. When it comes to tools, the only logical way to be able to support the innovation in the JavaScript space is to have a modular, pluggable solution. When you look at the sources of NetBeans, you'll see that its top level structure implies a modular design:

What can we learn about the extensibility of the JavaScript editor by looking into the highlighted modules above? How hard is it to create a new module that provides support for some other JavaScript framework that isn't supported yet in NetBeans?

Let's look at each of the highlighted modules above and learn from them.

Prototype.js

Take a look at the 'javascript2.prototypejs' module, shown above, and in more detail below, and you'll see it contains nothing more than one class:

That module is a direct result of this issue: https://netbeans.org/bugzilla/show_bug.cgi?id=201885 and uses @FunctionInterceptor.Registration.

To see what that single class provides, take a look at how a Prototype sample looked in NetBeans IDE 8.0:

Specifically, look in the Navigator window above, which is not very expressive, compared to the Navigator in the screenshot below, which I took in NetBeans IDE 8.0.2:


Ext.js

The 'javascript2.extjs' module is more complex:


Here's part of the code completion that you see implemented via the code completion classes above:


In the 'model' package of the 'javascript2.extjs' module, the functionality provided is comparable to that provided by 'javascript2.prototypejs' module, which is the Navigator structure shown below (click to enlarge the image):


See this tutorial for step by step instructions to create the sample shown in the screenshot above:

http://likeadev.com/show/simple-ext-js-4-application-tutorial-part-1.html

Require.js

In 'javascript2.requirejs', you can see that the HTML editor can be extended as well:

And you can see part of the above in action here:


The other modules are certainly more complex than the above though, the point is, supporting a new JavaScript framework is not necessarily a complex task.

Here are the annotations relevant to JavaScript extension points, more on these to come in future blog entries:

  • @CompletionProvider.Registration
  • @DeclarationFinder.Registration
  • @FunctionInterceptor.Registration
  • @ModelInterceptor.Registration
  • @ObjectInterceptor.Registration
  • @TypeDisplayNameConvertor.Registration

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.