NetBeans GUIビルダーでのギャップ編集機能のサポート

This tutorial needs a review. You can open a JIRA issue, or edit it in GitHub following these contribution guidelines.

Jan Stola、Alyona Stashkova

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

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

netbeans stamp 80 74 73
Figure 1. このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます

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

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

NetBeans IDE

7.2、7.3、7.4または8.0

Java Development Kit (JDK)

バージョン6、7または8

GapSupport.zip

初期およびターゲット・チュートリアルのレイアウトを含むソース・ファイルが含まれているアーカイブ。

*注意: *

  • このチュートリアルの開始点として使用されるプロジェクトを .zip アーカイブとしてダウンロードできます。

  • このチュートリアルは、コンテナのレイアウトのデザインにのみ焦点を置いています。GUIへの機能の追加は範囲に含まれていません。

  • ギャップの視覚化をオンまたはオフにするには、IDEのメイン・メニューで「 ツール 」>「 オプション 」>「 Java 」>「 GUIビルダー 」を選択し、「 追加のレイアウト情報を視覚化 」オプションを使用します。

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

  1. GapSupport.zipアーカイブをコンピュータ上の任意の場所にダウンロードして解凍します。

  2. NetBeans IDEのメイン・メニューで「 ファイル 」>「 プロジェクトを開く 」を選択し、解凍したファイルおよび前のステップで抽出した GapSupport プロジェクトを含むフォルダに移動します。

  3. 「プロジェクトを開く」をクリックします。 「プロジェクト」ウィンドウは次のようになります。

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

initialform

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

navigator

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

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

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

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

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

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

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

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

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

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

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

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

middle inserted gap

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

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

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

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

default small

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

middle inserted

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

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

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

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

  1. フォーム内の4つのボタンをすべて選択します。

  2. 選択範囲を右クリックし、ポップアップ・メニューから「 含める 」>「 パネル 」を選択します。

enclose panel

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

buttons enclosed

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

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

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

gaps removed

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

  1. 最後のボタンの下部にあるギャップをダブルクリックします。 「レイアウト・スペースを編集」ダイアログ・ボックスが表示されます。

    1. 「レイアウト・スペースを編集」ダイアログ・ボックスで、「 サイズ変更可能 」オプションを選択し、「OK」をクリックします。

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

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

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

align

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

buttons centered

サマリー

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

関連項目

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