この記事は JavaFX Advent Calendar 2016 の14日目です。昨日は @sk44_ さんの「javafx-maven-plugin でネイティブ用アイコンを設定する」でした。あすは @khasunuma さんの「JavaFX から Payara Micro API を呼び出す際の注意点」です。

概要

JavaFX でエディタを実装する際、標準で用意されている TextArea の表現力や拡張性の微妙さに物足りなさを感じたことはありませんか？

フォントの調整が難しい＆すべての文字が同じフォントでないといけない
標準では行番号表示ができない
シンタックスハイライトができない

この記事では JavaFX でエディタ機能を持つツールを作りたい方、あるいは作ったことのある方にお勧めしたいライブラリ "RichTextFX" を紹介します。

RichTextFX とは

Tomas Mikula氏が開発した、リッチなテキスト編集コンポーネントを提供するライブラリです。GitHub リポジトリにデモコードや使い方があります。

ライセンス

BSD 2-Clause License と GPLv2 クラスパス例外のデュアルライセンスです。

要件

javafx.scene.text.TextFlow を利用しているため、 JDK 8 以上が必要です。

RichTextFX を導入して可能なこと

行番号表示
シンタックスハイライト
フォント変更

まず導入する

環境

今回の導入で用いた環境は下記の通りです。

Java SE	1.8.0_102
OS	Windows 10
Gradle	3.0

お試し用コード

ごく簡単なコードとして Groovy の FizzBuzz を用います。

FizzBuzz.groovy

(1..100)
  .collect{it % 15 == 0 ? "FizzBuzz" :  it % 3 ==0 ? "Fizz" : it % 5 == 0 ? "Buzz" : it}
  .forEach{print it + ", "}

修正前

まず置き換える

Gradle の依存を追加

dependencies に下記の1行を追加します。

build.gradle

dependencies {
+  compile 'org.fxmisc.richtext:richtextfx:0.7-M2'
......
}

FXML の修正

標準の TextArea とは完全に別物として実装されているため、互換性がありません。注意してください。

import の追加

<?import org.fxmisc.richtext.CodeArea?>

TextArea タグを CodeArea に置換

Tooltip が使えないので注意してください。

-        <TextArea fx:id="scripterInput" prefHeight="550.0" prefWidth="500.0">
-          <tooltip><Tooltip text="input script." /></tooltip>
-        </TextArea>
+        <CodeArea fx:id="scripterInput" prefHeight="550.0" prefWidth="500.0" />

ソースコードの修正

Controller クラスも修正が必要です。

import の修正

-import javafx.scene.control.TextArea;
+import org.fxmisc.richtext.CodeArea;

TextArea を CodeArea に置換

TextArea と CodeArea に互換性はありませんので置き換えが必要です。

     @FXML
-    public TextArea scripterInput;
+    public CodeArea scripterInput;

     @FXML
-    public TextArea scripterOutput;
+    public CodeArea scripterOutput;

setText を replaceText に変更

メソッド名も異なるので注意してください。

-        scripterOutput.setText(result);
+        scripterOutput.replaceText(result);

修正後のスクリーンショット

素の状態だとコードハイライトも行番号表示もなく、折り返しもされません。

行番号を表示する

続いて、行番号を表示してみましょう。

import の追加

+import org.fxmisc.richtext.LineNumberFactory;

ParagraphGraphicFactory の指定

各 CodeArea オブジェクトに対し、下記の通り ParagraphGraphicFactory を指定します。

setParagraphGraphicFactoryで行番号表示をセット

scripterOutput.setParagraphGraphicFactory(LineNumberFactory.get(scripterInput));

修正後のスクリーンショット

このように、行番号が表示されます。

試しに改行してみれば、改行した分だけ行数が表示されています。

100行を超えた場合はちゃんと3桁で表示されます。

コードハイライト

CodeArea では、少し実装が必要ですが、特定の書式・キーワードでハイライトさせることが可能です。このライブラリの特徴として、非同期でのハイライティングが挙げられます。編集内容をリアルタイムでハイライトすることが可能です。実装には ReactFX という、同じ Tomas Mikula 氏の開発した Reactive Streams のライブラリが用いられています。

プログラミング言語 Java での実装例は下記に用意されています。

Groovy のコードハイライトを実装

せっかくなので今回は Groovy での例を実装してみましょう。

Groovy のキーワード一覧を作成

下記の57種類だそうです。識者の方、間違っていたらご指摘ください。

Groovy's keywords

abstract
as
assert
boolean
break
byte
case
catch
char
class
const
continue
def
default
do
double
else
enum
extends
false
final
finally
float
for
goto
if
implements
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
strictfp
super
switch
synchronized
this
threadsafe
throw
throws
transient
true
try
void
volatile
while

これをテキストファイルに保存しておきます。

キーワード着色用のCSSファイルを用意

今回は公式のサンプルをそのまま使わせてもらいます。

キーワード用CSS

.keyword {
    -fx-fill: purple;
    -fx-font-weight: bold;
}
.semicolon {
    -fx-font-weight: bold;
}
.paren {
    -fx-fill: firebrick;
    -fx-font-weight: bold;
}
.bracket {
    -fx-fill: darkgreen;
    -fx-font-weight: bold;
}
.brace {
    -fx-fill: teal;
    -fx-font-weight: bold;
}
.string {
    -fx-fill: blue;
}

.comment {
    -fx-fill: cadetblue;
}

.paragraph-box:has-caret {
    -fx-background-color: #f2f9fc;
}

この CSS ファイルはどこに置いてもよいですが、今回は src/main/resources の直下に置きます。

ベースとなる Highlight クラスを定義

ハイライト処理実装で共通して使うメソッドを持たせたクラスを先に定義しておきます。デモコード JavaKeywordsAsync.java から、ハイライト処理をする部分だけを抜き出して、さらに共通処理だけを abstract クラスとして定義します。

実装例: Highlight.java

highlight メソッド

非同期処理を実行するメソッドです。アプリケーションからはこのメソッドを呼び出します。

Groovy 個別の Highlight クラスを作成

先の Highlight クラスを継承して、Groovy の文法のハイライトを実行するクラスを作ります。

実装例: GroovyHighlight.java

makePattern メソッド

先に用意したキーワードファイルからキーワードを読み込み、コードハイライト用の正規表現を構築するメソッドです。キーワード以外の正規表現は事前に定義してあります。下記を各言語用に変更すれば、それぞれの言語用の Highlight クラスを作成可能です。

コードハイライト用の正規表現

    private static final String PAREN_PATTERN     = "\\(|\\)";
    private static final String BRACE_PATTERN     = "\\{|\\}";
    private static final String BRACKET_PATTERN   = "\\[|\\]";
    private static final String SEMICOLON_PATTERN = "\\;";
    private static final String STRING_PATTERN    = "\"([^\"\\\\]|\\\\.)*\"";
    private static final String COMMENT_PATTERN   = "//[^\n]*" + "|" + "/\\*(.|\\R)*?\\*/";

computeHighlighting メソッド

CodeArea の text を取得し、コードハイライトを施せる形式に変換するメソッドです。

Controller クラスに処理を追加

initialize メソッドの最後の行に下記を追加してください。

initialize()

new GroovyHighlight(scripterInput).highlight();

さらに、先ほど用意したキーワード着色用 CSS ファイルの URI を Scene オブジェクトの stylesheets に追加してください。

src/main/resources直下の"keywords.css"をstylesheetsに追加

final ObservableList<String> stylesheets = thisStage.getScene().getStylesheets();
stylesheets.add(getClass().getClassLoader().getResource("keywords.css").toExternalForm());

これで仕込みは完了です。

修正後のスクリーンショット

試しに下記の FizzBuzz コードを入力してみましょう。

FizzBuzz

int i = 0

(1..100)
  .collect{it % 15 == 0 
    ? "FizzBuzz" 
    : it % 3 ==0 
      ? "Fizz" 
      : it % 5 == 0 
        ? "Buzz" 
        : it
  }
  .forEach{print it + ", "}

ご覧のように、int は赤っぽい文字に、コメントは薄緑色に、 " で囲われている文字列リテラルは青になっています。

実装サンプル

その他のコードハイライトの簡単な実装例は下記のリポジトリに置きましたので、ご興味があればご覧ください(アプリケーション本体は入っておりません)。

(追記) 日本語入力の不具合について

……と、ここまで推してきた RichTextFX ですが、実際のアプリケーションに組み込む前にこの記事を書いていて、後ほど見過ごせないバグに気付いてしまいましたので追記します。

何がおかしいか？

まず、下記の画像をご覧ください。テキストエリアが3つ並んだウィンドウが表示されていて、そのうち左のテキストエリア(RichTextFX の CodeArea)に「となりの」と入力し、変換候補を表示している状態です。

何か違和感はありましたか？そう、入力したテキストと変換候補が画面左上に出ていますね。なかなかお間抜けな状態です……これは RichTextFX のテキストコントロールクラスが javafx.scene.control.TextInputControl を実装していないことが原因らしいです。 ~~作者の方はマルチバイト文字の入力が必要なかったのでしょうかね……~~

ほかに誰もおかしいと思わなかったのか？

もちろんそんなことはなく、指摘して改善策を提案している方が Issue を作成していました。

How to insert text using an Input Method #146

InputMethodRequests を実装する

上記の Issue を見ると「InputMethodRequests を実装して解決した」とのことでしたので、それで改善できるならやってみようと思い、実装してみたのがこちらの EditorInputMethodRequests です。SNAPSHOT の 1.0.0 で追加された getCaretBounds() というメソッドを使えば割と簡単に実装できました。

codeArea.setInputMethodRequests(new EditorInputMethodRequests(improved));

まあ、それよりも setOnInputMethodTextChanged の中身を実装する方が大変だったのですが……

codeArea.setOnInputMethodTextChanged(this::handleInputMethodEvent);

改善後

これらの修正を適用したのが中央のテキストエリアです。これにより

ちゃんと入力テキストがキャレットの位置に表示され、変換候補もその下に表示されています。これでようやく最低限のエディタとして使えるレベルになりました。

終わらない改善の日々

……と思ったらそんなことはありませんでした。

右のテキストエリアは JavaFX 標準の TextArea です。入力テキストの未確定部分が下線できょうちょうされていて、変換候補の範囲が青背景で強調されています。このレベルにならないと実用にはきついのですが、現在ここまでの機能は実装できていません。もし興味がございましたら、下記3クラスのコードを参考にチャレンジしてみると面白いかもしれません。

1.0.0-SNAPSHOT を使う際の注意

なお、2017年2月6日時点で RichTextFX の 1.0.0-SNAPSHOT を使うには、build.gradle の repositories に https://oss.sonatype.org/content/repositories/snapshots/ のリポジトリ指定の追加が必要です。

build.gradle

repositories {
    mavenCentral()
    maven {
        url 'https://oss.sonatype.org/content/repositories/snapshots/'
    }
}

サンプルアプリケーションのリポジトリ(GitHub)

JavaFX 9以降

JavaFX Advent Calendar 2016 の @nodamushi さんの記事「JavaFX9が良い感じになってきた件」によると、JavaFX 9 では行番号表示のできる TextArea の実装が標準の API だけで可能になるそうです。期待が高まります。

まとめ

JavaFX でリッチなテキスト編集機能を実装するのに役立つライブラリ RichTextFX を、ごく簡単に紹介致しました。公式のリポジトリには XMLエディタやフォントサイズ変更といった、今回紹介できなかったさまざまなデモコードが用意されています。
Markdown エディタや HTML エディタを開発されている方や、あるいは JavaFX で開発したプレゼンテーションツールにサンプルコードを載せたい方は、このライブラリの導入を検討してみるとよいかもしれません。

概要

RichTextFX とは

ライセンス

要件

RichTextFX を導入して可能なこと

まず導入する

環境

お試し用コード

修正前

まず置き換える

Gradle の依存を追加

FXML の修正

import の追加

TextArea タグを CodeArea に置換

ソースコードの修正

import の修正

TextArea を CodeArea に置換

setText を replaceText に変更

修正後のスクリーンショット

行番号を表示する

import の追加

ParagraphGraphicFactory の指定

修正後のスクリーンショット

コードハイライト

Groovy のコードハイライトを実装

Groovy のキーワード一覧を作成

キーワード着色用のCSSファイルを用意

ベースとなる Highlight クラスを定義

実装例: Highlight.java

highlight メソッド

Groovy 個別の Highlight クラスを作成

実装例: GroovyHighlight.java

makePattern メソッド

computeHighlighting メソッド

Controller クラスに処理を追加

修正後のスクリーンショット

実装サンプル

(追記) 日本語入力の不具合について

何がおかしいか？

ほかに誰もおかしいと思わなかったのか？

InputMethodRequests を実装する

改善後

終わらない改善の日々

1.0.0-SNAPSHOT を使う際の注意

サンプルアプリケーションのリポジトリ(GitHub)

JavaFX 9以降

まとめ

参考

RichTextFX CSS Reference Guide

今回のソースコード