7 詳細セクションの作成
この章では、JavaFX Scene Builderを使用して構築するIssueTrackingLiteのGUIレイアウトの詳細セクション用にJavaFX GUIコンポーネントを追加する方法について説明します。さらに、アプリケーションのウィンドウがサイズ変更された場合に、コンポーネントのサイズ変更を管理する方法についても説明します。
次の各項を使用して、問題の詳細が表示される領域を設定します。
詳細セクションのGUIコンポーネントの追加
GUIコンポーネントを追加して、IssueTrackingLiteアプリケーションで作成または変更を行う問題の詳細が表示されるセクションを作成します。
-
図7-1に示すように、「階層」パネルの右上隅にあるメニュー・ボタンをクリックして、「fx:idの表示」を選択します。デフォルトでは、「情報の表示」モードが選択されています。図7-2に示すように、表示モードを「fx:idの表示」に変更すると、「階層」パネルには、fx:idプロパティ値が割り当てられた要素の横にfx:id値が表示されることに注意してください。
-
詳細セクションを設定します。
-
「階層」パネルで、AnchorPane要素のノードのみを選択します。
-
AnchorPane要素の行の右側をダブルクリックして、fx:idインライン編集モードに入ります。図7-2に示すように、fx:idテキスト・プロパティのインライン・テキスト・エディタで
detailsと入力します。このエディタが使用可能なのは、「階層」パネルの現在の表示モードが「fx:idの表示」に設定されているためです。または、「インスペクタ」パネルの「コード」セクションをクリックし、fx:idフィールドで使用可能なインスタンス変数のドロップダウン・リストからdetailsを選択します。
-
-
ラベルを追加します。
-
図7-3に示すように、「ライブラリ」パネルのコントロール・セクションで、Label要素をドラッグして詳細領域の左上隅にドロップします。
-
「コンテンツ」パネルで、新しいLabel要素をダブルクリックし、インライン編集モードに入ります。「テキスト」プロパティ・フィールドに、デフォルト値のかわりに
PROJECT / IDと入力します。 -
「インスペクタ」パネルの「コード」セクションで、fx:idフィールドの使用可能なインスタンス変数のドロップダウン・リストからdisplayedIssueLabelを選択します。
-
「インスペクタ」パネルの「レイアウト」セクションで、最小幅の値を
USE_PREF_SIZEに設定します。この設定によって、アプリケーション・ウィンドウのサイズがかなり縮小されて一部のGUI要素が表示できない場合でも、HBox要素のラベルは表示されたままになります。
-
-
Text Fieldコントロールを追加します。
-
「ライブラリ」パネルから、Text Fieldコントロールをドラッグして、追加したラベルの右側にドロップします。
-
図7-4に示すように、右方向の残りの領域を占有するようにText Field要素のサイズを変更します。
-
「コンテンツ」パネルでText Field要素をダブルクリックして、編集モードに入ります。エディタ・ボックスに
SYNOPSISと入力します。 -
「インスペクタ」パネルの「コード」セクションで、fx:idフィールドで使用可能なインスタンス変数のドロップダウン・リストからsynopsisを選択します。
-
-
Label要素とsynopsis Text Field要素をグループ化します。
-
「コンテンツ」パネルで、[Ctrl]キー(WindowsおよびLinuxプラットフォームの場合)または[Cmd]キー(Mac OSプラットフォームの場合)を押しながら、PROJECT/ID labelコンポーネントおよびSYNOPSIS textfieldコンポーネントを選択します。
-
メニュー・バーから、「配置」、「ラップ」の順に選択し、サブメニューから「HBox」を選択します。
-
「インスペクタ」パネルの「プロパティ」セクションで、HBox要素の位置揃えプロパティ値にCENTERを選択します。
-
「レイアウト」セクションをクリックし、間隔プロパティ値を10に設定します。
-
「AnchorPane制約」サブセクションで、左右の黒色のアンカー線をクリックします。図7-5で囲まれているように、アンカー線をクリックすると、黒い線が赤い実線に変わります。このアクションによって、HBox要素の左右の境界線がコンテナに固定され、ウィンドウのサイズが変更されるとHBox要素のサイズも変更されます。
-
「階層」パネルで、TextField SYNOPSIS要素の行を選択し、「HBox制約」サブセクションを見つけます。HgrowプロパティをALWAYSに設定します。
この設定は、Text Field: synopsis要素はその親コンテナが増加しても水平方向に調整されることを示します。
-
-
詳細領域にLabelおよびTextArea要素を追加します。
-
「ライブラリ」パネルのコントロール・セクションから、Labelを選択します。「コンテンツ」パネルの詳細セクションの左側で、追加したHBoxが占有する行の下に、ドラッグ・アンド・ドロップします。ガイドラインを使用して、Label要素をHBox要素の左側に並ぶように配置します。
-
Labelをダブルクリックして、編集モードに入ります。デフォルト値のかわりに
DESCRIPTION:と入力します。 -
追加したラベルの下にText Areaをドラッグ・アンド・ドロップします。
-
「インスペクタ」パネルの「レイアウト」セクションで、「Anchor Pane制約」サブセクションを見つけて、左、上、右および下の黒色のアンカー線をクリックします。
-
「インスペクタ」パネルの「コード」セクションで、fx:idフィールドのドロップダウン・リストからdescriptionValueを選択します。
-
図7-6に示すように、「コンテンツ」パネルで、Text Area要素の右下のハンドルをクリックして、詳細セクション内の残りの領域を埋めるまでハンドルをドラッグしてサイズを大きくします。
-
