What is JavaFX equivalent of JSyntaxPane for making a code editor?

Question

Previously in Swing, I have used the JSyntaxPane for making a tiny Java source editor. For practice, I decided to redo the entire project in JavaFX and adding support for more languages. Preferably, as many as I can.

However, there seems to be nothing similar to JSyntaxPane.

A bit of research led me to Tom Schindl's blog where he has made a source code viewer with proper syntax highlighting. No editing support, sadly.

Then there is JewelSea's blog but from the screenshot it look's like SO's type-and-preview method. Not something desired in a code editor.

Again, from JFXperience I found that highlighting and indenting and editing panel / node will be available in JavaFX 8 and it will also allow embedding Swing into Java.

Till then, what are my other options ?

I know JavaFX can interoperate with JavaScript so is there a way I can use some JavaScript library to accomplish the same?

Answer 1

There's RichTextFX which lets you do the highlighting. Check out the Java Keywords example.

Note that it requires JDK8.

Answer 2

I am currently using Ace Editor in my open source project via the WebEngine. Here is the Kitchen Sink demo.

UPDATE

A possible approach to JS/FX interaction as of current JDK version:

• Write the JS app/widget part, test it standalone. If you only intending to embed an editor widget, then it could be an empty web page with a <div> which is your editor.
• Then a plan for a 'get text from JS' scenario might be like this: 'call the JS function from Java, it will get the text from the editor element and call back the Java part with text passed as String argument for a method'.
• Learn the Java-JS binding - i.e. WebView callback from Javascript

• Embed FirebugLite to debug your JS from the WebView. The only version which worked for me was:

  <script src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>

Some general advices - try to avoid complexity in JS-to-Java calls. I filed a couple of bugs to the JavaFX team because some simple things like overriding a method didn't work for me. Avoid passing Java objects to JS - though it is theoretically possible, I always ended up with application crashes. So now I am passing JSON and convert it to objects on both sides.

You may have a look at a working example here of an AngularJS/JavaFX application. It's in a pre-alpha state, so it may not even launch on your machine, but can be seen as proof of concept of an AngularJS desktop app.

Answer 3

The editor sample I posted is not a type and preview method, it's a JavaScript editor embedded (codemirror) into a JavaFX application using WebKit. You can find the related source here or an updated version for a mini-IDE in the conception project.