JavaFXの概要
Java7から採用されたデスクトップUIです。
FXMLによるGUI構成の記述、CSSによるデザインの分離、Prismとよばれるハードウェアアクセラレーション対応の描画エンジン、WebKitベースのブラウザを搭載といったのが特徴ですが、Java界隈以外の人にはまったく知られていない感じがしますね。
グラフを含めてGUI部品は揃っていますし、アニメーションのためのタイムラインもあります。
しかし、ダイアログがなかったり、画面遷移のためのAPIもなかったり、入力値に対するバリデーション機能といったものがありませんので、足らない部分は自分で作り込む必要は出てきます。これらの話しはまた書きたくなったら書くとして、本記事ではJavaFXの基本とプロパティバインドについて書きます。
JavaFXの作業手順
画面の作り方は以下のどちらかを使い分けます。
- FXMLで画面構成
- APIを使って動的に生成
FXMLはエディターで記述ができますが、Scene Builderというツールを使うのが楽です。メンテナンスや多人数開発を考えると直接記述はお勧めしません。
動的に生成するにはAPIを使うことになりますが、コンポーネント単位でScene Builderで作りこんでAPIで埋め込むといった手順を踏むべきでしょう。
FXMLには関連づくクラスを記載します。するとFXML読み込み時に自動的に生成されます。作りは見ていませんがコンテナ管理されているかもです。
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane"
prefHeight="200"
prefWidth="320"
xmlns:fx="http://javafx.com/fxml/1"
xmlns="http://javafx.com/javafx/8"
fx:controller="com.exsample.javafxsample.FXMLController">
<children>
<Label fx:id="label" layoutX="77.0" layoutY="51.0" minHeight="16" minWidth="69" text="Label" />
<Button layoutX="79.0" layoutY="108.0" onAction="#onAction" text="Button" />
<TextField fx:id="nameField" layoutX="79.0" layoutY="75.0" />
</children>
</AnchorPane>
Javaにはアノテーションという便利な仕組みがあるので、GUI部品との関連付けは一発ですね。
package com.exsample.javafxsample;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
public class FXMLController implements Initializable {
@FXML
private Label label;
@FXML
private TextField nameField;
@Override
public void initialize(URL url, ResourceBundle rb) {
}
@FXML
private void onAction(ActionEvent event) {
label.setText(nameField.getText());
}
}
package com.exsample.javafxsample;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class MainApp extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("/fxml/Scene.fxml"));
Scene scene = new Scene(root);
scene.getStylesheets().add("/styles/Styles.css");
stage.setTitle("JavaFX and Maven");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
是非覚えてほしいプロパティバインド
アノテーションでGUI部品に対してプロパティの読み込みや設定ができるのですが、どんなアプリケーションでもモデルとビューは切り分けたいものです。
で、モデルを分離したときにGUI部品に対していちいちSet/Getするのは格好が悪いのでやめましょう。プロパティバインドという仕組みがあります。モデルの値が変わればビューも変わりますし、UIの入力があればモデルの値も変わります。
ちなみにこのモデルは遅延バインドするためのコードになっています。
モデルがJAXBでXMLと相互変換したり、O/Rマッピングする場合は遅延バインドしましょう。
package com.exsample.javafxsample;
import java.util.Objects;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
public class Model {
private StringProperty valueProperty = null;
private String value;
public StringProperty valueProperty() {
if (Objects.isNull(valueProperty)) {
valueProperty = new SimpleStringProperty(value);
}
return valueProperty;
}
public String getValue() {
if (Objects.nonNull(valueProperty)) {
return valueProperty.get();
}
return value;
}
public void setValue(String value) {
if (Objects.nonNull(valueProperty)) {
valueProperty.set(value);
} else {
this.value = value;
}
}
}
コントローラクラスを書き換えます。
ボタンの役割は無視するとして、テキスト入力するとラベルを更新します。
public class FXMLController implements Initializable {
private final Model model = new Model();
@FXML
private Label label;
@FXML
private TextField nameField;
@Override
public void initialize(URL url, ResourceBundle rb) {
label.textProperty().bind(model.valueProperty());
model.valueProperty().bind(nameField.textProperty());
}
@FXML
private void onAction(ActionEvent event) {
}
}
実行例です。
