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を設定しなくても反映されます。逆にペインだけでなくコントロールを含めてすべてに適用されてしまいます。