Fork me on GitHub

TomasMikula/blog

RichTextFX just got faster

When I started working with JavaFX almost a year ago, there was no native JavaFX code-editing control. Just like any decent programming language hosts its own compiler, I believe any decent UI toolkit should host its own IDE. And you cannot have an IDE without a code editor. It is great that JavaFX allows you to embed HTML and Javascript, but on the other hand, I found it somewhat embarassing that users of the best UI toolkit on the planet had to resort to embedding HTML to get a text editor with syntax highlighting. So I started CodeAreaFX, which evolved to RichTextFX.

It had been noted before that for performance it was crucial to use a virtual layout, such as ListView. A virtual layout is one that only calculates the visible part of the scene. So I used ListView to lay out lines of text. The performance still was not great. Now I felt embarassed that those embedded Javascript editors probably performed better than my native solution. It turned out ListView was doing unnecessarily many cell updates. Combined with the complexity of TextFlow, it was too slow to destroy, recreate and apply style to the whole viewport of, say, 30 lines of code on every typed character.

I set out to optimize and Flowless was born. Flowless is a virtual flow implementation with emphasis on eliminating unnecessary cell updates. Using Flowless, I get smooth editing experience even on an old (2010) laptop. You, too, can use Flowless in your applications in place of ListView if too many updateItem calls hinder the performance of your app. Note, however, that Flowless is a low-level layout container and you will have to make an extra effort to implement features like selection or inline editing. It would be great if someone from the community implemented a full-featured ListView on top of Flowless :wink:.

RichTextFX itself is a flexible low-level component able to support rich-text editing, syntax highlighting and more, but does not come with batteries included (by design). The upside is that you can use any lexer/parser you like. The downside is that you have to wire the lexer/parser to RichTextFX yourself (which is not difficult at all, but still…). Hopefully next time someone uses RichTextFX as the code editor in their project, they will consider wiring in a lexer with support for many languages and publish their work online :wink:.

comments powered by Disqus