Hello Worldサンプルの作成

では、早速サンプルを作ってJavaFXを試すとしよう。最初に作成するサンプルは、ウィンドウに"Hello, JavaFX"と表示するだけの単純なサンプルだ。

以下のコードをエディタにコピー&ペーストして、「HelloWorld.fx」という名前で保存する。なお、JavaFXのソースファイルは、拡張子を「fx」にする必要がある。

リスト1: HelloWorld.fx

// (1) JavaFXライブラリのインポート
import javafx.ui.*;

/* (2) メインウィンドウ */
Frame {
    title: "Hello, JavaFX"
    width: 200
    height: 50
    // (3) ウィンドウ内部に表示するラベル
    content: Label {
        text: "Hello, JavaFX"
    }
    visible: true
};

これがJavaFXコードだ。Javaと同じく、コメントは「//」で始めるか「/* */」で囲む仕様になっていることがお分かりだと思う。また、JavaScriptをご存じの方は、一見してJSONに似ているとお思いではないだろうか(カンマで区切る必要がない、などの違いはあるが)。

このサンプルのポイントを説明すると(番号はプログラム中の数字に対応)、

(1) Javaと同じくimport文を使える。ここではjavafx.uiパッケージ内のクラスを全て取り込み、FrameやLabelを使用可能にしている。

(2) メインのウィンドウはjavafx.ui.Frameクラスで作成する。簡潔に書いてはいるが、実際はFrameクラスのコンストラクタを呼び出してインスタンスを生成している。

(3) Frameの中括弧({})内で、"属性名: 属性値"という形式で、インスタンスの属性を設定している。ウィンドウ内部に"Hello, JavaFX"というテキストを表示するため、content属性にjavafx.ui.Labelクラスを指定し、そのラベルのtext属性に表示するための文字列を指定している。

といったところだ。次はこのスクリプトを実行してみよう。

HelloWorldサンプルの実行

このサンプルを実行するには、以下の2つにクラスパスを通す必要がある。

  • OpenJFXが提供するライブラリ。libディレクトリにあるFilters.jar、javafxrt.jar、swing-layout.jarの3つ
  • このファイルが置かれたディレクトリ。つまり、fxファイルはクラスパス内に存在する必要がある

そして実行するには、net.java.javafx.FXShellクラスをjavaコマンドで実行し、コマンドライン引数に「拡張子を除いたfxファイルのファイル名」を指定する。

したがって、今回のサンプルでは以下のようなコマンドを実行すればよい(libディレクトリを、環境変数JFX_LIBにセットする場合)。

リスト2: サンプルの実行コマンド (javaコマンドは実際には1行で記述)

> set JFX_LIB=OpenJFX\trunk\libディレクトリへのパス
> cd HelloWorld.fxファイルがあるディレクトリ
> java -classpath .;
      %JAVAFX_LIB%\javafxrt.jar;
      %JAVAFX_LIB%\Filters.jar;
      %JAVAFX_LIB%\swing-layout.jar
      net.java.javafx.FXShell HelloWorld

実行すると、コンソールに以下のような出力(出力結果は環境によって異なる)が行われた後、画面1のようなウィンドウが表示される。

リスト3:HelloWorldサンプル実行後のコンソール出力

compile thread: Thread[AWT-EventQueue-0,6,main]
compile 2.469
init: 1.015

画面1: HelloWorldサンプルの実行結果

うまく実行できただろうか。

つまり、net.java.javafx.FXShellクラスがJavaFX Script実行環境のエントリポイントだということだ。

もう1つのポイントは、fxファイルにはクラスパスが通されている必要があるということ。fxファイルが見つからなかった場合はエラーとなる。

実は、bin\javafx.batというバッチファイルを利用すれば、クラスパスやエントリポイントの指定を上手くやってくれるのだが、今回はあえて知識を深めるため、自分でjavaコマンドを実行するかたちにした。

実行結果は、まさにSwingアプリケーションだ。そう、JavaFXは裏でSwingやJava2Dを直接利用しているため、それらで実現可能なことはJavaFXでもできるのである。FrameクラスやLabelクラスは裏でjavax.swing.JFrameやjavax.swing.JLabelを使用しているし、もちろんJTableやJTreeに対応したJavaFXクラスも存在する。

HelloWorldサンプルを手続き型で書いてみる

さて、はじめてのJavaFX Scriptを体験したわけであるが、ピンと来ていない読者もおられるかもしれない。そこで、先ほどのコードに対する理解を深めるために、先のHelloWorldサンプルをSwingのような手続き型のコードに書きなおしてみよう。

リスト4:HelloWorldサンプルを手続き型のコードに書きなおす

import javafx.ui.*;

// 変数winに、Frameのインスタンスを代入
var win = new Frame();
win.title = "Hello, JavaFX";
win.width = 200;
win.height = 50;
win.content = new Label() {
    text: "Hello, JavaFX2"
};
win.visible = true;

このコードは、先ほどの例と全く同じ意味になる。コードを見比べた場合どちらが簡潔で分かりやすいかは明白だろう(このコードでは、Labelを作成して属性をセットする部分は宣言的に書いて簡潔にしているのにも関わらず、だ)。

まとめ

説明したいことはまだまだあるが、今回はここで字数が尽きてしまった。近いうち、より詳しい解説記事を載せる予定なので期待してほしい。

JavaFXを使用すると、JavaでUIをプログラミングするための労力がSwingプログラミングなどに比べて激減する。しかも、Java APIを呼び出すこともできるので、ビジネスロジック/サービスはJavaで、UIはJavaFX Scriptで書くといった使い分けも可能だ。モバイル機器を含め、さまざまなデバイスで実行できるようになることも確約されている。

現在のところ、IDEのプラグインでは構文チェックやコード補完といったことしかできないが、将来はWYSIWYGなヴィジュアルエディタが登場し、より簡単にリッチなUIを構築できるようになるだろう。将来を大いに期待できる技術であると言える。