JavaFX はじめの一歩 - coma2n’s diary

AdobeのAir、MSのSilverlightそして第三のRIAプラットフォームであるSunのJavaFX。その中での一押しはもちろんSilverlightだけど「敵を知り己を知れば100戦危うからず」と昔のエライ人が言っていたように、Silverlightを推すならば「敵」すなわち競合するプラットフォームの事も知っておく必要がある。ということでJavaFXに手を出してみた。

開発環境の構築

まずは開発環境の構築から。

JavaFXのランタイムから。以下のサイトの「JavaFX Script」っていう項目のZIPをダウンロードしてくる。

https://openjfx.dev.java.net/downloads.html

ダウンロードした「OpenJFX-xxxxxxx.zip」を解凍するとできる「trunk」フォルダの中にある以下のファイルをコピーする。

bin
- javafx.bat
- javafxstart.bat
lib
- Filters.jar
- javafxrt.jar
- swing-layout.jar

これらのファイルのフォルダ構造を保ったまま、適当なところ（例えば「c:\JavaFX」とか）にコピーして「bin」フォルダにパスを通しておく。

開発にはEclipseを使おうかと思ったけど、クソ重たいのでテキストエディタでやる。Eclipse用のJavaFX プラグインも今のところショボイ（コード補完が効かない）のでIDEを使う理由もないしね。

Hello, World

では実際にJavaFX スクリプトを書いてみる。コマンドプロンプトを起動して、適当な場所で「helloworld.fx」というファイルを作成する。JavaFX スクリプトのソースファイルは拡張子が「fx」になる。

そして、以下のように記述する。

helloworld.fx

import javafx.ui.*;

var window = new Frame();
window.title = "Hello, World";
window.width = 200;
window.height = 200;
window.visible = true;

解説は後にして、とりあえずこのスクリプトを実行するために以下のコマンドをコマンドプロンプトから実行する（拡張子がfxであれば省ける）。

PS > javafx helloworld.fx

実行すると以下のウィンドウが表示されるはず。

解説

まずimport宣言から、

import javafx.ui.*;

これはJavaでお馴染みの構文で、ここでは「javafx.ui」パッケージの全要素をインポートしている。

次はvarで変数を宣言して、new演算子でFrameクラスをインスタンス化している。

var window = new Frame();

後は各種属性を設定して、最後にvisibleをtrueにする事でウィンドウを表示している。

ふ〜ん、Javaにしては特殊な構文だけど、スクリプト言語を触ったことがあれば特に目新しいことは無いのですんなり理解できると思う。

これだけならJavaをちょっと書き易くしただけに見えるけど、JavaFXではもっと簡潔な書き方ができる。

helloworld.fx

import javafx.ui.*;

var window = Frame {
   title:"Hello, World"
   width:200
   height:200
};
window.visible = true;

なんかC#のオブジェクト初期化子とJavaScriptのマップを足して2で割ったみたいなのが出てきた。

new演算子を無くしてクラス名の後に中括弧で始まる属性のリストを宣言している。そのリストの中は「属性名：値」という形式で設定する属性を宣言する。各要素をカンマで区切らないところに注意。これはカンマで区切るのは配列を意味するからだと思われる。

これだけではつまらないので、今度はボタンとそれがクリックされた時にメッセージボックスを表示してみる。

helloworld.fx

import javafx.ui.*;

var window = Frame {
   width:200
   height:200
   content:CenterPanel {
       content:Button {
           text:"push me"
           action:operation() {
               var msg = MessageDialog {
                   message:"Hello, World"
               };
               msg.visible = true;
           }
       }
   }
};
window.visible = true;