JavaScriptでJavaFXを動かす

Java7でもできるかと思いますが、Java8からはJavaFXが標準ライブラリとして含まれるようになりましたので、新しいJavaScriptのライブラリのNashornと共に動かしてみます。

まずはNetBeansの最新版を入手

※もう環境がある人は読み飛ばしてください。

私はEclipse派なので、最低限の環境のNetBeans8.0をインストールします。
https://netbeans.org/downloads/?pagelang=ja
こちらから、Java SE版を入手してインストールしてください。

JDK8のインストール

略・・・

プロジェクトの構成

適当なJavaプロジェクトを作成し、適当なパッケージを作成してください。今回の例ではsampleパッケージです。

Javaプログラム

Java側はJavaFXのブートストラップとして実行します。JavaFXアプリケーションの起動、スクリプトエンジンの取得、実行がメインです。

Sample.java

package sample;

import java.io.InputStream;
import java.io.InputStreamReader;
import javafx.application.Application;
import javafx.stage.Stage;
import javax.script.Bindings;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class Sample extends Application {

    public static void main(String[] args) throws Exception {
        launch();
    }

    @Override
    public void start(Stage stage) throws Exception {
        //スクリプトエンジンを取得
        ScriptEngineManager manager = new ScriptEngineManager();
        ScriptEngine engine = manager.getEngineByName("js");

        //ステージをバインディングする設定
        Bindings bindings = engine.createBindings();
        bindings.put("stage", stage);

        //スクリプトを読み込んで取得
        InputStream in = Sample.class.getResourceAsStream("fx.js");
        InputStreamReader reader = new InputStreamReader(in, "UTF-8");
        engine.eval(reader, bindings);

        //ステージを表示
        stage.show();
    }
}

今回は意図的にステージの表示をJava側で行っています。

JavaScriptプログラム

Javaのソースと同じところにfx.jsというファイル名でJavaScriptファイルを配置します。UIの操作はここで行います。

fx.js

//ルートのコンテナ作成
var root = new javafx.scene.layout.VBox();

//シーンを作成
var scene = new javafx.scene.Scene(root, 300, 300);

//ラベルを作成
var label = new javafx.scene.control.Label();
root.children.add(label);

//ボタンを作成
var button = new javafx.scene.control.Button();
root.children.add(button);
button.text = "Hello World!!";

//ボタンにイベントハンドラを設定
var count = 0;
button.onAction = function(e){
    label.text = String(++count);
};

//ステージのセットアップ
stage.scene = scene;
stage.title = "Hello World Sample";

特筆すべきなのは、onActionに関数を渡せるというところですね。EventHandlerのインスタンスを渡す必要あるのかなと思いましたが、関数オブジェクトでOKでした。FXML内でJavaScriptを書けますので、サポートされているのでしょう。

動かしてみる

ボタンをクリックすると、カウントアップされます。

最後に

JavaFXとJavaScriptの親和性が思った以上に高いので、HaxeやJSX等と組み合わせると面白いかもしれません。