8 「ライブラリ」パネルを使用したGUIの設計
この章では、JavaFX Scene Builderの「ライブラリ」パネル、およびこのパネルからアクセス可能なJavaFX GUIオブジェクトについて説明します。使用可能ないくつかのコンテナ要素の使用方法について記載されています。また、この章では、カスタムGUIオブジェクトをJavaFX Scene Builderにインポートする方法についても説明します。
図8-1に示すように、「ライブラリ」パネルはメイン・ウィンドウの左側にあります。メイン・メニューから「表示」を選択して「ライブラリの非表示」を選択すると「ライブラリ」パネルを非表示にでき、「左側パネルの非表示」を選択するとドキュメント・パネルとともに「ライブラリ」パネルを非表示にできます。「ライブラリ」パネルは、FXMLレイアウトを構築するために使用できるコンテナ、コントロール、メニュー、図形、チャート、3Dおよび「その他」の各要素の縮小可能なセクションで構成されます。これらのGUI要素は、Java SEリリースに付属するのと同じJavaFX GUI要素です。JDK 8リリースで導入されたTextFlow、SwingNode、3DオブジェクトなどのGUIコンポーネントを検索するには、「ライブラリ」パネルの「検索」テキスト・フィールドにFX8と入力します。
ライブラリにインポートされたカスタムGUIコンポーネントがリストされている「カスタム」セクションもあります。カスタム・タイプの要素は、JDK 8のJavaFX APIライブラリに付属していないGUIコンポーネントです。自分またはサード・パーティのカスタムGUIコンポーネントをインポートする方法の詳細は、カスタムGUI要素の管理を参照してください。
3D GUI要素のサポートには制限があります。3Dオブジェクトを含むFXMLファイルを開くことはできますが、「インスペクタ」パネルから編集できるのは一部のプロパティのみで、「コンテンツ」パネルでオブジェクトを直接操作できません。JavaFX APIで使用可能な事前定義の3D図形(ボックス、球形および円柱)は、「ライブラリ」パネルの図形セクションで提供されます。3Dセクションには、光およびカメラに関連するオブジェクトがあります。これらはライブラリ内で使用可能であるため、コントローラ・ソース・コードから参照できるように、プロパティを編集したり、fx:idを追加できます。
Scene Builderで新規のFXMLレイアウトを開くと、それは空のファイルです。レイアウトの構築を開始するには、コンテナ・セクションから最上位ルート・コンテナを選択し、「コンテンツ」または「階層」パネルに追加します。そのルート・コンテナには、FXMLレイアウトに必要な数のコンテナまたはGUI要素を追加できます。
「ライブラリ」パネルからGUI要素の1つを追加するには、次のいずれかを実行します。
-
「ライブラリ」パネルのリストからアイテムを選択し、「コンテンツ」パネルまたは「階層」パネルにドラッグします。
-
「ライブラリ」パネルからアイテムを選択し、[Enter]キーを押します。
-
「ライブラリ」パネルで選択されたアイテムをダブルクリックすると、そのアイテムが「コンテンツ」パネルに追加されます。
-
メニューバーの「挿入」コマンドをクリックし、ドロップダウン・リストから使用可能なGUI要素を1つ選択します。現在、レイアウトが空である場合は、その要素がルート要素として追加されます。ルート要素がすでに存在しており、「階層」または「コンテンツ」パネルで現在何も選択されていない場合、その要素はルート要素内に追加されます。それ以外の場合は、現在選択されている要素の横に追加されます。
ページの上部にある「検索」テキスト・フィールドを使用して、ライブラリで使用可能なGUI要素のリストをフィルタします。たとえば、「検索」フィールドにbuttonと入力すると、名前に「button」を含むすべてのGUI要素が表示されます。
図8-2に示すように、「ライブラリ」パネルの「検索」テキスト・フィールドの右側にメニュー・ボタンがあり、クリックするとコマンドのメニューが表示されます。これらのコマンドは、ライブラリの内容を長いリストとして表示するか、または別のセクションにリストされる要素のグループとして表示するか(デフォルト)を管理するのに役立ちます。また、カスタムGUIコンポーネントをライブラリにインポートするためのコマンドも使用できます。詳細は、カスタムGUI要素の管理を参照してください。
カスタム・ライブラリ・フォルダ・メニュー項目を選択すると、「ネイティブのファイル・マネージャに表示」およびJAR分析レポートの表示コマンドを含むサブメニューが表示されます。「ネイティブのファイル・マネージャに表示」コマンド(ネイティブのファイル・マネージャは、Mac OSプラットフォームの場合はファインダ、Windowsプラットフォームの場合はエクスプローラ、Linuxプラットフォームの場合はデスクトップ)を選択すると、カスタム・コンポーネントのJARまたはFXMLファイル(あるいはその両方)が含まれるフォルダの場所に、システムのファイル・マネージャが開きます。カスタム・ライブラリ・フォルダが空の場合、コマンドは無効になります。
JAR分析レポートの表示コマンドを選択すると、カスタム・ライブラリ・フォルダにあるJARファイルに関する分析レポートを表示できます。このレポートには、ライブラリに追加するには不適切なカスタム・コンポーネントとして検査および判断されたすべてのJavaクラスがリストされます。また、クラスがJavaFXノードでない、Scene Builderがクラスのインスタンス化に失敗したなどの失敗した条件も示されます。後者の場合は、Java例外もリストされます。
次の各項では、「ライブラリ」パネルで使用可能ないくつかのコンテナ要素について説明し、それらの要素をJavaFX Scene Builderツールで最大限に使用する方法を説明します。また、カスタム・タイプを管理する方法も説明します。JavaFX SDKプラットフォームで提供されている他のすべてのGUI要素の詳細は、JavaFX APIドキュメントを参照してください。
カスタムGUI要素の管理
図8-3に示すように、「ライブラリ」パネルに表示される最初のセクションは「カスタム」セクションです。ここには、JavaFX 8 APIライブラリには含まれないが、GUIレイアウトで使用可能なすべてのカスタムGUI要素がリストされます。カスタムGUI要素は、ユーザーまたはサード・パーティによって作成され、FXMLレイアウトで使用できる有効なコンポーネントのライブラリに追加されたJavaクラスです。
ライブラリへのカスタム・コンポーネントの追加
「ライブラリ」パネルの「インポート」コマンドを使用して、カスタマイズされたGUIコンポーネントをインポートできます。単純または複雑なグラフィカル・オブジェクトを「階層」または「コンテンツ」パネルから「ライブラリ」パネルに追加して、「ライブラリ」パネルから使用できる再利用可能なコンポーネントにすることができます。また、FXMLドキュメントからグラフィカル・コンポーネントをインポートしたり、JARファイルをインポートして、ファイルに含まれるカスタム・コンポーネントのサブセットを選択すると、ライブラリで永続的に使用できる再利用可能なコンポーネントにすることができます。
-
JARファイルまたはFXMLファイルからカスタムGUIコンポーネントをインポートする手順:
-
「ライブラリ」パネルのメニューからJAR/FXMLファイルのインポート・コマンドを選択するか、または、システムのネイティブ・ファイル・マネージャ(エクスプローラまたはファインダ)からJARまたはFXMLファイルを直接ドラッグして「ライブラリ」パネルにドロップします。
-
「開く」ダイアログ・ウィンドウで、インポートするJARまたはFXMLファイルの場所に移動します。
図8-4に示すようなインポート・ダイアログが表示されます。JARファイルの内容が検査され、適切なカスタム・コンポーネントと判断されたすべてのJavaクラスがダイアログ・ウィンドウに表示されます。FXMLファイルの内容が解析され、追加されたコンポーネントが有効で自己包含型であることが確認されます。 -
インポート・ダイアログ・ウィンドウで、インポート可能なアイテムのリストからアイテムを選択または選択を解除します。
-
コンポーネントのインポートをクリックします。
インポートされたアイテムが「ライブラリ」パネルの「カスタム」セクションに追加されます。これらはすぐに使用でき、Scene Builderが再起動された後もライブラリ内に存続します。
-
-
カスタムGUIオブジェクトを現在のレイアウトから「ライブラリ」パネルに追加する手順:
-
「階層」または「コンテンツ」パネルを使用して、現在のレイアウト内の自己包含型コンポーネントを選択します。
-
「ライブラリ」パネルのメニューから、選択内容のインポート・コマンドを選択します。または、「コンテンツ」または「階層」パネルから選択したコンポーネントをドラッグして「ライブラリ」パネルにドロップします。
選択されたアイテムが検査され、問題が発生している場合は、図8-5に示すようなエラー・ダイアログが表示されます。エラーが発生していない場合は、カスタム・コンポーネントがライブラリに追加され、メッセージがメッセージ・バーに表示されます。インポートされた選択内容に対して作成されたFXMLファイルの名前は、ルート要素の名前に基づきます。たとえば、選択内容にあるルート要素が
Buttonクラスの場合、最初に要素をインポートしたときに作成されるファイルはButton_1.fxmlです。「コンテンツ」または「階層」パネルで複数選択した内容をインポートすることもできます。たとえば、「コンテンツ」パネルで
Button要素とCheckBox要素を選択し、両方の要素をライブラリにドラッグ・アンド・ドロップできます。インポートされた要素の2つの行が「ライブラリ」パネルの「カスタム」セクションに表示され、1つはButton_1、もう1つはCheckBox_1という名前が付けられます。両方とも、対応するFXMLファイルのButton_1.fxmlおよびCheckBox_1.fxmlにそれぞれ格納され、カスタム・ライブラリ・フォルダに作成されます。
-
別の時点で同じJARまたはFXMLファイルをインポートすると、そのファイルの以前にインポートされたバージョンは、新規にインポートされたバージョンに置換されます。別の時点で同じ自己包含型のGUI要素を「コンテンツ」または「階層」パネルからインポートすると、作成されるFXMLファイルにはバージョン番号を使用して名前が付けられます。たとえば、ルートとしてButton要素を含む選択内容が以前にインポートされた場合、2回目にインポートされると、カスタム要素に対して作成される新規のFXMLファイルにはButton_2.fxmlという名前が付けられます。
カスタムGUIコンポーネントが不要になった場合は、カスタム・ライブラリ・フォルダからJARおよびFXMLファイルを直接削除したり、フォルダ全体を削除できます。これは、Scene Builderツールが実行中であっても安全に行うことができます。Scene Builderツールは、カスタム・ライブラリ・フォルダの内容を定期的にチェックし、それに応じてライブラリの内容を更新します。
カスタム・ライブラリ・フォルダを使用するには、「ライブラリ」パネルのメニューを開き、カスタム・ライブラリ・フォルダをクリックして「ネイティブ・ファイル・マネージャに表示」を選択します(ネイティブ・ファイル・マネージャは、Mac OSプラットフォームの場合はファインダ、Windowsプラットフォームの場合はエクスプローラ、Linuxプラットフォームの場合はデスクトップ)。
グリッド・ペイン・コンテナの使用
グリッド・ペイン・コンテナを使用すると、行と列で編成されたGUI要素のレイアウトを柔軟に作成できます。レイアウトでグリッド・ペインを使用するには、「ライブラリ」パネルのコンテナ・セクションから「グリッド・ペイン」を選択して、「コンテンツ」または「階層」パネルにドラッグします。次に、グリッド・ペイン・コンテナ内に他のGUI要素を追加できます。要素はパディング、間隔、その他のプロパティに基づいて自動的に配置されます。
すでにレイアウトに追加したGUI要素を含むように、グリッド・ペイン・コンテナ要素を追加することもできます。次の手順を実行します。
-
メイン・メニューから「編集」、「すべて選択」の順に選択して、レイアウト内のすべての要素を選択します。
-
メイン・メニューから「配置」、「ラップ」の順に選択し、コンテナのリストから「グリッド・ペイン」を選択して、グリッド・ペイン・コンテナを追加します。
空および未選択のグリッド・ペインは「コンテンツ」パネルに表示されません。ボーダーを表示するには、そのGrid Pane要素の「階層」パネルで対応するレイヤーをクリックします。特定のグリッド・ペインを操作するには、その境界内(ただし、含まれる要素上ではなく)を直接クリックします。図8-6に示すように、グリッド・ペインが選択されるとライト・ブルー色のボーダー・タブで囲まれ、対応する各索引番号が表示されます。1つの列または行を選択するには、選択したボーダー・タブ内をクリックします。図8-6の列1に示すように、選択した列または行のタブは黄色の背景色に変わります。複数の行または列を同時に選択できるため、選択したアイテムの値を一度に編集できます。ただし、行または列の組合せは同時に選択できません。
グリッド・ペインで実行できるアクションのサブメニューを表示するには、次のいずれかを実行します。
-
グリッド・ペインの任意の場所を右クリックし、コンテキスト・メニューからコマンドを選択します。
-
メイン・メニューから、「変更」、「グリッド・ペイン」の順に選択します。
行を上下に移動したり、列を左右に移動できます。また、行や列を削除または追加したり、行の高さや列の幅を拡大または縮小できます。
「インスペクタ」パネルの「レイアウト」セクションを使用すると、現在選択しているグリッド・ペインを変更することもできます。選択した行または列に関連するプロパティが表示され、GridPane行またはGridPane列セクションで管理できます。
あるグリッド・セルから既存の別のグリッド・セルに要素を移動できます。図8-7に示すように、「コンテンツ」パネルで再配置する要素を選択し、マウス・ボタンを押しながら要素をターゲットのグリッド・セルにドラッグします。ターゲットのグリッド・セルは、カーソルをその上に置くとすぐにグレーの背景色に変わることに注意してください。マウス・ボタンをリリースすると、グリッド・ペインのターゲットのグリッド・セル位置に要素が移動されます。
まだ作成されていない新しい行または列に要素を移動するには、「コンテンツ」パネルで要素を選択し、新しい行または列を挿入する行または列の間の区切りにドラッグします。セルの区切りにマウスを置くと、セルの区切り線が太くなり、グレーになります。カーソルをリリースすると、新しい行または列が作成され、要素がターゲットのグリッド・セルにドロップされます。図8-8に、これから新しい列が挿入される2列目の新しいグリッド・セルにドラッグされているButton要素を示します。
ボーダー・ペイン・コンテナの使用
ボーダー・ペイン・コンテナを使用すると、コンテナの上、右、左、下および中央の位置にGUI要素をレイアウトできます。レイアウトにボーダー・ペインを使用するには、「ライブラリ」パネルのコンテナ・セクションからBorderPane要素を選択して、「コンテンツ」パネルにドラッグします。図8-9に、BorderPane要素が追加された後の「階層」パネルを示します。
「ライブラリ」パネルからボーダー・ペイン内の特定の位置にGUI要素をドラッグすると、ボーダー・ペイン・コンテナに要素を追加できます。図8-10に示すように、「ライブラリ」パネルから「階層」パネルに要素をドラッグすることもできます。図8-10の右側に示すように、「階層」パネルのターゲット・レイヤーに要素をドラッグすると、ボーダー・ペイン内でレイヤーの対応する位置が濃い色に変わることに注意してください。
ボーダー・ペイン内で要素の位置を別の位置に移動できます。図8-11に示すように、「コンテンツ」パネルまたは「階層」パネルで再配置する要素を選択し、その要素をターゲット位置にドラッグします。カーソルを置くとすぐに、ターゲット位置の背景色が濃くなることに注意してください。マウス・ボタンをリリースすると、ボーダー・ペインのターゲット位置に要素が移動します。
タブ・ペイン・コンテナの使用
図8-12に示すように、デフォルトではTab Paneに2つのTab要素があり、それぞれにAnchor Pane要素が含まれています。
Tab要素のデフォルトのタイトルを変更するには、「コンテンツ」パネルでタブをダブルクリックし、そのテキスト・プロパティを直接編集します。別のTab要素をタブ・ペイン・コンテナに追加するには、「ライブラリ」パネルのTab要素を「コンテンツ」パネルまたは「階層」パネルのTab Paneにドラッグ・アンド・ドロップします。新しいTab要素は既存のTab要素の右側に追加されます。Tab Pane内のTab要素の順序を変更するには、「階層」パネルを使用します。「階層」パネルのTab要素の行を、タブ・ペイン・コンテナ内のターゲット位置にドラッグ・アンド・ドロップします。「コンテンツ」パネルを使用して、タブをタブ・ペイン・コンテナ内のターゲット位置にドラッグすることもできます。
GUI要素をTab要素のAnchor Paneに追加するには、ターゲットのTab要素のタイトルをクリックして選択します。図8-13に示すように、「ライブラリ」パネルからTab要素に追加するGUI要素をドラッグ・アンド・ドロップします。
各Tab要素のタイトルの長さ、およびタブ・ペイン・コンテナ内のTab要素の数に応じて、いくつかのタブが非表示になることがあります。この状況が発生すると、図8-14に示すように、タブ・ペイン・コンテナのメニュー・バーにドロップダウン・メニューが自動的に追加されます。このドロップダウン・メニューによってタブを選択できます。このメニューは、「コンテンツ」パネルではアクティブになりませんが、「プレビュー」ウィンドウにレイアウトを表示したときに機能します。すべてのTab要素が完全に表示されるようにタブ・ペイン・コンテナのサイズを変更すると、ドロップダウン・メニューはタブ・ペインのメニュー・バーから自動的に削除されます。
メニュー・コントロールの使用
「ライブラリ」パネルのコントロール・セクションには、メニューに関連するコントロール要素としてMenuBar、Menu ButtonおよびSplit Menu Buttonの3つが含まれています。「ライブラリ」パネルから「コンテンツ」パネルにMenuBarをドラッグ・アンド・ドロップすると、File、EditおよびHelpとラベルが付いたMenu要素が移入されます。図8-15に示すように、デフォルトでは、各Menu要素に1つのMenu Item要素が含まれています。
MenuおよびMenu Item要素は「コンテンツ」パネルに表示されるグラフィカル表現がないため、「階層」パネルを使用してのみ、これらの要素を選択および管理できます。Menu BarにMenu要素を表示する順序を変更するには、「階層」パネルでMenu要素を選択し、メニュー内に表示する新しい場所にドラッグします。Menu要素またはMenu Item要素のテキスト・プロパティを直接変更するには、要素を選択し、テキスト領域をクリックして編集モードにします。「インスペクタ」パネルの「プロパティ」セクションを使用して、テキスト・フィールドを変更することもできます。
別のMenu ItemやSeparator Menu Itemなど他のメニュー関連アイテムを追加するには、「ライブラリ」パネルから「階層」パネルの目的のメニュー場所に要素をドラッグします。第2レベルのメニューを作成するには、「階層」パネルで既存のMenu要素内にMenu要素をドロップします。
「プレビュー」メニューを使用して、メニュー・バーが機能していることを確認します。「プレビュー」ウィンドウでは、メニュー項目とそのサブメニューをクリックできます。
