9 「インスペクタ」パネルでのプロパティの定義
この章では、JavaFX Scene Builderツールの「インスペクタ」パネル(「プロパティ」、「レイアウト」および「コード」セクションを含む)について説明します。
「インスペクタ」パネルは「コンテンツ」パネルの右側にあり、図9-1では「レイアウト」セクションが展開され、インスペクタ・メニューが表示されています。「インスペクタ」パネルは、右側パネルとも呼ばれます。ここには、複数のセクションがある1つのアコーディオン・コンテナが含まれます。上部のセクションには「検索」テキスト・フィールドがあり、編集するプロパティを迅速に見つけるのに使用できます。図9-1に示すように、検索結果は上部のセクションに表示されます。「検索結果」セクションを使用して、プロパティを直接変更できます。右上隅にあるドロップダウン矢印(図9-1で円に囲まれている)をクリックして、インスペクタ・メニューを表示できます。デフォルトでは、「すべて表示」および「セクションの表示」モードが選択されています。「編集済を表示」モードを選択すると、FXMLファイルに明示的に表示されるプロパティのみが表示されます。たとえば、Button要素が「ライブラリ」パネルからドロップされたとき、Text、LayoutXおよびLayoutYプロパティのみが「インスペクタ」パネルに表示されるとします。「プロパティ名別に表示」または「プロパティ・タイプ別に表示」モードを選択すると、1つのタブ付きセクションに名前順またはタイプ順にすべてのプロパティが表示されます。
「プロパティ」、「レイアウト」および「コード」セクションから、選択したGUI要素のプロパティにアクセスできます。セクションに表示される各プロパティは、JavaFX APIの対応する特定プロパティ名を表しています。たとえば、JavaFX APIのminWidthプロパティは、「インスペクタ」パネルに最小幅として表示されます。プロパティ名をクリックすると、ブラウザ・ウィンドウが開き、プロパティに対応するJavaFX API名とその説明が表示されます。
また、メイン・メニューから「表示」を選択し、「右側パネルの非表示」を選択すると、「インスペクタ」パネルを非表示にできます。この機能によって、「コンテンツ」パネルでより多くの領域を使用できます。「表示」、「右側パネルの表示」の順に選択すると、パネルが再度表示されます。
「プロパティ」セクション
図9-2に示すように、「インスペクタ」パネルの「プロパティ」セクションを使用して、「階層」パネルまたは「コンテンツ」パネルで選択された要素のスタイルを定義できます。
選択されたGUI要素に「コード」セクションからfx:id値が割り当てられる場合、その同じ値が「プロパティ」セクションの「CSS」サブセクションのIDフィールドに割り当てられます(そのIDフィールドがnullの場合のみ)。
「JavaFX CSS」サブセクションの「スタイル」、スタイル・クラスおよび「スタイルシート」テキスト領域を使用して、特定のGUIコンポーネントとそのすべての子コンポーネントに使用するスタイル・ルールおよびスタイルシートを指定できます。適用されるスタイルシートを追加、削除および整理できます。詳細は、このドキュメントのCSSおよびCSSアナライザによるスタイル設定の章を参照してください。
プロパティ値は、CSSファイルまたはStyleプロパティに定義されているCSSスタイル設定でオーバーライドできます。図9-3に示すように、CSSファイル定義によってプロパティ値がオーバーライドされるプロパティの左側に「CSS」アイコンが追加されます。プロパティ・フィールドをクリックすると、CSSファイルまたはStyleプロパティに移動できます。
[Tab]キーを押してプロパティ間を移動できます。[Enter]を押すか、別のプロパティ・フィールドに移動すると、プロパティの新しい値が保存されます。使用可能および編集可能なプロパティの値を直接変更することによって、選択したGUI要素の外観を操作できます。たとえば、図9-4に示すように、下矢印ボタンをクリックして使用可能な効果のメニューを表示すると、選択したリスト・ビュー要素の効果を定義できます。使用可能な効果のリストから、選択したGUI要素に適用する効果を1つ以上選択できます。
「インスペクタ」パネルの「プロパティ」セクションに表示される残りのプロパティは、「コンテンツ」パネルまたは「階層」パネルのどちらで選択されたGUI要素のタイプかによって異なります。たとえば、「コンテンツ」パネルでラジオ・ボタン、トグル・ボタンまたはラジオ・メニュー項目を選択した場合、「プロパティ」セクションにはToggle Groupプロパティが表示されます。このプロパティを使用して、トグル・グループに追加する各トグル・コントロールに同じToggleGroup idを割り当てることができます。
プロパティに無効な値が入力されている場合は、ダイアログ・ウィンドウが表示され、値の修正または前の値に戻すのいずれかのコマンドを選択するように求められます。値の修正コマンドを選択した場合は、無効なプロパティ値を含むテキスト・フィールドにフォーカスが戻ります。
プロパティに値リストを割り当てることができる場合は、デフォルトで1つの空の項目が最初に表示されます。項目を追加するには、「+」ボタンをクリックして値を入力または選択します。下矢印をクリックすると、値リストの項目を削除、上へ移動または下へ移動できるメニューが表示されます。
「コンテンツ」パネルまたは「階層」パネルで同じタイプの複数のオブジェクト(たとえば、2つのボタン要素)が選択され、いずれかのプロパティの値が異なる場合は、そのプロパティのテキスト・フィールドにマイナス記号(-)が表示されます。新しい値が入力されると、選択したすべてのオブジェクトにその新しい値が設定されます。
「コンテンツ」または「階層」パネルで異なるタイプのオブジェクトが複数選択された場合は、すべてのオブジェクトに共通するプロパティが表示されます。
図9-5に示すように、マウスをプロパティ値エディタ上に置くと、プロパティ・フィールドの右側に歯車メニューが表示されるプロパティがいくつかあります。歯車メニューには、そのエディタで使用できる特定のアクションが用意されています。たとえば、デフォルトにリセット・コマンドを選択すると、現在のプロパティ値をJavaFX APIのデフォルト値にリセットできます。図9-5に、省略記号文字列で使用可能なアクションを示します。
上矢印キーまたは下矢印キーを使用して、任意の数値を増減できます。[Shift]を押しながら上矢印キーおよび下矢印キーを使用すると、数値が10ごとに増減されます。
Insets、MarginsおよびPaddingプロパティ用のエディタを使用すると、次の手順を使用して、最初の値(最上位)を入力し、同じ値を残りの3つのテキスト・フィールド(右、下、左)に設定できます。
-
最初のプロパティのテキスト・フィールドに値を入力します。
-
[Tab]キーを押すと、フォーカスがリンク・ボタン上に置かれます。
-
[Enter]キーを押すと、残りの3つのプロパティのテキスト・フィールドに入力したプロパティ値を適用します。
図9-6に、HBoxのボタンのマージン・プロパティに割り当てられた共通値を示します。
自動提案エディタは、事前定義された値があるすべてのプロパティで使用可能です。プロパティのテキスト・フィールド内をクリックすると、提案された値のリストが表示されます。テキスト・フィールドに入力を開始すると、リストがフィルタされます。
イメージ・ファイル、CSSファイルなど一部のプロパティ値では、外部リソース・ファイルへのパスが必要です。表9-1に示すいずれかの形式を使用して、ファイル・パスを指定できます。
表9-1 外部リソース・ファイルのファイル・パス形式
| ファイル形式タイプ | 例 |
|---|---|
|
絶対パス |
|
|
現在のFXMLドキュメントの場所への相対パス |
|
|
クラスまたはリソース・ファイルの場所への相対パス |
|
値の色が設定できるプロパティでは、ペイント・エディタが使用可能です。プロパティ値フィールドをクリックすると、ペイント・エディタ・ウィンドウが表示されます。図9-7では、選択したボタン要素のテキストの塗りつぶし色プロパティに対して、ペイント・エディタ・ウィンドウが表示されています。カラー・パレットに沿ってカーソルを移動すると、GUI要素の色の値を変更できます。
「線形グラデーション」または「放射状グラデーション」タブをクリックすると、Linear GradientまたはRadiant Gradientに従って、テキストの塗りつぶしプロパティ値が変更されます。ペイント・エディタの線形または放射状エディタ・セクションが表示されます。図9-8に、テキストの塗りつぶしプロパティの線形セクションを示します。このセクションでは、目的の色相が表示されるまで両側の使用可能なスライダを移動して、グラデーション値を調整できます。追加プロパティの値が表示され、エディタから同様に編集できます。
特定のGUI要素の色、線形グラデーションまたは放射状グラデーションを調整すると、その調整は「コンテンツ」パネルに表示されているGUI要素にも同時に反映されます。
「レイアウト」セクション
図9-9に示す「インスペクタ」パネルの「レイアウト」セクションでは、アプリケーションのウィンドウのサイズ変更時にレイアウトの実行時動作を指定できます。また、選択した要素のサイズ(優先幅、優先高など)、および位置(Layout X、Layout Yなど)を変更できます。「レイアウト」セクションに表示される情報の一部は、選択した要素自体(最小幅、最大高、優先幅など)に関連しており、コンテナ要素のタイプによって異なる情報もあります。選択した要素がAnchorPaneコンテナに含まれている場合は、「レイアウト」セクションにAnchorPaneセクションがあります。選択した要素がGrid Paneコンテナに含まれている場合は、「インスペクタ」パネルの「レイアウト」セクションにGrid Paneサブセクションがあります。ただし、一部のコンテナには関連付けられたコンテキスト情報がないため、「レイアウト」セクションにコンテキスト・コンテナ・サブセクションは表示されません。
選択した要素に直近のコンテナとしてAnchorPaneが含まれている場合は、「AnchorPane制約」サブセクションのみ表示されます。たとえば、図9-9で、選択したHBox要素のコンテナはAnchorPaneです。「AnchorPane制約」サブセクションで図またはテキスト・フィールドのいずれかを使用して、アンカー・ペインのアンカーを管理できます。アンカーは、ウィンドウのサイズ変更時に、選択したGUI要素の動作を管理するのに役立ちます。アンカー線をクリックして、アプリケーションのウィンドウが調整されるのにあわせてオブジェクトのサイズを変更するかどうかを指定できます。線をクリックすると、黒色の実線が赤色の実線に変わります。図の周囲のフィールドで数値を指定することもできます。グレー表示されている数値は、アンカーが無効であることを意味します。[Tab]キーを使用して、アンカー・フィールド間を移動できます。
HBox要素の直近のコンテナがStackPane要素の場合、「レイアウト」セクションの最上部サブセクションには「StackPane制約」とラベル付けされ、別の編集可能なプロパティが表示されます。
「変換」サブセクションを使用すると、様々なタイプの変換(回転、スケーリング、変換など)の設定を定義できます。
「コード」セクション
図9-10に、「階層」パネルで新規ボタン要素が選択されたときに開いた「コード」セクションを示します。fx:idフィールドで、選択したGUI要素に一意の値を割り当てることができます。FXMLレイアウトで使用するコントローラ・ソース・クラスをすでに割り当てた場合は、使用可能な変数のドロップダウン・リストから選択できます。
「コード」セクションを使用して、選択した要素でドラッグ・アンド・ドロップ、キーボード、マウスまたは他のイベントが発生したときに実行されるアクションを指定できます。イベントのテキスト・フィールドにあるドロップダウン・リストから、GUI要素に対して特定のイベント(1つまたは複数)が発生したときに実行される、対応するコマンドを選択します。指定されたコマンドは、コントローラ・メソッドのイベント・ハンドラに対するコールです。先頭の番号記号(#)(デフォルトですでに追加されている)の後に、ハンドラ・メソッドの名前を続けて指定されます。メソッドは、標準イベント・ハンドラの署名に一致する必要があります。つまり、javafx.event.Eventクラスを拡張する型の引数を1つ取り、voidを返す必要があります。たとえば、図9-10は、ボタンに対してOnActionイベントが発生したときに、newIssueFired()コントローラ・メソッドが実行されることを示します。
メニュー・バーから「表示」をクリックし、「サンプル・コントローラ・スケルトンの表示」を選択した場合は、テキスト・エディタ・ウィンドウが表示され、コントローラ・ソース・コード内でのメソッドを示すソース・ファイル例が表示されます。スケルトン・ソース・ファイルの内容をコピーして、必要に応じてカスタマイズできます。
