11 CSSおよびCSSアナライザによるスタイル設定
この章では、カスケード・スタイルシート(CSS)のサポートについて説明し、JavaFX Scene Builderが提供するCSSアナライザ機能について説明します。
Scene Builderで使用されるJavaFX GUIコントロールは、デフォルトのJavaFX Modenaのルック・アンド・フィールで事前にスタイル設定されています。Scene Builderでは、「ライブラリ」パネルから「コンテンツ」または「階層」パネルにGUIコントロールをドラッグすると、この事前定義されたJavaFXスタイルがすぐにレンダリングされます。図11-1に示すように、レイアウトで使用されるJavaFXテーマを変更するには、メニュー・バーから「プレビュー」を選択し、JavaFXテーマの1つを選択します。ドロップダウン・リストから、ターゲット・プラットフォームに固有のModenaベースのテーマを選択できます。JavaFX 2.xリリースでデフォルトのテーマとして使用されていたCaspianベースのテーマを選択することもできます。また、「インスペクタ」パネルの「プロパティ」セクションを使用してコンポーネントのプロパティを変更するか、またはCSSファイルに独自のスタイル設定ルールを定義することによって、アプリケーションで使用されるスタイルをカスタマイズできます。
現在、Scene BuilderではCSSファイルを生成しませんが、ローカルのCSSエディタを使用してCSSファイルを作成および変更できます。「コンテンツ」パネルに表示された現在のFXMLレイアウトで使用されるCSSファイルに保存した変更は、Scene Builderによってすぐにレンダリングされます。
指定されたコンテナ内でSceneレベルで、またはノード・レベルでインライン・スタイル設定によってCSSルールを追加できます。「インスペクタ」パネルの「プロパティ」セクションの「JavaFX CSS」サブセクションでスタイルシート・リスト・ビューを使用すると、GUI要素がコンテナまたはGUIコントロールのいずれかである場合は、FXMLレイアウトで選択したGUI要素に対して使用するCSSファイルを割り当てることができます。FXMLレイアウトの任意の箇所(最上位の親GUI要素から最下位の要素まで)にスタイルシートを添付できます。
図11-2の左側は「インスペクタ」パネルの「プロパティ」セクションで、レイアウトで使用される最上位のVBoxコンテナにIssueTracking.cssファイルが割り当てられています。図の右側は、ListView要素に割り当てられたdarkListスタイル・クラスを示しています。darkListスタイル・クラスはIssueTracking.cssスタイルシートに定義され、そのコンテナの親である最上位のVBoxコンテナからListView要素によって継承されます。
図11-2 スタイル・クラスおよびスタイルシートのリスト・ビューが表示された「プロパティ」セクション
「図11-2 スタイル・クラスおよびスタイルシートのリスト・ビューが表示された「プロパティ」セクション」の説明
親要素に定義されているCSSルールを使用して、親のGUI要素とそのすべての子要素をスタイル設定できます。GUI要素で使用する特定のスタイル・クラスを定義するには、「インスペクタ」パネルの「プロパティ」セクションでスタイル・クラス・プロパティに追加します。「スタイルシート」プロパティから参照されるCSSファイルはFXMLファイル内から参照されるため、FXMLファイルとともにデプロイされます。
Scene Builderでは、「プレビュー」、「Sceneスタイルシート」を選択し、最後に「スタイルシートの追加」または「スタイルシートを開く」オプションを選択すると、アプリケーションSceneへのスタイルシートの添付をシミュレートできます。この「プレビュー」コマンドは、「root」スタイル・クラスがスタイルシートに定義されている場合に便利です。この場合、スタイル・シートがSceneに添付されると、「root」クラスに定義されたスタイルが「コンテンツ」パネルでレイアウトに適用されます。
次の手順を実行すると、システム・エディタを使用して既存のCSSファイルを編集できます。
-
「インスペクタ」パネルの「プロパティ」セクションで、「スタイルシート」プロパティを見つけて、編集するCSSファイルをクリックします。
-
図11-3に示すように、リスト・ビューの右下隅にあるドロップダウン矢印をクリックします。
-
編集するCSSファイルに対して「開く」コマンドを選択します。
ドロップダウン・メニューから使用可能な表示コマンドを使用して、システム内のCSSファイルの場所を表示できます。「CSSアナライザ」パネルからCSSファイルに移動することもできます(後述する「CSSアナライザ」パネルの使用を参照)。
「CSSアナライザ」パネルの使用
「CSSアナライザ」パネルを使用すると、可能な様々なCSSルールによって、現在選択されているGUI要素の側面にどのような影響があるかを理解できます。プロパティ値に可能なすべてのソースの概要ビューが表示されます。選択したGUI要素の特定の側面に割り当てられた各CSSプロパティ値は、APIまたは事前定義されたCSSルールのいずれかから生成できます。ソースは優先度順にリストされるため、指定されたソースが別のソースより優先される理由を理解できます。また、このパネルではCSSプロパティ値のソースに移動できるため、CSSスタイルシートの開発およびトラブルシューティングに役立ちます。
「CSSアナライザ」パネルは、デフォルトでは表示されません。パネルを表示するには、図11-4に示すように、メイン・メニューから「表示」、「CSSアナライザの表示」の順に選択します。
図11-5に示すように、「CSSアナライザ」パネルはメイン・ウィンドウの下部に表示されます。
パネルには次のセクションがあります(ほとんどのセクションは図11-5で強調表示されています)。
-
「検索」テキスト・フィールド: パネルの右上隅にあります。表示する特定のプロパティを検索できます。
-
「CSSアナライザ」メニュー: 「検索」テキスト・フィールドの右側にあります。図11-6に示すように、ドロップダウン矢印をクリックすると、使用可能なコマンドのメニューが表示されます。
-
表示モード: スタイル・プロパティの表示形式を選択できます。デフォルトは表ビューです。「ルール」表示モードでは、プロパティがCSSルール書式で表示されます。「テキスト」表示モードでは、プロパティがテキスト・スタイル設定で表示されます。
-
スタイル設定可能なパスをコピー: 「スタイル設定可能なパス」テキスト・フィールドの現在の値をコピーしてCSSファイルに貼り付けると、現在選択しているコンポーネントまたはそのサブ要素のスタイルを変更できます。
-
デフォルト値を持つプロパティを非表示: デフォルト値のみが割り当てられているすべてのプロパティを表示から除去します。デフォルト以外の値を持つプロパティ(「スタイルシート」、「インライン・スタイル」など)は表示されたままです。「デフォルト値を持つプロパティを表示」では、コンポーネントのすべてのプロパティが表示されます。
-
デフォルトを分割: スタイル・プロパティのデフォルト値用の2つの列「APIのデフォルト」および「FXテーマのデフォルト」を含めるように、プロパティの表示をリフレッシュします。「デフォルトを結合」コマンドでは、デフォルトで、結合されたデフォルト値が1つの列に表示されます。
-
-
「スタイル設定可能なパス」テキスト・フィールド: パネルの左上隅にあります。パス内の矢印をクリックすると、サブ要素を検出できます。「CSSアナライザ」メニューを使用してそのパスをコピーし、CSSファイルにパスを貼り付けると、新しいスタイル値を割り当てることができます。
-
「CSSピッキング・モード」ボタン: 「検索」テキスト・フィールドの下にあります。これは、CSSアナライザが開いたときのデフォルト・モードです。現在選択しているコンポーネントのサブ要素を選択できます。図11-5では、「CSSピッキング・モード」ボタンが選択されています。これによって、「コンテンツ」パネルでScrollPaneコンポーネントの下の水平スクロールバーを選択できます。スクロールバーは黄色で強調表示され、ScrollPaneの現在選択されているサブ要素であることを示します。これに対応して、「スタイル設定可能なパス」には、現在選択されている要素への完全パスが表示されます。この機能によって、スキンにスタイル設定する方法が示されます。
-
「CSS選択モード」ボタン: 「CSSピッキング・モード」ボタンの横にあります。これは標準選択モードで、コンポーネントを選択できます。
-
「プロパティ」列: 表内の最初の列。現在選択されている要素に使用できる使用可能なすべてのスタイル・プロパティが表示されます。
-
「デフォルト」列: スタイル・プロパティ用に提供されている、APIおよびJavaFXテーマのデフォルト値が表示されます。
-
「インスペクタ」列: 「インスペクタ」パネルを使用して設定されたプロパティ値が表示されます。「インスペクタ」パネルの「プロパティ」セクションおよび「CSSアナライザ」パネルの両方に、いくつかのプロパティが表示されます。これらのプロパティを編集するには、「CSSアナライザ」パネルの対応するセルにマウス・カーソルを置き、右上隅にある歯車アイコンをクリックして、「インスペクタに表示」を選択します。「インスペクタ」パネルの「プロパティ」セクションで、対応するプロパティが青色リングで強調表示されます。
-
「スタイルシート」列: 「インスペクタ」パネルの「プロパティ」セクションで「スタイルシート」テキスト・ビューに設定されたCSSファイルを使用してプロパティに定義されている値が表示されます。値が導出されたCSSファイルの名前が列に含まれます。また、セルの右上隅にある歯車アイコンをクリックし、「開く」コマンドを選択すると、デフォルトのCSSエディタにCSSファイルを開くことができます。
-
「インライン・スタイル」列: 「インスペクタ」パネルの「プロパティ」セクションの「JavaFX CSS」サブセクションで、「スタイル」テキスト・ビューを使用してプロパティに定義されているインライン・スタイル値が表示されます。表セルの右上隅にあるセルの歯車アイコンを使用して「インスペクタに表示」コマンドを選択すると、「インスペクタ」パネルに「スタイル」テキスト・ビューを表示できます。
CSSファイルからプロパティ値を変更できます。または、「インスペクタ」パネルの「プロパティ」セクションの「JavaFX CSS」サブセクションを使用して、CSSプロパティを編集したり、「スタイル」プロパティを使用してCSSプロパティをオーバーライドできます。
現在選択されているGUIコンポーネントにCSSプロパティ値が割り当てられている場合は、「コンテンツ」パネルに新しいスタイルがすぐにレンダリングされます。
CSSアナライザの機能を理解するために、次の手順を実行して、角が丸くなるようにボタン・コンポーネントをカスタマイズし、これ以降にFXMLレイアウトに追加されるすべてのボタンにそのスタイルを使用します。
-
ライブラリから「コンテンツ」パネルにボタンをドラッグします。
図11-7に示すように、CSSアナライザには、ボタンのCSSプロパティの1つとして-fx -background-radiusの値が表示されます。
-
「プロパティ」列の-fx -background-radiusプロパティ名をクリックすると、
JavaFX CSSリファレンス・ガイドの対応するオンラインAPIドキュメントに移動し、各プロパティの値で使用できる構文を参照できます。 -
-fx-background-radiusプロパティの値を変更します。
-
Scene Builderウィンドウで、「インスペクタ」パネルの「プロパティ」セクションをクリックします。
-
「JavaFX CSS」サブセクションにある「スタイル」テキスト・フィールドをクリックし、ドロップダウン・リストから「-fx-background-radius」を選択します。
-
図11-8に示すように、「JavaFX CSS」サブセクションの「スタイル」テキスト・フィールドに
10pxと入力します。
「コンテンツ」パネルのボタン・コンポーネントは、角が丸くなっていることに注意してください。また、図11-8に示すように、「CSSアナライザ」パネルでは、-fx-background-radiusプロパティの行に、デフォルトおよび「スタイル」プロパティに入力したインライン・スタイル値10pxの2つの値が表示されます。セルの背景色が青色に変わり、値が現在選択されているコンポーネントにレンダリングされる現在値であることを示します。
-
-
現在のFXMLレイアウトに追加するすべてのボタンに新しいボタン・スタイルを適用できるように、CSSルールを作成します。
-
システムのコマンドを使用して、現在のFXMLレイアウトが格納されているのと同じディレクトリに、空のCSSファイル(例:
test.css)を作成します。 -
図11-8に示すように、「インスペクタ」パネルの「プロパティ」セクションで、「スタイルシート」プロパティにある+ボタンをクリックします。
-
「スタイルシートの追加」ダイアログで、
test.cssファイルの場所に移動してこのファイルを選択し、「開く」をクリックして「スタイルシート」プロパティに追加します。
「スタイルシート」プロパティに追加されたtest.cssファイルを確認します。 -
「スタイルシート」プロパティの下矢印をクリックし、「test.cssを開く」を選択して、
test.cssファイルを編集します。 -
次のCSSルールを
test.cssに追加して、ファイルを保存します。 -
「コンテンツ」パネルでボタンを再度選択します。ボタンはAnchorPaneコンポーネントの子であるため、「CSSアナライザ」パネルで、ボタンが
test.cssファイルからCSSルールを継承していることに注意してください。インライン・スタイル値が割り当てられたままであるため、その値が優先され、「コンテンツ」パネルにレンダリングされるスタイルになります。この特定のボタンのスタイルを変更する必要がない場合は、「インスペクタ」パネルの「プロパティ」セクションからそのスタイル値を削除できます。
-
