Experimenting with TextFlow from JavaFX8

I’ve spend tonight doing some experiments with combining the org.eclipse.text-Support and JavaFXs new TextFlow which allows to one to render complex texts. The result of this 3 hours is astonishing! I have a working SourceViewer (please note it is ONLY a viewer without editing support!).

Here are some screenshots:



I’ve recorded a small video so that you can see it in action:

The scrolling performance is great but you’ll notice that the initial rendering of big files (> 10.000 lines) takes some time. So while this is Ok for a prototype time has to be spend on the performance for a real world app (I also hope there are optimization possibilities in JavaFX itself), adding editing needs logic to only modify parts of the TextFlow model but I hope I can find some time to give it a try.

10 thoughts on “Experimenting with TextFlow from JavaFX8

  1. Felipe February 15, 2013 / 11:27 pm

    Nice Tom! The initial time you see is not rendering time (as rendering is limited by clipping, which I’m assuming the scrollview provides). The time is in analyzing the text and generating the glyphs. If you ever implement editing this will be a major problem too as the TextFlow will re-analyze the entire text every key stroke. The design we used in Orion (and Eclipse) is to have a text model object (and an annotation model for the styles) for backing store and only to set the visible text in the TextFlow. One way to do that is to use one TextFlow per line of text. That makes you view virtual, so it doesn’t matter how huge you document is, the performance will be the same.

  2. OliOli April 12, 2013 / 1:59 pm

    Very nice. What kind of JavaFX control is behind the SourceViewer?

    • Tom Schindl April 12, 2013 / 3:53 pm

      In this case it was a simple TextFlow – later iterations who add editing support the underlying control is a ListView

      • Oli April 15, 2013 / 10:42 am

        A requirement for a prototypw was the styling on character level. I haven’t found a control to do this easily (html control was annoying for this). So I used a TextField for each character and synchronized them so it looks like a single TextField (only for short texts). I ask myself how you solved the source viewer with ListView. What’s inside the ListView?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s