PR

 今月は、GUIの見ばえを決めるスタイリングについて紹介します。

 Swingではコンポーネントのプロパティでフォントや色などを設定します。しかし、たとえばアプリケーション全体のフォントを設定したいような場合、意外にやっかいです。

 一方で、SwingではNimbus Look&Feelや、Metal Look&Feelなどのように、Look&Feelをすべて入れ替えることも可能です。しかし、開発者がNimus Look&FeelのようなLook&Feelを作成することは容易にはできません。

 もちろん、Synth Look&Feelを利用すれば、XMLでLook&Feelを定義することが可能になり、Look&Feelを作成することが比較的容易になりました。しかし、たとえば既存のLook&Feelの一部だけ変更したいような場合には、Synth Look&Feelは向きません。

 このようにSwingでのスタイリングはいろいろと制約がありました。

 これに対し、JavaFXでは3種類の方法でスタイリングを設定することができます。特に、CSSを用いたスタイリングは、JavaFXの大きな特徴の1つです。

 さらに、JavaFX 8からは、SwingのLook&Feelに相当するテーマを変更することも可能になります。

 そこで、今回はCSSを中心に、JavaFXでのスタイリングについて紹介していきます。

スタイリングを決める3種類の手法

 JavaFXでフォントや色などを決める手法には次の3種類があります。

  • プロパティを設定
  • 外部CSSファイル
  • インラインCSS

 今まで本連載ではすべてプロパティに対してセッターメソッドで値を設定、もしくはFXMLでプロパティを設定していました。これ以外にJavaFXではCSSが使えるようになったわけです。

 CSSの設定には外部のCSSファイルを読み込む手法と、ノードに対して直接インラインで設定する手法があります。

 外部のCSSファイルを読み込むには、javafx.scene.SceneクラスのstylesheetsプロパティにCSSファイルをセットします。複数のCSSファイルを使用できるようにstylesheetsプロパティの型はjavafx.colletions.ObservableListクラスになっています。

 たとえば、style1.cssファイルとstyle2.cssファイルを読み込むには次のように記述します。

リスト1●外部CSSファイルの読み込み (Java)
        Scene scene = ...;

        scene.getStylesheets().addAll("style1.css", "style2.css");

 FXMLで外部CSSファイルを読み込むには、FXMLでのルートコンテナの子要素として記述を行ないます。たとえば、ルートのコンテナがjavafx.scene.layout.VBoxだった場合、次のようになります。なお、VBoxの属性などは省略してあります。

リスト2●外部CSSファイルの読み込み (FXML)
<VBox>
     <<省略>>

  <stylesheets>
    <URL value="@style1.css" />
    <URL value="@style2.css" />
  </stylesheets>
</VBox>

 インラインでCSSを記述するにはjavafx.scene.Nodeクラスのstyleプロパティで設定します。たとえば、javafx.scene.control.Labelオブジェクトの文字の色を赤にする場合は次のように記述します。

リスト3●インラインでのCSSの指定 (Java)
        Label label = ...;
        
        label.setStyle("-fx-text-fill: red;");

JavaFXでのCSSの記述法については後述します。

同様の記述をFXMLで行なう場合はリスト4のようになります。

リスト4●インラインでのCSSの指定 (FXML)
        <Label style="-fx-text-fill: red;" text="Label" />

 この3種類の指定法のうち、優先順位がもっとも高いのがインラインでのCSSです。このため、たとえプロパティや外部CSSで値が設定されていても、インラインCSSが優先されます。

 もっとも優先順位が低いのがプロパティを直接設定する方法です。

 このように3種類の指定法があり、目的に応じて設定法を決めるようにします。外部CSSファイルにした場合、プログラムを変更することなく、CSSファイルの記述を変更するだけで、アプリケーションの見ばえを変更することが可能です。

 インラインでCSSを指定するのは手軽にできますが、その反面パフォーマンスは最も悪いことに注意する必要があります。