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

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

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

目次

このページの内容は、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. 「プロジェクトを開く」をクリックします。
    「プロジェクト」ウィンドウは次のようになります。

    「プロジェクト」ウィンドウ

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

    開いているInitial.java

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

    「ナビゲータ」ウィンドウ

先頭

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

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

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

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

    強調表示されたギャップ

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

    サイズ変更可能に変わったポインタ

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

    ギャップの拡大

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

    ラベルの追加

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

    「Middle Name:」に変更されたテキスト

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

    テキスト・フィールドの追加

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

    テキスト・フィールドのサイズ変更

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

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

テキスト・フィールドのサイズ変更

先頭

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

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

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

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

デフォルト小

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

挿入された「Middle Name」行

先頭

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

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

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

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

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

    ポップアップ・メニューで「パネル」を選択

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

    1つのパネルに含まれたボタン

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

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

    「レイアウト・スペースを編集」ダイアログ・ボックス

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

    除去された左右のギャップ

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

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

    サイズ変更される下部のギャップ

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

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

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

ボタンが含まれるコンテナの中央揃え

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

中央揃えされたボタン

先頭

サマリー

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

先頭


関連項目

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

先頭

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo