torutkのブログ

ソフトウェア・エンジニアのブログ

画面の背景をCSSで一括設定するには

id:torutk:20140801 で、ペイン(AnchorPane、BorderPane、HBox、・・・などのレイアウトコンテナクラス)はデフォルトのテーマ(caspianやmodena)のCSSファイルにレイアウトコンテナクラス名に対応するセレクタ(クラスセレクタ)が定義されてないので、コントロール(Button、Label、・・・などのクラス)と違って単に.hbox {...} のようにCSSにクラス名に対応するセレクタで見栄えの設定をしただけでは表示に反映されなかったことについて述べました。

背景をダーク系にしたい場合、ペインの領域をすべてコントロールが覆う場合はコントロールの背景色が表示されるので問題ありませんが、ペインの一部をコントロールが占める場合、余白の部分はデフォルトのテーマの背景色(白系)となってしまいます。

そこで、各ペインのクラスに対応したセレクタで背景色を定義し、SceneBuilderで画面に貼ったペインそれぞれのプロパティstyleclassにそのセレクタを指定する必要があります。

.hbox {
    -fx-background-color: #1d1d1d;
}
.vbox {
    -fx-background-color: #1d1d1d;
}
  :(以下略)

と定義した上で、画面に貼ったHBox、VBoxのそれぞれ個々のインスタンスのプロパティstyleclassにhboxやvboxと設定します(SceneBuilderならドロップダウンリストから選択します)。

これは、割と単純作業ですがゆえに手間で、こういう手間は楽しさを半減させてしまいます。そこで、もうちょっと効率のよい方法を探してみました。

方法1)画面全体(最背面)のペインの背景色を指定

画面全体の背景色を指定するのであれば、ペインはデフォルトでは背景色がないので、一番後ろにあるペインの背景色だけを設定すれば、全体がその背景色に見えます。

http://code.makery.ch/java/javafx-2-tutorial-part4/ で紹介されている方法は、CSSセレクタとして.backgroundを定義し、これを画面全体を覆うペインのstyleclassに指定するものです。

.background {
    -fx-background-color: #1d1d1d;
}

CSSファイルに定義を追加し、AnchorPaneやBorderPaneなど画面の一番下敷きにしているペインのプロパティStyleclassにbackground を指定します。

この方法だと、ペインそれぞれにstyleclassを設定してまわらずに画面全体の背景色が指定できるので便利です。

方法2)rootクラスセレクタに背景色を指定

JavaFX 2で始めるGUI開発 第9回 CSSによるスタイリング(2ページ目) | 日経 xTECH(クロステック)で紹介されている方法は、CSSセレクタとして.rootを定義するものです。

rootクラスセレクタの説明を文献から引用します。

シーングラフのルートコンテナに対するセレクタとして、rootクラスが使用できます。rootクラスを使用するとルートコンテナのスタイリングだけでなく、ルートコンテナの子ノード全体のスタイリングを指定できます。

.root {
    -fx-background-color: #1d1d1d;
}

CSSファイルに定義を追加します。この方法は、いずれかのstyleclassプロパティにrootを設定しなくても反映されます。逆にペインだけでなくコントロールを含めてすべてに適用されてしまいます。

SceneBuilder 2.0では.rootの設定がレイアウト表示に反映されない

SceneBuilder 2.0では、レイアウト表示(中央ペイン)に.rootの背景色設定が反映されません。ただし、[Preview]メニュー > [Show Preview in Window]で表示すると.rootの背景色が反映されたウィンドウが表示されました。

まとめ

CSSをうまく活用することで、画面全体のテーマを一括で制御できるようになります。これは、SwingやCSSを使わないJavaFXで各部品個々に見栄えの設定をしていく方法にくらべ、プログラムのルック&フィールを調整する手間が大いに減ってプログラミング、特にUIのプログラミングの楽しさが増します。

ただし、CSSに馴染むには少し修練が必要です。
なお、SceneBuilderは[View]メニュー > [Show CSS Analyzer]でCSSの設定を便利に見せてくれる機能があり、ツールで敷居は大分下がってはいます。