今回も、引き続きJavaFXについて紹介していきます。今回取り上げるのは、JavaFXの見た目を設定するためのCSSです。

JavaFXにおけるUIの装飾

 JavaFXで描画要素の見た目を変更するには、描画要素のプロパティを設定します。例えば、ラベルの文字列の色を変更するのであれば、textFillプロパティを設定します。

 プロパティを設定するには以下の3種類の方法があります。

  • Java
  • FXML
  • CSS

 例えば、ラベルの文字列を赤にしてみましょう。Javaで設定するのであれば、リスト1のように記述します。

リスト1●ラベルの文字列色の設定 (Java)

label.setTextFill(Color.RED);

 リスト1では変数labelの型がjavafx.scene.control.Labelクラスだとしています。プロパティの設定は単純にセッタメソッドで行うだけです。しかし、Javaで記述すると、色を変更するというちょっとした変更でも、コードの変更が必要になり、再ビルドが必須です。

 また、プロパティの設定がコードのどこにあるのかが分かりにくくなってしまい、保守性も悪くなってしまいます。では、FXMLで記述するのではどうでしょうか。FXMLで記述した例をリスト2に示します。

リスト2●ラベルの文字列色の設定 (FXML)

<Label text="Hello, World!" textFill="RED" />

 FXMLで設定するには属性もしくは子要素で行います。FXMLで記述した場合、変更したとしても再ビルドは必要ありません。しかし、表示されている全てのラベルの色を一括で変更するようなことはできません。また、見た目の設定は、できれば一カ所にまとめて起きたいところです。

 そこで、筆者がお勧めするのは最後のCSSを使用する方法です。

CSSの設定

 CSSを設定する方法も複数あります。

  • テーマとしてスタイルシートを指定
  • シーンもしくはコンテナに対してスタイルシートを指定
  • 描画要素(Node)にCSSを埋め込む

 テーマはデフォルトのスタイルとして使用されます。JavaFX 2までデフォルトのテーマはCaspianでしたが、JavaFX 8でModenaに変更されました。しかし、テーマを作成することは、かなり大変なので、本解説では省略します。

 最後の埋め込みは、JavaのコードであればsetStyleメソッド、FXMLであればstyle属性を使用して、文字列としてCSSを記述する方法です。この方法はお手軽なのですが、プロパティを直接設定することと同じになってしまいます。埋め込みでCSSを指定するのは、イベント処理で動的にCSSを設定する必要がある場合など、必要最低限にするのがお勧めです。