9 スタイルシートの使用およびUIのプレビュー
この章では、JavaFX Scene Builderを使用して、作成したFXMLレイアウトをプレビューする方法、およびスタイルシートを適用してIssueTrackingLiteアプリケーションのルック・アンド・フィールをカスタマイズする方法について説明します。
次の各項を使用して、作成したGUIレイアウトをプレビューし、スタイルシートを使用してそのルック・アンド・フィールを変更します。
UIのプレビュー
これまでに行ったGUI作業をプレビューするには、次の手順を実行します。
-
メニュー・バーから「プレビュー」を選択し、次に「ウィンドウにプレビューを表示」を選択します。
-
ウィンドウのサイズが変更されたときにツールバー内のボタンおよびテキスト領域のサイズが適切に変更されるように、ウィンドウのサイズを複数回変更します。また、レイアウトを変更すると、「プレビュー」ウィンドウが更新されます。
-
プレビューの表示を停止するには、「プレビュー」ウィンドウを閉じます。
スタイルシートの使用
スタイルシートを適用して、GUIのルック・アンド・フィールをカスタマイズできます。このチュートリアルでは、IssueTrackingLiteサンプルに付属しているスタイルシート・ファイルを使用します。
-
IssueTrackingLiteサンプルにバンドルされているカスケード・スタイルシート(CSS)リソース・ファイルがすでに設定されていることを確認します。「階層」パネルで、ルートのVBoxコンテナを選択します。「インスペクタ」パネルの「プロパティ」セクションをクリックします。図9-1に示すように、「JavaFX CSS」サブセクションの「スタイルシート」テキスト・フィールドに、
IssueTrackingLite.cssスタイルシートがすでに設定されていることに注意してください。これは、FXMLファイルの作成時に設定されたスタイルシートです。 -
「コンテンツ」パネル内のいずれかの要素に対してスタイル・クラスを使用します。
-
「階層」パネルで、ListView要素の行を選択します。
-
「インスペクタ」パネルの「プロパティ」セクションをクリックし、スタイル・クラス・リストにある下向き矢印ボタンをクリックします。図9-2に示すように、「darkList」を選択します。「コンテンツ」パネルのListView要素の外観が濃い灰色に変わることに注意してください。
-
-
メニュー・バーから、「ファイル」、「保存」の順に選択します。
これで、JavaFX Scene Builderを使用したJavaFXアプリケーションのFXMLレイアウトの構築が完了しました。アプリケーションのコンパイルと実行に進み、IssueTrackingLiteアプリケーションをコンパイルして実行します。
