// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= GridBagカスタマイザを使用した高度なJavaフォームのデザイン
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: GridBagカスタマイザを使用した高度なJavaフォームのデザイン - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, GridBagカスタマイザを使用した高度なJavaフォームのデザイン

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

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

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

* 第1部: link:../java/gbcustomizer-basic.html[+GridBagカスタマイザを使用した基本的なJavaフォームのデザイン+]
* 第2部: GridBagカスタマイザを使用した高度なJavaフォームのデザイン

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


image::images/netbeans-stamp-80-74.png[title="このページの内容は、NetBeans IDE 7.1以降に適用されます"]


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

|===
|ソフトウェアまたはリソース |必須バージョン 

|link:http://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.1以降 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |バージョン6、7または8 

|link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+] |初期およびターゲット・チュートリアルのレイアウトを含むデモ・プロジェクトが含まれているアーカイブ。 
|===

*注意:*

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


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

GridBagカスタマイザを使用してコンポーネントのレイアウトを開始する前に、link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+]をダウンロードし、 ``GridBagCustomizerAdvancedTutorial`` プロジェクトをハード・ドライブ上に抽出してNetBeans IDEで開きます。

1. link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+]プロジェクトをコンピュータ上の任意の場所にダウンロードして解凍します。
2. NetBeans IDEの「プロジェクト」タブで、「ファイル」メニューの「プロジェクトを開く」をクリックし、前のステップで抽出した ``GridBagCustomizerAdvancedTutorial`` プロジェクトに移動して「プロジェクトを開く」をクリックします。このプロジェクト・フォルダは、同じ ``GridBagCustomizerAdvancedTutorial`` という名前のフォルダに含まれている場合もあります。

*注意:*  ``GridBagCustomizerAdvancedTutorial`` プロジェクトでは、更新センターから入手できる ``JUnit`` と ``JUnit 4`` クラス・ライブラリを使用します。「プロジェクトを開く」ダイアログ・ボックスで「問題を解決」をクリックし、次に「参照の問題を解決」ダイアログ・ボックスで「解決」をクリックし、NetBeans IDEのインストーラの指示に従ってJUnitプラグインをインストールする必要がありますインストールが完了したら、「終了」をクリックして「NetBeans IDEのインストーラ」ダイアログ・ボックスを閉じ、「閉じる」をクリックして「参照の問題を解決」ダイアログ・ボックスを閉じます。


.  ``「ソース・パッケージ」>「tutorial」`` を展開し、 ``ContactsAdvancedInitial.java`` をダブルクリックします。
サンプル・フォームがGUIビルダーの「デザイン」ビューで開きます。

[.feature]
--
image::images/sampleform-small.png[role="left", link="images/sampleform.png"]
--


== GridBagカスタマイザの起動

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

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

[.feature]
--
image::images/customizerdialog-small.png[role="left", link="images/customizerdialog.png"]
--

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


== 高度な機能

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

image::images/targetlayout.png[]

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


=== 新しい行の挿入

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

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

image::images/insertrow.png[]

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

image::images/rowinserted.png[]


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

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

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

[.feature]
--
image::images/addcomponent-small.png[role="left", link="images/addcomponent.png"]
--

強調表示された ``JLabel1`` が最初のセルに表示されます。


. 新しく追加された行の2つ目のセルを右クリックします。


. コンテキスト・メニューから ``「コンポーネントを追加」>「Swingコントロール」>「テキスト・フィールド」`` を選択します。
強調表示された ``JTextField1`` が2つ目のセルに表示されます。

image::images/highlightedtextfield.png[]

コンポーネントが追加されたら、他のコンポーネントとそろうように、それらのGridBag制約を指定する必要があります。

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

1. 「グリッド幅」コンボ・ボックスに「 ``3`` 」と入力し、[Enter]を押します。
2. 「フィル」コンボ・ボックスで、「 ``水平`` 」を選択します。
3. 「アンカー」コンボ・ボックスで、下にスクロールして「 ``ベースライン`` 」を選択します。
4. 「ウエイトX」テキスト・フィールドに「 ``1.0`` 」と入力し、[Enter]を押します。

image::images/textfieldconstraints.png[]

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

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

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

image::images/constraintsset.png[]

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

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

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

 ``JTextField1`` コンポーネントのテキストを除去するには、次の手順を行います:


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


=== レイアウトの再配置

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

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

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

image::images/textfieldsonecolumn.png[]

GridBagカスタマイザは複数のコンポーネントのサイズをまとめて変更でき、それによって、テキスト・フィールドの2番目の列の領域が確保されます。


. フォームの外側をクリックして、サイズが変更されたテキスト・フィールドの選択を解除します。


. 「 ``Phone`` 」セクション内の「 ``Skype:`` 」と「 ``Home Phone:`` 」の ``JLabel`` と ``JTextField`` コンポーネントを[Ctrl]を押しながらクリックしてすべて選択します。


. 選択範囲の上にカーソルを置き、上の2つのテキスト・フィールドの右にドラッグします。

image::images/movesecondcolumn.png[]

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

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

image::images/extrarows.png[]

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

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

image::images/textfieldsmoved.png[]

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

1. グリッド領域で、[Ctrl]を押しながら「 ``Skype:`` 」と「 ``Home Phone:`` 」のラベルをクリックして選択します。
2. 「 ``インセット`` 」テキスト・フィールドの右にある「参照」ボタン(image::images/browsebutton.png[])をクリックします。
「 ``インセット`` 」ダイアログ・ボックスが表示されます。


. 「 ``左:`` 」テキスト・フィールドに「 ``5`` 」と入力し、「OK」をクリックします。


=== サブコンテナの導入

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

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

[.feature]
--
image::images/unwantedspace-small.png[role="left", link="images/unwantedspace.png"]
--

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

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

[.feature]
--
image::images/enclose-small.png[role="left", link="images/enclose.png"]
--

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

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

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

image::images/enclosecity.png[]

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

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

image::images/subcontainerbuttons.png[]

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

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

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

image::images/subcontainerlineend.png[]

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

image::images/subcontainerresized.png[]

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


=== コンテナ間の移動

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

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

1. 「 ``OK`` 」および「 ``Cancel`` 」ボタンを含むサブコンテナをクリックして選択します。
2. コンテナを右クリックしてコンテキスト・メニューを表示し、そこから「 ``このコンテナをデザイン`` 」を選択します。

[.feature]
--
image::images/designsubcontainer-small.png[role="left", link="images/designsubcontainer.png"]
--


. 2番目の列ヘッダーを右クリックし、コンテキスト・メニューから「 ``列を後ろに挿入`` 」を選択します。
新しいボタンのための空のセルが表示されます。

[.feature]
--
image::images/emptycell-small.png[role="left", link="images/emptycell.png"]
--


. 新しく作成されたセルの内部を右クリックし、コンテキスト・メニューから「 ``コンポーネントを追加`` 」>「 ``Swingコントロール`` 」>「 ``ボタン`` 」を選択します。
新しい「 ``jButton1`` 」ボタンが追加されます。

[.feature]
--
image::images/newbutton-small.png[role="left", link="images/newbutton.png"]
--


. プロパティ・カスタマイザで「ベースライン関連のアンカー」ボタン(image::images/baselineanchor.png[])をクリックし、新しいボタンをこの行にある2つの既存のボタンにそろえます。


. 「インセット」テキスト・フィールドの右にある「参照」ボタン(image::images/browsebutton.png[])をクリックします。「インセット」ダイアログ・ボックスが表示されます。「上:」テキスト・フィールドに「5」と入力し、「OK」をクリックします。


. メイン・コンテナの現在のレイアウトの外観を確認するには、デザインされたサブコンテナを右クリックし、コンテキスト・メニューから「 ``親コンテナをデザイン`` 」を選択します。

image::images/designparentcontainer.png[]

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

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

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

image::images/finallayout.png[]


== サマリー

このチュートリアルでは、新しいコンポーネントの追加や行の挿入などを実行することで、既存のフォームを変更しました。レイアウトのデザイン時に、GridBagカスタマイザの高度な機能を使用してフォームのレイアウトを再配置する方法を学習しました。

「link:../java/gbcustomizer-basic.html[+GridBagカスタマイザを使用した基本的なJavaフォームのデザイン+]」に移動

<<top,先頭>>

link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20an%20Advanced%20Java%20Form%20Using%20the%20GridBag%20Customizer[+このチュートリアルに関するご意見をお寄せください+]


== 関連項目

これで、GridBagカスタマイザを使用した高度なJavaフォームのデザインのチュートリアルを完了しました。作成するGUIに機能を追加する方法については、次のドキュメントを参照してください。

* link:gui-functionality.html[+GUIビルドの概要+]
* link:gui-image-display.html[+GUIアプリケーションでのイメージの処理+]
* link:http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29[+GUIビルダーのFAQ+]
* link:../../trails/matisse.html[+Java GUIアプリケーションの学習+]
* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+NetBeans IDEによるアプリケーションの開発+]の_Java GUIの実装_

<<top,先頭>>