Edited at

JavaFXでHelloWorld

More than 3 years have passed since last update.

JavaFX の Hello World 作成方法メモ。

e(fx)clipse は使ってないけど、後々必要になるので入れておく。


環境


OS

Windows7 64bit


Java

1.7.0_25


IDE

Eclipse Juno


Scene Builder

1.1


準備


Java FX のインストール

Java のバージョンが 1.7.0_6 以上なら標準でバンドルされてるので不要。


Scene Builder のインストール

Oracle が提供してるフリーの Java FX 用 GUI デザインツール。

ここからダウンロードできる。

1.1 の Windows 版をダウンロードして、インストーラに従ってインストール。


Eclipse プラグイン(e(fx)clipse)のインストール

e(fx)clipse という Java FX 用のプラグインがあるので、マーケットプレースからインストール。

ちなみに、サポートしている Eclipse は、


We support Eclipse Kepler (4.3.x) and Juno (4.2.x, 3.8.x).


らしい(e(fx)clipse - JavaFX Tooling and Runtime for Eclipse)。


e(fx)clipse に Scene Builder の場所を設定する

「ウィンドウ」→「設定」→「JavaFX」と選択。

「SceneBuilder executable」に先ほどインストールした Scene Builder の実行ファイル( JavaFX Scene Builder 1.1.exe )のパスを入力する。

Scene Builder の場所を設定


実装


Java プロジェクトを作成する

普通に Java プロジェクトを作成する。


Java FX の jar をクラスパスに追加する

追記ここから

Java8 からは、 JavaFX も標準で組み込まれるようになったので、以下の作業は不要になっています。

追記ここまで

そのままだと Java FX の jar がクラスパスに入ってないので実装できない。なので追加する。

Java FX の jar ( %JDK のインストールフォルダ%\jre\lib\jfxrt.jar )をビルド・パスに追加する。

JavaFXのjarを追加


Scene Builder で画面を作成する

Scene Builder を起動する。

左の ライブラリパネル から「Label」を選択して、中央にドラッグ&ドロップ。

Labelの配置

右の インスペクタパネル の「プロパティ」でテキストとかフォントとかを適当にいじる。

プロパティを変更する

Eclipse プロジェクトの src フォルダの直下に hello.fxml という名前で保存する。

hello.fxmlの保存場所


Java の実装


JavaFXMain.java

package fx;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class JavaFXMain extends Application {

public static void main(String[] args) {
// JavaFX の実行
Application.launch(args);
}

@Override
public void start(Stage stage) throws Exception {
// hello.fxml の読み込み
Parent root = FXMLLoader.load(getClass().getResource("/hello.fxml"));

// Scene の作成・登録
Scene scene = new Scene(root);
stage.setScene(scene);

// 表示
stage.show();
}
}



実行結果

Hello World実行結果


イベント処理

ボタンのクリックイベントを取得する。


fxml の編集

画面にボタンとラベルを配置する。

ボタンとラベルを配置

左の 階層パネル で「AnchorPane」をクリックして、右のインスペクタパネルの「コード」の「コントローラ・クラス」に fx.HelloController と入力。

コントローラクラス

追記ここから

Scene Builder 2.0 では、コントローラクラスを指定するための項目は画面左下に移動されました。

javafx.JPG

最初分からずに混乱した。。。

追記ここまで

ボタンとラベルをそれぞれクリックして、インスペクタパネルの「コード」の「fx:id」を以下のように入力する。

コンポーネント
fx:idに指定する値

ボタン
helloButton

ラベル
helloLabel

ラベルのfx:idを指定したところ

ボタンを選択して、インスペクタパネルの「コード」の「On Action」に onHelloButtonClicked と入力。

ボタンにOnActionを指定


コントローラクラスの作成

「AnchorPane」で指定した fx.HelloController を実際に作成する。


HelloController.java

package fx;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

public class HelloController {

@FXML private Button helloButton;
@FXML private Label helloLabel;

private int cnt;

@FXML
public void onHelloButtonClicked(ActionEvent event) {
this.helloLabel.setText("clicked! : " + cnt);
cnt++;
}
}



実行結果

実行結果

ボタンをクリックするたびに、カウントが上がっていく。


説明


コントローラクラス

MVC でいうところのコントローラに当たるクラス。

「AnchorPane」の「コントローラ・クラス」に指定した Java クラスが、その画面を制御するためのコントローラになる。

クラス自体は POJO でいい。


コントローラクラスのフィールドと画面上のコンポーネントを紐付ける

ボタンなどのコンポーネントには fx:id という属性が指定できる。

その値と同じ名前のフィールドをコントローラクラスに作成し、 javafx.fxml.FXML アノテーションを付与すると、 fxml 上のコンポーネントとコントローラクラスのフィールドが紐付けられる。


@FXMLアノテーションで紐付ける

import javafx.fxml.FXML;

import javafx.scene.control.Button;
import javafx.scene.control.Label;

public class HelloController {
@FXML private Button helloButton;
@FXML private Label helloLabel;
}



イベントを紐付ける

ボタンの「On Action」に指定した名前と同名のメソッドをコントローラクラスに作成し、 @FXML アノテーションを付与すると、ボタンを選択したイベントとメソッドが紐付けられる。


@FXMLアノテーションでイベントを紐付ける

import javafx.event.ActionEvent;

import javafx.fxml.FXML;

public class HelloController {
@FXML
public void onHelloButtonClicked(ActionEvent event) {
// イベント処理
}
}


引数に ActionEvent を受け取るようにしているが、使わないのであれば引数無しでも紐付けは可能。


引数無しでもOK

public class HelloController {

@FXML
public void onHelloButtonClicked() {
// イベント処理
}
}


コントローラクラスに初期化処理を記述する

画面表示時に初期化処理を実装したい場合は、コントローラクラスに javafx.fxml.Initializable インターフェースを実装させる。


Initializableインターフェースを実装する

import java.net.URL;

import java.util.ResourceBundle;
import javafx.fxml.Initializable;

public class HelloController implements Initializable {

@FXML private Label helloLabel;

@Override
public void initialize(URL url, ResourceBundle bundle) {
this.helloLabel.setText("no click");
}
}


initialize(URL, ResourceBundle) メソッドが画面表示時にコールバックされるので、ここに初期化処理を書けばいい。


参考