HOME / Docs & Support

GridBag カスタマイザを使用した高度な Java フォームのデザイン

執筆: Jan Stola、Tomas Pavek、および Alyona Stashkova

このチュートリアルは、NetBeans IDE GridBag カスタマイザの高度な機能を使用して高度な Java フォームをデザインする方法を示す 2 部構成シリーズの第 2 部です。
このシリーズは、レイアウトのコードを手作業で記述することなく GUI コンポーネントをレイアウトしたあと、プロジェクトに必要な特定のターゲットレイアウトを実装するために既存のフォーム内の追加の変更を実行する方法を示すためのガイドとして作成されています。

このシリーズの各ドキュメントでは、特定の機能セットについて説明します。

第 1 部: GridBag カスタマイザを使用した基本的な Java フォームのデザイン
第 2 部: GridBag カスタマイザを使用した高度な Java フォームのデザイン

このシリーズの最初のチュートリアルでは、NetBeans IDE GridBag カスタマイザの基本的な機能を使用して単純な Java フォームを変更する方法を示しました。このチュートリアルでは、GridBag カスタマイザの高度な機能を使用して既存のフォームレイアウトを変更する方法について学習します。

サンプルプロジェクトを開く
GridBag カスタマイザの起動
高度な機能
まとめ
関連項目

このチュートリアルに従うには、次のソフトウェアとリソースが必要です。

ソフトウェアまたはリソース	必須バージョン
NetBeans IDE	7.1
Java Development Kit (JDK)	Version 6 または 7
gbcustomizer-advanced-tutorial.zip	初期およびターゲットチュートリアルのレイアウトを含むデモプロジェクトが含まれているアーカイブ。

注:

このシリーズの開始点として使用されるプロジェクトを .zip アーカイブとしてダウンロードできます。
このチュートリアルは、コンテナのレイアウトのデザインにのみ焦点を置いています。GUI への機能の追加は範囲に含まれていません。

サンプルプロジェクトを開く

GridBag カスタマイザを使用してコンポーネントのレイアウトを開始する前に、gbcustomizer-advanced-tutorial.zip をダウンロードし、GridBagCustomizerAdvancedTutorial プロジェクトをハードドライブ上に抽出して NetBeans IDE で開きます。

gbcustomizer-advanced-tutorial.zip プロジェクトをコンピュータ上の任意の場所にダウンロードして解凍します。
NetBeans IDE 7.1 の「プロジェクト」タブで、「ファイル」メニューの「プロジェクトを開く」をクリックし (または、Ctrl-Shift-O キーを押し)、前の手順で抽出した GridBagCustomizerAdvancedTutorial プロジェクトに移動して「プロジェクトを開く」をクリックします。このプロジェクトフォルダは、同じ GridBagCustomizerAdvancedTutorial という名前のフォルダに含まれている場合もあります。
「ソースパッケージ」>「tutorial」を展開し、ContactsAdvancedInitial.java をダブルクリックします。
サンプルフォームが GUI ビルダーの「デザイン」ビューで開きます。

GridBag カスタマイザの起動

GridBag カスタマイザを表示するには、次の手順に従います。

「デザイン」ビューで JFrame フォームを選択します。
フォームを右クリックし、「レイアウトをカスタマイズ」を選択します。
次に示すように「レイアウトをカスタマイズ」ダイアログボックスが開きます。

注: このチュートリアルでは、GridBagLayout がすでに設定されています。別のフォームを操作する場合は、上の手順 2 で、フォームを右クリックして「レイアウトを設定」>「グリッドバッグレイアウト」を選択し (これにより、「レイアウトをカスタマイズ」メニュー項目が有効になります)、手順を完了します。

高度な機能

この節では、GridBag カスタマイザの高度な機能を使用して、次に示すターゲットレイアウトに従って ContactsAdvancedInitial フォームコンポーネントを再配置します。

ターゲットレイアウト

注: NetBeans IDE でターゲットレイアウトを表示するには、「プロジェクト」タブで「ソースパッケージ」>「tutorial」を展開し、ContactsAdvancedFinal.java をダブルクリックします。
ターゲットレイアウトを含む ContactsAdvancedFinal フォームが GUI ビルダーの「デザイン」ビューで開きます。

新しい行の挿入

既存のフォームの「Phone」セクションには 3 つの電話エントリがあります。それを拡張して追加のラベルとテキストフィールド (たとえば、「Cell Phone:」と「Home Phone:」の間に Skype ユーザー名) を追加するには、次のように、そこに新しい行を作成します。

「レイアウトをカスタマイズ」ダイアログボックスで、「Home Phone:」の情報を含む行のヘッダーを右クリックします。
「行を前に挿入」を選択します。

次の図のように、新しい行が追加されます。

新しいコンポーネントの追加

新しく追加された行に新しいラベルとテキストフィールドを追加するには、次の手順に従います。

新しく追加された行の最初のセルを右クリックします。
次に示すように、コンテキストメニューから「コンポーネントを追加」>「Swing コントロール」>「ラベル」を選択します。

強調表示された JLabel1 が最初のセルに表示されます。
新しく追加された行の 2 つ目のセルを右クリックします。
コンテキストメニューから「コンポーネントを追加」>「Swing コントロール」>「テキストフィールド」を選択します。
強調表示された JTextField1 が 2 つ目のセルに表示されます。

コンポーネントが追加されたら、ほかのコンポーネントとそろうように、それらのグリッドバッグ制約を指定する必要があります。

グリッド領域で JTextField1 コンポーネントが選択されている状態で、プロパティーシートで次を行います。

「グリッド幅」コンボボックスに「3」と入力し、Enter キーを押します。
「サイズ設定の方法 (Fill)」コンボボックスで、「水平」を選択します。
「アンカー」コンボボックスで、下にスクロールして「ベースライン」を選択します。
「ウエイト X」テキストフィールドに「1.0」と入力し、Enter キーを押します。

jTextField1 - 指定された制約

グリッド領域で JLabel1 コンポーネントを選択し、プロパティーシートで下にスクロールして「ベースラインの先頭」を選択することによって、その「アンカー」制約を指定します。

グリッド領域で JLabel1 と JTextField1 の両方のコンポーネントを選択し、「インセット」テキストフィールドの右にある参照ボタン ( 「参照」ボタン ) をクリックします。「インセット」ダイアログボックスが表示されます。「上:」テキストフィールドに「5」と入力し、「了解」をクリックします。

フォームは次に示すようになります。

指定された制約

注: GridBag カスタマイザは、レイアウト内のコンポーネントの位置を追加、削除、および変更するのに役立ちます。レイアウト内のコンポーネントのプロパティー (背景やテキストなど) を変更するには、GUI ビルダーの「デザイン」ウィンドウを使用してください。

JLabel1 の表示テキストを設定するには、次のようにします。

「閉じる」をクリックして「レイアウトをカスタマイズ」ダイアログボックスを閉じます。
「デザイン」ビューで、JLabel1 コンポーネントを選択し、F2 キーを押します (または、コンテキストメニューから「テキストを編集」を選択します)。
選択されているテキストを削除し、「Skype:」と入力します。
Enter キーを押します。

JTextField1 コンポーネントのテキストを削除するには、次の手順に従います。

「デザイン」ビューで、JTextField1 コンポーネントを選択し、F2 キーを押します (または、コンテキストメニューから「テキストを編集」を選択します)。
選択されているテキストを削除し、Enter キーを押します。

レイアウトの再配置

GridBag カスタマイザを使用すると、必要に応じてフォームコンポーネントをすばやく再配置することによって時間と労力を節約できます。

「Phone」セクションのレイアウトと、既存の 4 つのテキストフィールドの位置を 1 列から 2 つのテキストフィールドを含む 2 列に変更するには、次の手順に従います。

フォームを右クリックし、コンテキストメニューから「レイアウトをカスタマイズ」を選択します。
「レイアウトをカスタマイズ」ダイアログボックスで、Ctrl キーを押しながら 4 つの JTextField コンポーネントをクリックして選択します。
テキストフィールドの右端を左にドラッグし、テキストフィールドが 2 番目のグリッド列だけを占有する、つまり 3 番目と 4 番目のグリッド列を占有しなくなるようにドロップします。

GridBag カスタマイザは複数のコンポーネントのサイズをまとめて変更でき、それによって、テキストフィールドの 2 番目の列の領域が確保されます。
フォームの外側をクリックして、サイズが変更されたテキストフィールドの選択を解除します。
Ctrl キーを押しながらクリックすることにより、「Phone」セクション内の「Skype:」と「Home Phone:」の JLabel および JTextField コンポーネントをすべて選択します。
選択の上にカーソルを置き、上の 2 つのテキストフィールドの右にドラッグします。

注: ドラッグする前に、カーソルが双方向の矢印に変わっていないことを確認してください。変わっていると、代わりに選択のサイズが変更されます。

コンポーネントを移動すると、フォームは次に示すようになります。

冗長な行 10 と 11 を破棄するには、行ヘッダーを右クリックし、コンテキストメニューから「行を削除」を選択します。

「Phone」セクションがよりコンパクトになりました。

ここで 2 番目の列の間隔を修正するには、次のようにします。

グリッド領域で、Ctrl キーを押しながら「Skype:」と「Home Phone:」のラベルをクリックして選択します。
「インセット」テキストフィールドの右にある参照ボタン () をクリックします。
「インセット」ダイアログボックスが表示されます。
「左:」テキストフィールドに「5」と入力し、「了解」をクリックします。

サブコンテナの導入

グリッドベースのレイアウトでは、サブコンテナを使用して解決する必要のある、不必要な依存関係が導入される場合があります。

ツールバーの「レイアウトをテスト」ボタン () をクリックし、現在のレイアウトの水平方向のサイズ変更可能状態をテストすると、「Browse」、「OK」、および「Cancel」ボタンの周りに不要なスペースができていることがわかります。

これは、4 番目の列がテキストフィールドとボタン (それぞれ、拡張するコンポーネントと拡張しないコンポーネント) の両方で構成されているために発生します。レイアウトを変更して、「Browse」ボタンの周りにある余分なスペースが「Street」および「City:」テキストフィールドで使用されるようにする必要があります。現在のレイアウトでは、「Street:」および「City:」テキストフィールドの右端が「Home Phone:」テキストフィールドの左端と確実に同じ垂直位置になります。これらの位置を独立させるには、次の手順に従います。

Ctrl キーを押しながら「Street:」テキストフィールドとその右にある「Browse」ボタンをクリックして選択します。
選択を右クリックし、コンテキストメニューから「コンテナに格納」を選択します。

コンポーネントがサブコンテナに格納されたあとは、「Home Phone:」のラベルとテキストフィールドの間の境界が、「Street」のテキストフィールドとボタンの間の境界に影響を与えることはなくなります。

注: 「コンテナに格納」アクションでは、選択されたコンポーネントによって占有されたセル内に新しいサブコンテナが作成されます。これにより、選択されたコンポーネントは新しく導入されたコンテナに移動されますが、それらの相対的な位置やその他のレイアウト制約は保持されます。

「City:」テキストフィールドとその右にある「Browse」ボタンに対しても上に示した 2 つの手順を繰り返して、それらを次に示すようにサブコンテナに格納します。

「コンテナに格納」

ここで、「OK」および「Cancel」ボタンの周りにある不要なスペースを次のように修正する必要があります。

「閉じる」をクリックして、サブコンテナに格納されたコンポーネントの選択を解除し、フォームを右クリックして、コンテキストメニューから「レイアウトをカスタマイズ」を選択します。
Ctrl キーを押しながら、フォームのいちばん下にある「OK」および「Cancel」ボタンをクリックして選択します。
選択を右クリックし、コンテキストメニューから「コンテナに格納」を選択します。
これらのボタンのための新しいサブコンテナが作成されます。

注: サブコンテナ内のどのコンポーネントもサイズを変更できません。そのため、それらはコンテナの中央に互いに隣り合わせに配置されます。これがデフォルトのアンカー設定です。

サブコンテナ全体のアンカー設定を変更するには、次の手順に従います。

「OK」および「Cancel」ボタンを含むサブコンテナが選択されていることを確認し、「アンカー」コンボボックスの右にある矢印ボタン () をクリックします。
下にスクロールして、一覧から「行の終わり」を選択します。

レイアウトは問題ないように見えますが、「OK」および「Cancel」ボタンを含むサブコンテナは、最後の行にある最後の 2 つのセルだけを占有しています。
「OK」ボタンや「Cancel」ボタンの幅が (たとえば、別の言語への翻訳中に) 長くなると、それによって、「Work Phone:」や「Cell Phone:」のテキストフィールドの右端が押されます。
この潜在的な問題を回避し、このサブコンテナによっていちばん下の行のすべてのセルが占有されるようにするには、そのサブコンテナを選択して左の境界を行の先頭までドラッグします。

サイズが変更されたサブコンテナ

このサブコンテナにより、いちばん下の行のすべてのセルが占有されています。

コンテナ間の移動

あるコンポーネントをサブコンテナに (たとえば、「Help」ボタンを既存の「OK」および「Cancel」ボタンに) 追加するには、メインコンテナからサブコンテナに切り替えてから後者のレイアウトを編集する必要があります。

既存のサブコンテナにボタンを追加するには、次に示す手順に従います。

「OK」および「Cancel」ボタンを含むサブコンテナをクリックして選択します。
コンテナを右クリックしてコンテキストメニューを表示し、そこから「このコンテナをデザイン」を選択します。
2 番目の列ヘッダーを右クリックし、コンテキストメニューから「列を後ろに挿入」を選択します。
新しいボタンのための空のセルが表示されます。
新しく作成されたセルの内部を右クリックし、コンテキストメニューから「コンポーネントを追加」>「Swing コントロール」>「ボタン」を選択します。
新しい「jButton1」ボタンが追加されます。
プロパティーカスタマイザで「ベースライン関連のアンカー」ボタン () をクリックして、新しいボタンをこの行にある 2 つの既存のボタンにそろえます。
メインコンテナの現在のレイアウトの外観を確認するには、デザインされたサブコンテナを右クリックし、コンテキストメニューから「親コンテナをデザイン」を選択します。

注: これらのボタンを右クリックしても、コンテキストメニューは表示されません。

レイアウトのデザインが完了しました。
コンテナのレイアウトには関連しない最後の変更が残されています。
ボタンの名前を変更するには、次の手順に従います。

「閉じる」をクリックして「レイアウトをカスタマイズ」ダイアログボックスを閉じます。
「デザイン」ビューで、「jButton1」コンポーネントをクリックし、F2 キーを押します (または、コンテキストメニューから「テキストを編集」を選択します)。
選択されているテキストを削除し、「Help」と入力します。
Enter キーを押します。