3 CSSを使用したレイアウト・ペインのスタイル設定

レイアウト・ペインのスタイル・プロパティ

CSSを使用して、あらゆるタイプのレイアウト・ペインに対して背景、枠線およびパディングのプロパティを設定できます。いくつかのタイプのレイアウト・ペインには、追加のプロパティを設定できます。たとえば、HBoxおよびVBoxペインには、スペースと位置合せのプロパティを設定でき、タイル・ペインには、方向、推奨行数、推奨列数およびその他のプロパティを設定できます。ペインの背景と枠線には、イメージを使用できます。

各タイプのレイアウト・ペインで使用可能なプロパティのリストは、JavaFX CSSリファレンス・ガイドを参照してください。Regionクラスにリストされているプロパティは、Regionクラスの子孫であるすべてのレイアウト・ペインで使用できます。

シーンへのスタイル・シートの割当て

スタイル・シートを準備した後、そのスタイル・シートをアプリケーションのシーンに追加する必要があります。これにより、すべてのノードが、スタイル・シートで定義されたスタイルにアクセスできるようになります。例3-3は、レイアウト・サンプルのスタイル・シートの追加方法を示しています。このサンプルでは、スタイル・シートはアプリケーションのクラス・ファイルと同じディレクトリにあります。

Scene scene = new Scene(border);
scene.getStylesheets().add("layoutsamplecss/layoutstyles.css");

共有プロパティのスタイルの定義

すべてのレイアウト・ペインには、CSSを使用して管理できる一連の基本プロパティがあります。これには、ペインの背景、枠線、パディング、形のプロパティなどが含まれます。複数のペインでこれらのプロパティのスタイル設定が共通している場合、単一のスタイル・クラスを定義し、そのクラスを各ペインに割り当てることができます。

カスタマイズされたレイアウト・サンプルでは、いくつかのレイアウト・ペインに同じ背景色が使用されています。この色は、例3-4に示されている.paneスタイル・クラスを使用して設定されます。

.pane {
    -fx-background-color: #8fbc8f;
}

ペインに対して背景色の設定のみが必要な場合は、割り当てる必要があるのは.paneスタイルのみです。追加のスタイルを設定する必要がある場合は、ペインに複数のスタイルを割り当てることができます。例3-5では、.paneスタイルのみをアンカー・ペインに追加し、.paneスタイルと.gridスタイルをグリッド・ペインに追加しています。

AnchorPane anchorpane = new AnchorPane();
anchorpane.getStyleClass().add("pane");

GridPane grid = new GridPane();
grid.getStyleClass().addAll("pane","grid");

枠線付きペインのスタイル設定

枠線付きペインには、共有プロパティのスタイルの定義で説明されている基本セット以外の追加プロパティはありません。レイアウト・サンプルでは、枠線付きペインはスタイルが設定されていません。ただし、枠線付きペインのスタイルを指定するには、他のペインの場合と同様にスタイル・クラスを定義して、それをペインに割り当てます。

HBoxペインのスタイル設定

すべてのレイアウト・ペインに共通のプロパティの基本セットに加え、HBoxペインには、位置合せ、スペース、および高さの占有に関するプロパティがあります。

図3-1に示されているレイアウト・ペインには、2つのHBoxペインが含まれています。最初のHBoxペインは上部にあり、「Current」ボタンと「Projected」ボタンが含まれています。2番目のHBoxペインは下部付近にあり、「Save」ボタンと「Cancel」ボタンが含まれています。

カスタマイズされたレイアウト・サンプルでは、両方のHBoxペインに同じ背景色とスペースが指定されています。これらのプロパティは、例3-1に示されているスタイル定義で設定されます。

「Save」ボタンと「Cancel」ボタンを含む2番目のHBoxには、図3-2に示すように、角の丸めとパディングの縮小も指定されています。

図3-2 スタイルが設定されたHBoxペイン

「図3-2 スタイルが設定されたHBoxペイン」の説明

定義したスタイル設定をHBoxペインに対して使用するには、.hboxスタイルをそのペインに割り当てます。パディングをオーバーライドし、角を丸めるための追加のプロパティを設定するには、例3-6に示されているスタイル定義を使用して、IDを2番目のHBoxペインに設定します。

#hbox-custom {
    -fx-background-radius: 5.0; 
    -fx-padding: 8;
}

例3-7は、2番目のHBoxペインへのスタイルの割当て方法を示しています。

HBox hb = new HBox();
hb.getStyleClass().add("hbox");
hb.setId("hbox-custom");

VBoxペインのスタイル設定

すべてのレイアウト・ペインに共通のプロパティの基本セットに加え、VBoxペインには、位置合せ、スペース、および幅の占有に関するプロパティがあります。

図3-1の左側のリージョンにあるVBoxペインでは、.paneスタイル・クラスからの背景が使用されています。枠線、パディングおよびスペースは、例3-8に示すように、.vboxスタイル・クラスで設定されます。

.vbox {
    -fx-border-color: #2e8b57;
    -fx-border-width: 2px;
    -fx-padding: 10;
    -fx-spacing: 8;
}

例3-9は、VBoxペインへのスタイルの割当て方法を示しています。

VBox vbox = new VBox();
vbox.getStyleClass().addAll("pane", "vbox");

スタック・ペインのスタイル設定

すべてのレイアウト・ペインに共通のプロパティの基本セットに加え、スタック・ペインには位置合せのプロパティがあります。レイアウト・サンプルでは、スタック・ペインはスタイルが設定されていません。ただし、スタック・ペインのスタイルを指定するには、他のペインの場合と同様にスタイル・クラスを定義して、それをペインに割り当てます。

グリッド・ペインのスタイル設定

すべてのレイアウト・ペインに共通のプロパティの基本セットに加え、グリッド・ペインには、行と列間のスペース、グリッドの位置合せ、およびグリッド行の表示に関するプロパティがあります。

図3-1の中央のリージョンにあるグリッドには、丸い角と、グリッド自体よりも少し小さい白い背景が指定されています。例3-10に示されている.gridスタイル・クラスは、このスタイルを設定し、パディング・プロパティと行と列間のスペースのプロパティを設定します。

.grid {
    -fx-background-color: white;
    -fx-background-radius: 5.0;
    -fx-background-insets: 0.0 5.0 0.0 5.0;
    -fx-padding: 10;
    -fx-hgap: 10;
    -fx-vgap: 10;
}

例3-11は、グリッドへのスタイルの割当て方法を示しています。

GridPane grid = new GridPane();
grid.getStyleClass().add("grid");

このグリッドには、このサンプルの他のレイアウト・ペインで使用されている背景色が指定されていません。ただし、このグリッドを含んでいるアンカー・ペインでは、その背景色が使用されています。グリッドでその親の背景色が使用されるのを回避するには、そのグリッドの背景を目的の色に設定する必要があります。

フロー・ペインまたはタイル・ペインのスタイル設定

すべてのレイアウト・ペインに共通のプロパティの基本セットに加え、フロー・ペインには、位置合せ、方向、および行と列間のスペースに関するプロパティがあります。タイル・ペインには、位置合せ、方向、行と列間のスペース、推奨行数と推奨列数、および推奨幅と推奨の高さに関するプロパティがあります。

レイアウト・サンプルでは、図3-1の右側のリージョンにフロー・ペインまたはタイル・ペインを使用できます。スタイル・クラスに設定されたプロパティは両方のタイプのペインに共通であるため、このサンプルでは同じサンプル・スタイル・クラスが使用されています。例3-12に示されている.flow-tileスタイル・クラスは、パディング・プロパティと行と列間のスペースのプロパティを設定します。

.flow-tile {
    -fx-padding: 10.0 3.0 5.0 0.0;
    -fx-hgap: 4;
    -fx-vgap: 4;
}

フロー・ペインとタイル・ペインでは、背景色に.paneスタイル・クラスも使用されています。例3-13は、フロー・ペインとタイル・ペインへのスタイルの割当て方法を示しています。

FlowPane flow = new FlowPane();
flow.getStyleClass().addAll("pane", "flow-tile");

TilePane tile = new TilePane();
tile.getStyleClass().addAll("pane", "flow-tile");

アンカー・ペインのスタイル設定

アンカー・ペインには、すべてのレイアウト・ペインに共通する一連の基本プロパティ以外の追加プロパティはありません。

図3-1の中央のリージョンにあるアンカー・ペインには、1つのグリッドと1つのHBoxペインがあり、それぞれに独自のスタイルが設定されています。アンカー・ペインに適用されているスタイル設定は背景色のみで、これは例3-4に示されている.paneスタイル・クラスによって設定されます。

例3-14は、アンカー・ペインへのスタイルの割当て方法を示しています。

AnchorPane anchorpane = new AnchorPane();
anchorpane.getStyleClass().add("pane");