8 ツールバーの追加
この章では、JavaFX Scene Builderを使用して構築するレイアウトに、ツールバーのGUIコントロールを追加する手順について説明します。
IssueTrackingLiteのGUIレイアウトの上部にツールバーを追加するには、次の手順を実行します。これには、1つのイメージ・ファイルと3つのボタンが含まれます。
-
ドキュメント・パネルで、右上隅にある「階層」表示メニュー・ボタンをクリックし、「情報」を選択して(選択していない場合)、表示設定を変更します。
-
図8-1に示すように、「ライブラリ」パネルからドキュメント・パネルの「階層」セクションにHBoxコンテナ要素をドラッグして、VBox要素の行の下にドロップします。
-
ツールバーに3つのボタンを追加します。
-
「ライブラリ」パネルから「階層」パネルにButton要素をドラッグして、追加したHBoxノード内にドロップします。
-
「コンテンツ」パネルで、新しいButtonを右クリックし、コンテキスト・メニューから「複製」を選択して2番目のボタンを追加します。
-
前述の手順を繰り返して、3番目のボタンをツールバーに追加します。
-
-
ボタン詳細を編集します。
-
「コンテンツ」パネルで、ツールバーの左端にあるボタンをダブルクリックして編集モードに入り、
Newと入力します。「インスペクタ」パネルの「コード」セクションをクリックして、Newボタンのfx:idプロパティのドロップダウン・リストからnewIssueを選択します。アクション・フィールドで、コントローラ・ソース・ファイルで使用可能なイベント・ハンドラのドロップダウン・リストからnewIssueFiredを選択します。先頭の#記号は、アプリケーションでコントローラ・ソース・コード内のnewIssueFiredメソッドが検索されることを示します。使用されるメソッドはpublicで、voidを返し、パラメータとしてActionEventを取る必要があります。Newボタンがクリックされるたびに、コントローラ・ソース・コードで定義されるpublicメソッドnewIssueFired(ActionEvent)が実行されます。 -
中央のボタンをダブルクリックして、編集モードに入ります。編集ボックスに
Saveと入力します。「インスペクタ」パネルの「コード」セクションをクリックし、中央のボタンのfx:idプロパティのドロップダウン・リストからsaveIssueを選択します。アクション・フィールドで、値を#saveIssueFiredに設定します。 -
ツールバーの右端にあるボタンを選択します。「インスペクタ」パネルの「コード」セクションをクリックし、fx:idプロパティのドロップダウン・リストからdeleteIssueを選択します。「インスペクタ」パネルの「プロパティ」セクションで、「テキスト」フィールドに
Deleteと入力します。アクション・フィールドで、値を#deleteIssueFiredに設定します。
-
-
コンテナにボタンを配置し、ボタン間のスペースを調整します。
-
[Ctrl]キーを押しながら3つのボタンをそれぞれ選択します。メニュー・バーから、「配置」、「ラップ」、「HBox」の順に選択します。ボタンは均等に間隔をあけて行に配置されます。
-
「インスペクタ」パネルの「レイアウト」セクションを選択して、間隔・プロパティの値を
15に設定します。ボタンの間は、これより大きい間隔で調整されることに注意してください。
-
-
ツールバーにイメージを追加します。
-
メニュー・バーから、「ファイル」、「インポート」、「メディア」の順に選択します。<install-dir>
/IssueTrackingLite/src/issuetrackingliteフォルダから、IssueTrackingLite.pngを選択します。ImageView要素が「階層」パネルの下部に追加されます。 -
図8-2に示すように、ドキュメント・パネルの「階層」セクションで、最上位のHBoxコンテナ内の最初の要素になるようにImageView要素をドラッグします。「コンテンツ」パネルでは、イメージは3つのボタンのHBoxコンテナの左側に移動することに注意してください。
-
-
図8-3で囲まれているプロパティ値に一致するように、最初のHBoxコンテナの一部のレイアウト・プロパティについてデフォルト値を変更します。
-
「階層」パネルで、最上位のHBoxコンテナの行を選択します。
-
「インスペクタ」パネルの「レイアウト」セクションをクリックし、「VBox制約」サブセクションで
Vgrowプロパティ値をNEVERに設定します。 -
マージン・プロパティのデフォルト値を、
20、15、15および10にそれぞれ変更します。 -
「サイズ」サブセクションで、prefWidthおよびprefHeightのデフォルト値を
USE_COMPUTED_SIZEに変更します。
-
-
2番目のHBoxの一部のデフォルト・プロパティ値を変更します。
-
「階層」パネルで、3つのボタンが含まれるHBox要素を選択します。
-
「インスペクタ」パネルの「レイアウト」セクションを選択して、Hgrowプロパティの値を
ALWAYSに変更します。 -
「インスペクタ」パネルの「プロパティ」セクションを選択し、「ノード」セクションで位置揃えプロパティ値を
CENTER_RIGHTに変更します。3つボタンを含むHBoxは、「コンテンツ」パネルの右側にシフトされます。
-
-
メニュー・バーから「ファイル」、「保存」の順に選択して、作業内容を保存します。
