Geertjan's Blog
- June 19, 2015
How To Make Your Own JavaScript Editor
Code completion is the key feature you need when adding support for your own JavaScript framework to NetBeans IDE.
Above you see a new item I added by means of a simple starting point, which starts like this:
package org.demo;
import java.util.ArrayList;
import java.util.List;
import org.netbeans.modules.csl.api.CodeCompletionContext;
import org.netbeans.modules.csl.api.CompletionProposal;
import org.netbeans.modules.csl.api.ElementHandle;
import org.netbeans.modules.csl.spi.ParserResult;
import org.netbeans.modules.javascript2.editor.spi.CompletionContext;
import org.netbeans.modules.javascript2.editor.spi.CompletionProvider;
@CompletionProvider.Registration(priority = 20)
public class DemoCompletionProvider implements CompletionProvider {
@Override
public List<CompletionProposal> complete(
CodeCompletionContext ccc,
CompletionContext cc,
String string) {
List<CompletionProposal> result =
new ArrayList<CompletionProposal>();
DemoDataItem ddi = new DemoDataItem("a", "b", "c", "d");
result.add(DemoCompletionProposal.createDemoItem(ddi, 0));
return result;
}
@Override
public String getHelpDocumentation(
ParserResult pr,
ElementHandle eh) {
return "help documentation";
}
}
Here is where the full code sample, i.e., a basis for your own new extension to code completion in the JavaScript editor in NetBeans, can be found:
Join the discussion
Comments ( 2 )
This is very interesting! Additional information for all users starting from maven - you'll need dependencies:
<dependencies>
<dependency>
<groupId>org.netbeans.api</groupId>
<artifactId>org-netbeans-api-annotations-common</artifactId>
<version>RELEASE80</version>
</dependency>
<dependency>
<groupId>org.netbeans.modules</groupId>
<artifactId>org-netbeans-modules-javascript2-editor</artifactId>
<version>RELEASE80</version>
</dependency>
<dependency>
<groupId>org.netbeans.api</groupId>
<artifactId>org-netbeans-modules-csl-api</artifactId>
<version>RELEASE80</version>
</dependency>
<dependency>
<groupId>org.netbeans.api</groupId>
<artifactId>org-openide-filesystems</artifactId>
<version>RELEASE80</version>
</dependency>
<dependency>
<groupId>org.netbeans.api</groupId>
<artifactId>org-openide-util</artifactId>
<version>RELEASE80</version>
</dependency>
</dependencies>
And javascript2-editor has a friend-only api, so you'll need an implementation dependency:
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>nbm-maven-plugin</artifactId>
<version>3.14</version>
<extensions>true</extensions>
<configuration>
<moduleDependencies>
<dependency>
<id>org.netbeans.modules:org-netbeans-modules-javascript2-editor</id>
<type>impl</type>
<explicitValue>org.netbeans.modules.javascript2.editor/1 = 201505281753</explicitValue>
</dependency>
</moduleDependencies>
</configuration>
</plugin>
The value for the explicitValue was extracted from a current netbeans 8.0.2 install.
BTW: Geertjan, it would be nice if the blog would either allow basic html formatting or keep text formatting.
Thanks a lot! Very helpful. Which JavaScript framework are you working on? I think it could be relatively simple to provide support for many quite quickly now that we're getting to understand the basics. Also, I'm thinking about a generic solution, so that someone can put a file in the NetBeans user directory and then have the IDE understand what to do with it, how to interpret those files, and where to show the related items in the code completion box of the JavaScript editor.