// 
//     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.
//

= NetBeans GUIビルダーでのギャップ編集機能のサポート
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: NetBeans GUIビルダーでのギャップ編集機能のサポート - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, NetBeans GUIビルダーでのギャップ編集機能のサポート

Jan Stola、Alyona Stashkova

フリー・デザイン・モードのコンテナのレイアウトは、複数のコンポーネントおよびそれらのコンポーネント間のギャップで構成されます。コンポーネントとギャップは両方とも、GUIビルダーのデザイン・ビューに視覚化されます。NetBeans IDEを使用すると、GUIビルダーでギャップを直接編集できます。

このチュートリアルでは、ギャップ編集機能を使用して他のコンポーネントとの間に新しいUIコンポーネントを挿入する方法、および基礎となるレイアウト・マネージャを考慮せずにNetBeans GUIビルダーでコンポーネントをフレームに沿って簡単に中央揃えする方法について説明しています。このチュートリアルは、プロジェクトに必要な特定のターゲット・レイアウトを実装するために、フリー・デザイン・モードで既存のフォーム内の変更を実行する方法を示すためのガイドとして作成されています。


image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます"]


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

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

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2、7.3、7.4または8.0 

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

|link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip[+GapSupport.zip+] |初期およびターゲット・チュートリアルのレイアウトを含むソース・ファイルが含まれているアーカイブ。 
|===

*注意: *

* このチュートリアルの開始点として使用されるプロジェクトを ``.zip`` アーカイブとしてダウンロードできます。
* このチュートリアルは、コンテナのレイアウトのデザインにのみ焦点を置いています。GUIへの機能の追加は範囲に含まれていません。
* ギャップの視覚化をオンまたはオフにするには、IDEのメイン・メニューで「 ``ツール`` 」>「 ``オプション`` 」>「 ``Java`` 」>「 ``GUIビルダー`` 」を選択し、「 ``追加のレイアウト情報を視覚化`` 」オプションを使用します。


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

1. link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip[+GapSupport.zip+]アーカイブをコンピュータ上の任意の場所にダウンロードして解凍します。
2. NetBeans IDEのメイン・メニューで「 ``ファイル`` 」>「 ``プロジェクトを開く`` 」を選択し、解凍したファイルおよび前のステップで抽出した ``GapSupport`` プロジェクトを含むフォルダに移動します。
3. 「プロジェクトを開く」をクリックします。
「プロジェクト」ウィンドウは次のようになります。

image::images/prj.png[]

4.  ``Initial.java`` ファイルをダブルクリックします。
サンプル・フォームがGUIビルダーの「デザイン」ビューで開きます。

image::images/initialform.png[]

*注意:* 「ナビゲータ」ウィンドウにフォームのコンポーネント階層を表示するには、メイン・ツールバーから「ウィンドウ」>「ナビゲータ」を選択します。

image::images/navigator.png[]

<<top,先頭>>


== 端のドラッグ・アンド・ドロップによるギャップのサイズ変更

IDEのデザイン・ビューで、端をドラッグ・アンド・ドロップしてギャップを編集する方法を説明します。

「 ``First Name`` 」行と「 ``Last Name`` 」行の間に「 ``Middle Name`` 」行を追加するには、次の手順を完了する必要があります。

1. 「 ``First Name`` 」ラベルと「 ``Last Name`` 」ラベルの間のギャップをクリックします。
ギャップが緑色で強調表示されます。

image::images/gap-highlighted.png[]

2. 強調表示されたギャップの下部にマウス・ポインタを置きます。
ポインタは、垂直方向にサイズ変更可能なポインタに変わります。

image::images/gap-resizable.png[]

3. マウスの左ボタンを押しながらポインタを下へドラッグして選択したギャップを50まで拡大し、マウスの左ボタンを離します。
ギャップの新しいサイズがツールチップに表示されます。

image::images/resizing.png[]

4. パレットの「Swingコントロール」セクションから新しいラベルをドラッグし、作成したギャップにドロップします。これにより、左端が「 ``First Name`` 」ラベルの左端にそろい、上端には「 ``First Name`` 」行からの提案された優先ギャップが確保されます。

image::images/jlabel.png[]

5. ラベルをダブルクリックし、ラベルのテキストを「 ``Middle Name:`` 」に変更します。

image::images/middle-name.png[]

6. パレットの「Swingコントロール」セクションから新しいテキスト・フィールドをドラッグして「 ``Middle Name:`` 」ラベルの右に追加します。これにより、新しいテキスト・フィールドはベースラインが「 ``Middle Name`` 」ラベルとそろい、左端が他のテキスト・フィールドとそろいます。

image::images/textfield.png[]

7. テキスト・フィールドの右端をドラッグして、他のテキスト・フィールドの右端とそろえます。

image::images/textfield-resized.png[]

8. テキスト・フィールド内のテキストを右クリックし、ポップアップ・メニューから「テキストを編集」を選択します。テキストを除去します。

「 ``Middle Name`` 」行がフォーム・コンポーネント間に挿入されます。

image::images/middle-inserted-gap.png[]

<<top,先頭>>


== マウス・ホイールを使用したギャップのサイズ変更

IDEでギャップをサイズ変更するには、マウス・ホイールをクリックしてスクロールし、ギャップ・サイズを調整します。

「 ``Middle Name`` 」行と「 ``Last Name`` 」行の間の余分なスペースを除去するには、下のギャップをクリックしてマウス・ホイールを下方向にスクロールし、新しいサイズを「 ``デフォルト小`` 」に設定してギャップの高さを小さくします。

*注意:* NetBeans GUIビルダーでは、コンポーネントの配置用に、「 ``デフォルト小`` 」、「 ``デフォルト中`` 」、および「 ``デフォルト大`` 」の3つの優先ギャップがサポートされています。

image::images/default-small.png[]

フォーム・コンポーネント間のギャップは、マウス・ホイールおよび優先ギャップを使用してサイズ変更されます。

image::images/middle-inserted.png[]

<<top,先頭>>


== コンポーネント周囲のギャップの編集

コンポーネントを中央揃えするには、すでにサイズ変更可能とマークされた2つの同じギャップにコンポーネントを含めます。

*注意:* コンテナは、コンポーネントを中央揃えする場所を指定するのに役立ちます。ボタンは新しいパネルに含めなくても中央揃えできますが、GUIビルダーでこの作業を行うのはより難しく、完成したレイアウトが壊れやすい場合があります。このため、可能な場合は、中央揃えするコンポーネントをパネルに含めることをお薦めします。

*ボタンおよびサイズ変更可能なギャップを個別のコンテナに含めるには、次を行います:*

1. フォーム内の4つのボタンをすべて選択します。
2. 選択範囲を右クリックし、ポップアップ・メニューから「 ``含める`` 」>「 ``パネル`` 」を選択します。

image::images/enclose-panel.png[]

ボタンが1つのコンテナに含まれます。

image::images/buttons-enclosed.png[]

*ボタンの左右に新たに作成されたギャップを除去するには、次の手順を行います:*

1. いずれかのボタンを右クリックし、ポップアップ・メニューから「レイアウト・スペースを編集」を選択します。
「レイアウト・スペースを編集」ダイアログ・ボックスが表示されます。

image::images/edit-layout-space.png[]

2. 左右のギャップのサイズを0に設定し、「OK」をクリックします。
「レイアウト・スペースを編集」ダイアログ・ボックスを使用して、ボタンの左右のギャップが除去されます。

image::images/gaps-removed.png[]

*コンテナの上下のギャップをサイズ変更可能にするには、次を行います:*

1. 最後のボタンの下部にあるギャップをダブルクリックします。
「レイアウト・スペースを編集」ダイアログ・ボックスが表示されます。
2. 「レイアウト・スペースを編集」ダイアログ・ボックスで、「 ``サイズ変更可能`` 」オプションを選択し、「OK」をクリックします。

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

3. 一番上のボタンの上にあるギャップについて、ステップ1と2を繰り返します。
ボタンが含まれるコンテナの上下のギャップがサイズ変更可能になります。

*サンプル・フォームのボタンを中央揃えするには:*

次に示すように、ボタンが含まれるコンテナの下端をドラッグして、リストの下端にそろえます。

image::images/align.png[]

コンテナは、「 ``Available Topics`` 」リストと「 ``Selected Topics`` 」リストの高さと一致するように拡張されます。周囲のギャップはサイズ変更可能とマークされているため、ボタンを囲むコンテナによって決められたスペース内でボタンが中央揃えされます。

image::images/buttons-centered.png[]

<<top,先頭>>


== サマリー

このチュートリアルでは、基本的なフォームを拡張しました。ギャップを操作するとき、フリー・デザイン・モードで空のスペースを管理し、レイアウト実装の詳細の微調整に余分な時間をかけずに魅力的なUIをデザインする方法を学習しました。

<<top,先頭>>

link:/about/contact_form.html?to=3&subject=Feedback:%20Gap%20Support[+このチュートリアルに関するご意見をお寄せください+]


== 関連項目

これで、NetBeans GUIビルダーでのギャップ編集機能のサポートのチュートリアルを完了しました。作成するGUIに機能を追加する方法については、次のドキュメントを参照してください。

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

<<top,先頭>>