NetBeans IDE 5.5 における GUI 構築

オフラインで読む場合、zip ファイル quickstart-gui.zip をダウンロードしてください。

このチュートリアルでは、NetBeans IDE の GUI ビルダー (別名 Matisse) を使用して、ContactEditor というアプリケーションのグラフィカルユーザーインタフェース (GUI) を作成する手順を示します。このとき、社員のデータベースに含まれる個人の連絡先情報を表示、編集できる GUI フロントエンドのレイアウトを決定します。

このチュートリアルでは、次の作業を行なう方法を学びます。

• GUI ビルダーのインタフェースを操作する
• GUI コンテナを作成する
• コンポーネントを追加する
• コンポーネントのサイズを変更する
• コンポーネントの位置揃えを行なう
• コンポーネントのアンカーを調整する
• コンポーネントの自動サイズ変更の動作を設定する
• コンポーネントのプロパティーを編集する

このチュートリアルを完了するのに要する時間は約 30 分です。

注: アイコンをクリックすると、GUI ビルダーの機能の詳細な対話型デモを表示できます。

作業の開始

NetBeans 5.0 では、IDE の GUI ビルダーが改善されてより強力かつ直感的になり、ユーザーはレイアウトマネージャーを熟知していなくてもプロ級の GUI を構築できるようになりました。NetBeans の新しい GUI ビルダーでは、GUI を構築する作業が簡素化され、コンポーネントを任意の場所に置くだけでフォームのレイアウトを決定できます。

GUI ビルダーの視覚的なフィードバックについての詳細は、「GUI Builder Visual Feedback Legend」を参照してください。

プロジェクトの作成

IDE では、プロジェクト内で Java 開発を行なうので、ソースやその他のプロジェクトファイルを保存する ContactEditor プロジェクトを新規に作成する必要があります。IDE では、Java ソースファイルと、関連するメタデータ全体をプロジェクトと呼びます。メタデータには、プロジェクト固有のプロパティーファイルや、その構築と実行を制御する Ant 構築スクリプト、Ant ターゲットを IDE コマンドにマッピングする project.xml ファイルが含まれます。Java アプリケーションは複数の IDE プロジェクトで構成されることがよくありますが、このチュートリアルでは、完全に 1 つのプロジェクトに収まる単純なアプリケーションを作成します。

新しい ContactEditor アプリケーションのプロジェクトを作成する手順は、次のとおりです。 「ファイル」>「新規プロジェクト」を選択します。または、IDE ツールバーにある「新規プロジェクト」アイコンをクリックして選択することもできます。 「カテゴリ」区画で「一般」ノードを選択し、「プロジェクト」区画で「Java アプリケーション」を選択します。「次へ」をクリックします。 「プロジェクト名」フィールドに ContactEditor と入力し、プロジェクトの場所を指定します。 「主プロジェクトとして設定」チェックボックスが選択されていることを確認し、「主クラスを作成」が選択されている場合は、選択解除します。 「完了」をクリックします。 システム上の指定した場所に ContactEditor フォルダが作成されます。このフォルダには、プロジェクトの Ant スクリプト、ソースとテストを保持するフォルダ、プロジェクト専用のメタデータ用のフォルダなど、プロジェクトに関連するすべてのファイルとフォルダが含まれます。プロジェクト構造を表示するには、IDE の「ファイル」ウィンドウを使用します。

GUI コンテナの作成

新しいアプリケーションを作成すると、「プロジェクト」ウィンドウの「ソースパッケージ」フォルダに空の「<デフォルトパッケージ>」ノードが追加されます。インタフェースの構築に進むには、ほかの必要な GUI コンポーネントを入れる Java コンテナを作成する必要があります。この手順では、JFrame コンポーネントを使ってコンテナを作成し、新しいパッケージにそのコンテナを配置します。

JFrame コンテナを作成する手順は、次のとおりです。 「プロジェクト」ウィンドウで「ContactEditor」ノードを右クリックし、「新規」>「JFrame フォーム」を選択します。 クラス名として ContactEditorUI と入力します。 パッケージとして my.contacteditor と入力します。 「完了」をクリックします。 IDE によって、ContactEditorUI.java アプリケーション内に ContactEditorUI フォームと ContactEditorUI クラスが作成され、ContactEditorUI フォームが GUI ビルダー内で開きます。デフォルトのパッケージが my.contacteditor パッケージに置き換わります。

ページの先頭へ

GUI ビルダーの操作

アプリケーション用の新しいプロジェクトを作成できたので、GUI ビルダーのインタフェースの操作を練習してみます。GUI ビルダーのインタフェースの対話型デモを表示するには、「デモを表示」アイコンをクリックしてください。

デモを表示

上図に示すように、JFrame コンテナを追加すると、新しく作成された ContactEditorUI フォームがエディタのタブで開きます。ツールバーには、複数のボタンがあります。ContactEditor フォームは GUI ビルダーのデザインビューで開き、構築するGUI フォームを移動、編成、および編集できる 3 つのウィンドウが IDE の両端に自動的に表示されます。

GUI ビルダーには、次のウィンドウがあります。

• デザイン領域。Java の GUI フォームを作成、編集する GUI ビルダーの主ウィンドウ。ツールバーの「ソース」トグルボタンと「デザイン」トグルボタンをクリックすると、クラスのソースコードを表示するか、その GUI コンポーネントをグラフィカルに表示するかを切り替えることができます。ツールバーのその他のボタンを使用すると、選択モードと接続モードの切り替え、コンポーネントの位置揃え、コンポーネントの自動サイズ変更の動作の設定、フォームのプレビューなどの一般的な操作を行なうことができます。
• インスペクタ。アプリケーション内の可視および不可視両方のすべてのコンポーネントをツリー階層形式で表示します。また、「インスペクタ」ウィンドウは、提供されるパネルでコンポーネントを整理できるだけでなく、現在 GUI ビルダーで編集中のツリーコンポーネントに関する視覚的なフィードバック情報も提供します。
• パレット。使用可能なコンポーネントの一覧で、カスタマイズできます。レイアウトマネージャーのほか、「Swing」、「AWT」、および「Beans」のコンポーネントのタブがあります。また、パレットに表示されるカテゴリは、カスタマイザを使用して作成、削除、および再配置できます。
• 「プロパティー」ウィンドウ。GUI ビルダー、「インスペクタ」ウィンドウ、「プロジェクト」ウィンドウ、または「ファイル」ウィンドウで現在選択されているコンポーネントのプロパティーが表示されます。

「ソース」ボタンをクリックすると、アプリケーションの Java ソースコードがエディタに表示されます。GUI ビルダーによって自動的に生成された部分 (保護されたブロック) は青で示されます。保護されたブロックは、ソースビューで編集できない部分です。ソースビューでコードを編集できるのはエディタの白い部分だけです。保護されたブロック内のコードを変更する必要がある場合は、「デザイン」ボタンをクリックして GUI ビルダーに戻り、フォームを調整します。変更内容を保存すると、ファイルのソースが更新されます。

注: 上級開発者は、パレットカスタマイザを使ってカスタムコンポーネントを JAR、ライブラリ、またはほかのプロジェクトからパレットに追加できます。

ページの先頭へ

主な概念

IDE の GUI ビルダーによって、グラフィカルインタフェースの作成作業の流れが合理化され、開発者は複雑な Swing レイアウトマネージャーを使用する必要がないので、Java の GUI 作成の主な問題点が解決します。現在の NetBeans IDE の GUI ビルダーは、理解しやすく簡単に利用できる単純レイアウト規則によって、「フリーデザイン」方式をサポートするように拡張されました。GUI ビルダーでフォームのレイアウトを調整するときは、コンポーネントの最適な間隔や位置揃えを示す視覚的なガイドラインが表示されます。バックグラウンドでは、GUI ビルダーによってデザインが機能する UI に変換され、この UI は、新しい GroupLayout レイアウトマネージャーやその他の Swing の構造を使って実装されます。GUI ビルダーでは動的なレイアウトモデルが使用されているので、GUI ビルダーを使って構築した GUI は、実行時に期待どおりに動作し、変更を行なった場合は、コンポーネント間で定義された関係を変更せずに調整されます。フォームのサイズを変更するか、ロケールを変更するか、異なる Look & Feel を指定すると、ターゲットの Look & Feel のインセットとオフセットに合わせて GUI が自動的に調整されます。

フリーデザイン

IDE の GUI ビルダーでは、絶対位置決め方式を使用しているかのようにコンポーネントを任意の位置に置くだけでフォームを構築できます。GUI ビルダーによって必要なレイアウトマネージャーが判別され、自動的にコードが生成されます。インセット、アンカー、塗りつぶしなどを意識する必要はありません。アプリケーションを配備するときは、付属の更新された Swing ライブラリの配布可能な JAR ファイルをパッケージ化することで、アプリケーションを期待どおりに動作させることができます。

コンポーネントの自動配置 (スナップ)

GUI ビルダーでフォームにコンポーネントを追加すると、オペレーティングシステムの Look & Feel に基づいて、コンポーネントの位置決めを助ける視覚的なフィードバックが表示されます。GUI ビルダーでは、フォーム上でのコンポーネントの配置に関して役立つインラインのヒントやその他の視覚的なフィードバックが表示され、またコンポーネントはガイドラインに自動的に配置 （スナップ） されます。ヒントやフィードバックは、フォームにすでに配置されているコンポーネントの位置に基づいて表示されますが、実行時に別のターゲットの Look & Feel が正しく表示されるように、パディングは柔軟になっています。

視覚的なフィードバック

また、GUI ビルダーは、コンポーネント間のアンカー関係と相互の繋がりを視覚的に表現します。これらのフィードバックによって、実行時の GUI の表示と動作に影響するさまざまな配置の関係やコンポーネントの固定の動作を簡単に把握できます。その結果、GUI のデザインプロセスに要する期間を短縮でき、正常に機能するプロ級のビジュアルインタフェースを短時間で作成できます。

ページの先頭へ

作業の開始

GUI ビルダーのインタフェースについて理解できたので、ContactEditor アプリケーションの UI の開発を始めます。この節では、IDE のパレットを使って必要な GUI コンポーネントをフォームに追加します。

NetBeans ではフリーデザイン方式が採用されているので、レイアウトマネージャーを使ってコンテナ内のコンポーネントのサイズや位置を制御する必要がありません。このあとの各図に示すように、必要なコンポーネントを GUI フォームにドラッグ & ドロップ (ピック & ドロップ) するだけです。

コンポーネントの追加: 基礎

IDE の GUI ビルダーによって、Java の GUI を作成するプロセスが簡素化されますが、配置を始める前にインタフェースのレイアウトをスケッチすると役立ちます。 多くのインタフェースデザイナーは、この方法を推奨しています。このチュートリアルでは、GUI のプレビューの節で完成したフォームを確認できます。

フォームの最上位のコンテナとして JFrame をすでに追加したので、次の手順では JPanel をいくつか追加します。JPanel のタイトル付きボーダーを使って UI のコンポーネントをまとめることができます。このあとの各図を参照し、また、この操作を行なう IDE の「ピック & ドロップ」動作に注目してください。

JPanel を追加する手順は、次のとおりです。 「パレット」ウィンドウの「Swing」カテゴリで JPanel コンポーネントをクリックし、マウスボタンを離すことで選択します。 カーソルを GUI ビルダー内のフォームの左上隅に移動します。コンポーネントをコンテナの左上隅に近づけると、適切なマージンを示す横方向と縦方向のガイドラインが表示されます。フォーム内をクリックしてこの位置に JPanel を配置します。 次の図に示すように、JPanel コンポーネントは ContactEditorUI フォーム内にオレンジ色で強調されます。オレンジ色は、コンポーネントが選択されていることを示します。マウスボタンを離すと、コンポーネントのアンカーの関係を示す小さなインジケータが表示され、対応する「JPanel」ノードが「インスペクタ」ウィンドウに表示されます。

次に、このあとで別のコンポーネントを配置するスペースを作るために JPanel のサイズを変更しますが、その前に GUI ビルダーの別の表示機能について説明します。そのためには、追加した JPanel の選択を解除する必要があります。タイトル付きボーダーをまだ追加していないので、選択を解除するとパネルが見えなくなります。ただし、JPanel の上にカーソルを置くと、パネルの位置がわかるように輪郭がグレーに変わります。コンポーネント内の任意の場所をクリックするとコンポーネントがふたたび選択され、サイズ変更のハンドルや、アンカーのインジケータが再度表示されます。

JPanel のサイズを変更する手順は、次のとおりです。 追加した JPanel を選択します。コンポーネントの周囲にサイズ変更のハンドル (小さい四角形) が表示されます。 JPanel の右端のサイズ変更のハンドルをクリックし、マウスボタンを押したまま、フォームの端の近くに点線のガイドラインが表示されるまでドラッグします。 マウスボタンを離してコンポーネントのサイズを変更します。 次の図に示すように、適切なオフセットに従って、JPanel コンポーネントがコンテナの左右のマージンまで広がります。

UI の名前情報用のパネルを追加できたので、この手順を繰り返し、このパネルの下に電子メール情報用のパネルを追加します。このあとの各図を参考にし、表示されるガイドラインに注意して、前の 2 つの作業を繰り返します。2 つの JPanel 間でガイドラインが示す間隔は、左右の端のマージンよりも狭くなっています。2 つめの JPanel を追加したら、フォームの縦方向の残りのスペースが埋まるようにサイズを変更します。

GUI の上下 2 つのセクションの機能を視覚的に区別するために、各 JPanel にボーダーとタイトルを追加します。まず、「プロパティー」ウィンドウでこの作業を行ない、次にポップアップメニューを使って行ないます。

JPanel にタイトル付きボーダーを追加する手順は、次のとおりです。 GUI ビルダーで上の JPanel を選択します。 「プロパティー」ウィンドウで、「border」プロパティーの横にある省略符号ボタン (...) をクリックします。 表示される JPanel のボーダーエディタで、「使用可能なボーダー」区画で「TitledBorder」ノードを選択します。 下の「プロパティー」区画で、「タイトル」プロパティーに Name と入力します。 「フォント」プロパティーの横にある省略符号 (...) をクリックし、「フォントスタイル」に「ボールド」を選択し、「サイズ」に 12 と入力します。「了解」をクリックしてダイアログを閉じます。 下の JPanel を選択し、手順 2 〜 5 を繰り返します。ただし、今回は JPanel を右クリックし、ポップアップメニューを使って「プロパティー」ウィンドウを開きます。「タイトル」プロパティーに E-mail と入力します。 両方の JPanel コンポーネントにタイトル付きボーダーが追加されます。

上記の手順のデモを表示するには、デモを表示をクリックしてください。

フォームへの個々のコンポーネントの追加

連絡先リストで実際の連絡先情報を表示するコンポーネントを追加します。この作業では、連絡先情報を表示する JTextField と、これらのフィールドの説明を表示する JLabel をそれぞれ 4 つ追加します。このとき、オペレーティングシステムの Look & Feel に適切なコンポーネントの間隔を示す横方向と縦方向のガイドラインが表示されます。このガイドラインに従うと、GUI が実行時に自動的にターゲットのオペレーティングシステムの Look & Feel に合わせて表示されます。

フォームに JLabel を追加する手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JLabel コンポーネントを選択します。 先に追加した Name JPanel の上にカーソルを置きます。JLabel が、上端と左端にマージンを残して JPanel の左上隅にあることを示すガイドラインが表示されたら、クリックしてラベルを配置します。 JLabel がフォームに追加され、コンポーネントを表すノードが「インスペクタ」ウィンドウに追加されます。

ここで、追加した JLabel の表示テキストを編集します。コンポーネントの表示テキストはいつでも編集できますが、コンポーネントの追加時に編集するのがもっとも簡単な方法です。

JLabel の表示テキストを編集する手順は、次のとおりです。 JLabel をダブルクリックして表示テキストを選択します。 First Name: と入力して、Enter キーを押します。 JLabel の新しい名前が表示され、コンポーネントの幅がテキストの長さに合わせて調整されます。

ここで、JTextField を追加して、GUI ビルダーのベースライン位置揃え機能を確認します。

フォームに JTextField を追加する手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JTextField コンポーネントを選択します。 First Name: JLabel の右側にカーソルを移動します。JTextField のベースラインが JLabel のベースラインとそろっていることを示す横方向のガイドラインが表示され、2 つのコンポーネントの適切な間隔を示す縦方向のガイドラインが表示されたら、クリックして JTextField を配置します。 次の図に示すように、JTextField は、フォーム内でベースラインが JLabel のベースラインとそろっている位置にスナップします。テキストフィールドのほうが高さがあるので、そのベースラインに合わせて JLabel が少し下に移動します。コンポーネントを表すノードが「インスペクタ」ウィンドウに追加されます。

ここで、次の図に示すように、追加した JLabel と JTextField の右側にさらに JLabel と JTextField を追加します。 今回は JLabel の表示テキストとして Last Name: と入力し、JTextField のプレースホルダのテキストはそのままにします。

JTextField のサイズを変更する手順は、次のとおりです。 Last Name: JLabel の右側に追加した JTextField を選択します。 JTextField の右端のサイズ変更のハンドルを JPanel の右端の方向にドラッグします。 テキストフィールドと JPanel の右端の間の適切なマージンを示す縦方向のガイドラインが表示されたら、マウスボタンを離して JTextField のサイズを変更します。 次の図に示すように、JTextField の右端が、ガイドラインが示す JPanel の端のマージンに合わせてスナップします。

上記の手順のデモを表示するには、デモを表示をクリックしてください。

フォームへの複数のコンポーネントの追加

これから追加する 2 つの JTextField の説明を示す Title: と Nickname: の 2 つの JLabel を追加します。Shift キーを押しながらコンポーネントをピック & ドロップして、すばやくフォームに追加します。このとき、コンポーネント間の適切な間隔を示す横方向と縦方向のガイドラインが表示されます。

フォームに複数の JLabel を追加する手順は、次のとおりです。 「パレット」ウィンドウの「Swing」カテゴリで JLabel コンポーネントをクリックし、マウスボタンを離すことで選択します。 First Name: JLabel の下にカーソルを移動します。新しい JLabel の左端が上の JLabel の左端とそろっていて、これらの JLabel 間に小さなマージンがあることを示すガイドラインが表示されたら、Shift キーを押しながらクリックして最初の JLabel を配置します。 Shift キーを押したまま、クリックして別の JLabel を最初の JLabel の右側に配置します。Shift キーは、2 つめの JLabel を配置する前に離します。2 つめの JLabel を配置する前に Shift キーを離さなかった場合は、Esc キーを押します。 次の図に示すように、2 行目が作成され、JLabel がフォームに追加されます。各コンポーネントを表すノードが「インスペクタ」ウィンドウに追加されます。

ここで、このあとで設定する位置揃えの結果を確認できるように、JLabel の名前を編集します。

JLabel の表示テキストを編集する手順は、次のとおりです。 最初の JLabel をダブルクリックして表示テキストを選択します。 Title: と入力して、Enter キーを押します。 手順 1 と 2 を繰り返し、2 つめの JLabel の名前プロパティーとして Nickname: と入力します。 次の図に示すように、JLabel の新しい名前がフォームに表示され、編集後の長さに合わせて JLabel の位置が調整されます。

上記の手順のデモを表示するには、 デモを表示をクリックしてください。

コンポーネントの挿入

フォーム内にすでに配置されているコンポーネントの間にコンポーネントを追加する必要がある場合があります。2 つの既存のコンポーネントの間にコンポーネントを追加すると、その新しいコンポーネントが入るように、既存のコンポーネントの位置が自動的に調整されます。この処理を確認するため、このあとの 2 つの図に示すように、追加した JLabel の間に JTextField を挿入します。

2 つの JLabel の間に JTextField を挿入する手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JTextField コンポーネントを選択します。 JTextField が 2 行目の Title: と Nickname: の各 JLabel と重なり、ベースラインがそろうようにカーソルを移動します。新しいテキストフィールドの位置決めをできない場合は、次の最初の図に示すように Nickname JLabel の左側のガイドラインにスナップしてもかまいません。 クリックして JTextField を Title: と Nickname: の各 JLabel の間に配置します。 JTextField が 2 つの JLabel の間にスナップします。ガイドラインが示す横方向のオフセットに従って、右側にある JLabel がJ TextField の右に移動します。

ここで、各連絡先の通称を表示する JTextField をフォームの右側に追加します。

JTextField を追加する手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JTextField コンポーネントを選択します。 カーソルを Nickname ラベルの右側に移動し、クリックしてテキストフィールドを配置します。 JTextField が JLabel の右側にスナップします。

JTextField のサイズを変更する手順は、次のとおりです。 前の作業で追加した Nickname: ラベルの JTextField のサイズ変更のハンドルを JPanel の右端の方向にドラッグします。 テキストフィールドと JPanel の端の間の適切なマージンを示す縦方向のガイドラインが表示されたら、マウスボタンを離して JTextField のサイズを変更します。 JTextField の右端が、ガイドラインが示す JPanel の端のマージンに合わせてスナップし、適切なサイズ変更の動作が表示されます。

上記の手順のデモを表示するには、デモを表示をクリックしてください。

ページの先頭へ

次の作業

位置揃えは、プロ級の GUI を作成するのにもっとも基本的な側面です。前の節では、JLabel コンポーネントと JTextField コンポーネントを ContactEditorUI フォームに追加するときに IDE の位置揃え機能を確認しました。この節では、アプリケーションに必要なほかのコンポーネントを操作しながら、GUI ビルダーの位置揃え機能を詳しく見ていきます。

コンポーネントの位置揃え

コンポーネントをフォームに追加すると、表示されるガイドラインが示すように、GUI ビルダーによって効果的にコンポーネントの位置揃えが行なわれます。ただし、複数のコンポーネント間で異なる関係を指定する必要がある場合もあります。前の節では、ContactEditor の GUI に必要な JLabel を 4 つ追加しましたが、位置揃えは行ないませんでした。ここでは、JLabel が縦 2 列に並ぶように JLabel の右端をそろえます。

コンポーネントの位置揃えを行うには、次の手順に従います。 フォーム左側の First Name: と Title: の各 JLabel を選択します。 ツールバーの「列内で右揃え」ボタン () をクリックします。いずれかの JLabel を右クリックし、ポップアップメニューから「位置揃え」>「列の右」を選択することもできます。 この操作を Last Name: と Nickname: の各 JLabel にも繰り返します。 各 JLabel の表示テキストの右端がそろうように、JLabel の位置が調整されます。アンカーの関係が更新され、コンポーネントがグループ化されたことを示します。

追加した JTextField の操作を終了する前に、JLabel の間に挿入した 2 つの JTextField が正しくサイズ変更されるように設定されていることを確認します。フォームの右端まで拡張した 2 つの JTextField とは異なり、挿入したコンポーネントのサイズ変更の動作は自動的に設定されません。

コンポーネントのサイズ変更の動作を設定する手順は、次のとおりです。 GUI ビルダーで、挿入した 2 つの JTextField コンポーネントを Ctrl キーを押しながらクリックし、選択します。 両方の JTextField を選択した状態で、いずれか一方を右クリックし、ポップアップメニューから「自動サイズ変更」>「水平」を選択します。 JTextField は実行時に水平方向にサイズ変更するように設定されます。ガイドラインとアンカーのインジケータが更新され、コンポーネントの関係を視覚的なフィードバックで示します。

コンポーネントを同じサイズにする手順は、次のとおりです。 フォーム内の 4 つの JTextField をすべて Ctrl キーを押しながらクリックして選択します。 JTextField を選択した状態で、いずれか 1 つを右クリックし、ポップアップメニューから「デフォルトサイズの設定」を選択します。 JTextField がすべて同じ幅に設定され、コンポーネントの関係を視覚的なフィードバックで示すインジケータが各 JTextField の上端に追加されます。

ここで、JComboBox を説明する別の JLabel を追加します。JComboBox は、ContactEditor アプリケーションに表示する情報の形式をユーザーが選択できます。

JLabel とコンポーネントグループの位置揃えを行なう手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JLabel コンポーネントを選択します。 JPanel の左側の First Name: と Title: の各 JLabel の下にカーソルを移動します。新しい JLabel の右端が、その上にあるコンポーネントグループ (2 つの JLabel) の右端とそろっていることを示すガイドラインが表示されたら、クリックしてコンポーネントを配置します。 次の図に示すように、JLabel の右端が、上にある JLabel の列の右端とそろっている位置にスナップします。コンポーネントの間隔とアンカーの関係を示す位置揃えの状態線が更新されます。

前の節と同様に、JLabel をダブルクリックして表示テキストを選択し、表示名に Display Format: と入力します。JLabel がスナップするとき、表示テキストの長さに合わせてほかのコンポーネントの位置が調整されます。

上記の手順のデモを表示するには、デモを表示をクリックしてください。

ベースラインの位置揃え

テキストを含むコンポーネント (JLabel、JTextField など) を追加または移動するときには、コンポーネント内のテキストのベースラインに基づいて適切な位置がガイドラインで表示されます。たとえば、上記で JTextField を挿入したとき、隣接する JLabel にベースラインが自動的にそろえられました。

ここで、ContactEditor アプリケーションに表示する情報の形式をユーザーが選択できるコンボボックスを追加します。JComboBox を追加するとき、そのベースラインを JLabel のテキストのベースラインにそろえます。このとき、位置決めに使用できるベースラインのガイドラインが表示されます。

コンポーネントのベースラインの位置揃えを行なう手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JComboBox コンポーネントを選択します。 追加した JLabel の右側にカーソルを移動します。JComboBox のベースラインが JLabel のテキストのベースラインとそろっていることを示す横方向のガイドラインが表示され、2 つのコンポーネントの適切な間隔を示す縦方向のガイドラインが表示されたら、クリックしてコンボボックスを配置します。 次の図に示すように、コンポーネントは、ベースラインが、左側にある JLabel のベースラインとそろっている位置にスナップします。コンポーネントの間隔とアンカーの関係を示す状態線が表示されます。

JComboBox のサイズを変更する手順は、次のとおりです。 GUI ビルダーで JComboBox を選択します。 JComboBox と JPanel の間のオフセットを示すガイドラインが表示されるまで、JComboBox の右端にあるサイズ変更のハンドルを右方向にドラッグします。 次の図に示すように、JComboBox の右端が、ガイドラインが示す JPanel の端のマージンに合わせてスナップし、コンポーネントの幅がフォームに合わせて自動的にサイズ変更されるように設定されます。

コンポーネントモデルの編集については、このチュートリアルで説明しないので、JComboBox のプレースホルダの項目リストはそのままにします。

上記の手順のデモを表示するには、デモを表示をクリックしてください。

ページの先頭へ

これまでのまとめ

ContactEditor の GUI の作成は順調に進んできました。ここで、インタフェースに必要なコンポーネントをさらに追加しながら、これまでに学んだことを復習します。

これまでは、IDE のガイドラインを使って、ContactEditor の GUI にコンポーネントを追加してきました。しかし、コンポーネントの配置には、アンカーも重要です。アンカーについてはまだ説明していませんが、意識せずにこの機能をすでに利用しています。前述のように、コンポーネントをフォームに追加すると、ターゲットの Look & Feel に適切な配置を示すガイドラインが表示されます。新しいコンポーネントを配置すると、このコンポーネントは、コンポーネント間の関係が実行時に維持されるように、もっとも近いコンテナの端またはコンポーネントにアンカーで固定されます。この節では、GUI ビルダーによってバックグラウンドで行なわれる処理を確認しながら、作業をより合理的に行なう方法について説明します。

追加、位置揃え、アンカー

GUI ビルダーを使用すると、一般的なワークフローを合理化し、短時間で簡単にフォームのレイアウトを調整できます。コンポーネントをフォームに追加すると、適切な位置にコンポーネントが自動的にスナップされ、必要な連鎖の関係が設定されるので、複雑な実装の詳細を操作せずに、フォームのデザインに専念できます。

JLabel の表示テキストの追加、位置揃え、および編集を行なう手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JLabel コンポーネントを選択します。 フォーム内の一番下の JPanel の「E-mail」タイトルの下にカーソルを移動します。JLabel が、上端と左端にマージンを残して JPanel の左上隅にあることを示すガイドラインが表示されたら、クリックして JLabel を配置します。 JLabel をダブルクリックして表示テキストを選択します。 E-mail Address: と入力して、Enter キーを押します。 JLabel が、フォーム内の適切な位置にスナップし、JPanel の上端と左端にアンカーで固定されます。コンポーネントを表すノードが「インスペクタ」ウィンドウに追加されます。

JTextField を追加する手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JTextField コンポーネントを選択します。 追加した E-mail Address ラベルの右側にカーソルを移動します。JTextField のベースラインが JLabel のテキストのベースラインとそろっていることを示すガイドラインが表示され、2 つのコンポーネントの適切なマージンを示す縦方向のガイドラインが表示されたら、クリックしてテキストフィールドを配置します。 JTextField が E-mail Address: JLabel の右側にスナップし、JLabel に関連付けられます。対応するノードが「インスペクタ」ウィンドウに追加されます。 JTextField と JPanel の間の適切なオフセットを示すガイドラインが表示されるまで、JTextField の右端にあるサイズ変更のハンドルを JPanel の右端の方向にドラッグします。 JTextField の右端が、適切なマージンを示すガイドラインにスナップします。

ここで、ContactEditor の連絡先リスト全体を表示する JList を追加します。

JList を追加してサイズを変更する手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから JList コンポーネントを選択します。 前の手順で追加した E-mail Address JLabel の下にカーソルを移動します。JList の上端と左端に、JPanel の左端と上の JLabel との間の適切なマージンとそろっていることを示すガイドラインが表示されたら、クリックして JList を配置します。 上の JTextField と幅が同じであることを示すガイドラインが表示されるまで、JList の右側にあるサイズ変更のハンドルを JPanel の右端の方向にドラッグします。 JList は、ガイドラインが示す位置にスナップし、対応するノードが「インスペクタ」ウィンドウに表示されます。また、新しく追加した JList が入るようにフォームが拡張されます。

JList は、多数のデータのリストの表示に使用するので、通常は JScrollPane を追加する必要があります。GUI ビルダーでは、JScrollPane が必要なコンポーネントを追加すると、JScrollPane が自動的に追加されます。JScrollPane は不可視コンポーネントなので、GUI ビルダーによって作成された JScrollPane を表示または編集するには、「インスペクタ」ウィンドウを使用する必要があります。

上記の手順のデモを表示するには、デモを表示をクリックしてください。

コンポーネントのサイズ設定

モーダルダイアログ内のボタンなど、複数の関連するコンポーネントを同じサイズにすると、視覚的な一貫性を保つことができます。このことを示すため、このあとの各図に示すように、連絡先リストのエントリを追加、編集、および削除できる JButton を 4 つ ContactEditor フォームに追加します。その後、4 つのボタンを同じサイズにして、これらのボタンが関連する機能を提供することがすぐにわかるようにします。

複数のボタンの表示テキストの追加、位置揃え、および編集を行なう手順は、次のとおりです。 「パレット」ウィンドウで JButton コンポーネントを選択します。 下の JPanel で JButton を E-mail Address JTextField の右端に移動します。JButton のベースラインと右端が、JTextField のベースラインと右端とそろっていることを示すガイドラインが表示されたら、Shift キーを押しながらクリックし、最初のボタンを JFrame の右端に沿って配置します。マウスボタンを離すと、JButton が入るように JTextField の幅が小さくなります。 下の JPanel 内の JList の右上隅にカーソルを移動します。JButton の上端と右端が、JList の上端と右端とそろっていることを示すガイドラインが表示されたら、Shift キーを押しながらクリックし、2 つめのボタンを JFrame の右端に沿って配置します。 追加した 2 つのボタンの下にさらに JButton を 2 つ縦に追加します。これらの JButton は、ガイドラインに従い、間隔が同じになるように配置します。最後の JButton を配置する前に Shift キーを離さなかった場合は、Esc キーを押します。 各 JButton をダブルクリックし、それぞれの名前を入力します。一番上のボタンは「Add」、2 つめのボタンは「Edit」、3 つめのボタンは「Remove」、4 つめのボタンは「As Default」にします。 JButton コンポーネントはガイドラインが示す位置にスナップします。名前の長さに合わせてボタンの幅が変わります。

ボタンを配置したら、これらのボタンが関連する機能であることを明確にするため、また視覚的な一貫性を保つために、4 つのボタンを同じサイズにします。

コンポーネントを同じサイズにするには、次の手順に従います。 Ctrl キーを押しながら JButton を選択し、4 つすべての JButton を選択します。 いずれか 1 つを右クリックし、ポップアップメニューから「同じサイズ」>「同じ幅」を選択します。 すべての JButton が、もっとも長い名前のボタンと同じサイズになります。

上記の手順のデモを表示するには、 デモを表示をクリックしてください。

インデント設定

コンポーネント下の複数のコンポーネントをまとめ、これらのコンポーネントが関連する機能のグループに属することを明確にする必要がある場合があります。たとえば、1 つのラベルの下に複数の関連するチェックボックスを配置する場合があります。GUI ビルダーでは、オペレーティングシステムの Look & Feel に適切なオフセットを示す特殊なガイドラインによって、インデントを簡単に設定できます。

この節では、ユーザーがアプリケーションでデータを表示する方法をカスタマイズできる複数の JRadioButton を JLabel の下に追加します。作業を行うときには、このあとの各図を参照してください。また、手順のあとの「デモを表示」アイコンをクリックすると、対話型デモが表示されます。

JLabel の下の JRadioButton のインデントを設定する手順は、次のとおりです。 フォームの JList の下に Mail Format という JLabel を追加します。ラベルは左端を上にある JList の左端にそろえます。 「パレット」ウィンドウで、「Swing」カテゴリから JRadioButton コンポーネントを選択します。 追加した JLabel の下にカーソルを移動します。JRadioButton の左端が JLabel の左端とそろっていることを示すガイドラインが表示されたら、インデント設定のガイドラインが表示されるまで、JRadioButton を右に移動します。Shift キーを押しながらクリックし、最初のラジオボタンを配置します。 カーソルを最初の JRadioButton の右側に移動します。Shift キーを押しながらクリックし、2 つめと 3 つめの JRadioButton を配置します。このとき、コンポーネントの間隔はガイドラインに従います。Shift キーは、最後の JRadioButton を配置する前に離します。 各 JRadioButton をダブルクリックし、それぞれの名前を入力します。左端のラジオボタンは「HTML」、2 つめのラジオボタンは「Plain Text」、3 つめのラジオボタンは「Custom」にします。 3 つの JRadioButton がフォームに追加され、Mail Format JLabel の下でインデントが設定されます。

ここで、3 つの JRadioButton を ButtonGroup に追加し、一度に 1 つのラジオボタンだけを選択できる切り替えの動作を有効にします。これにより、NameFinder アプリケーションの連絡先情報が、順番に選択したメール形式で表示されます。

JRadioButton を ButtonGroup に追加する手順は、次のとおりです。 「パレット」ウィンドウで、「Swing」カテゴリから ButtonGroup コンポーネントを選択します。 GUI ビルダーのデザイン領域内の任意の場所をクリックし、ButtonGroup コンポーネントをフォームに追加します。ButtonGroup はフォーム自体には表示されませんが、「インスペクタ」ウィンドウの「他のコンポーネント」領域には表示されます。 フォーム内の 3 つの JRadioButton をすべて選択します。 「プロパティー」ウィンドウで、buttonGroup プロパティーのコンボボックスから buttonGroup1 を選択します。 3 つの JRadioButton がボタングループに追加されます。

上記の手順のデモを表示するには、デモを表示をクリックしてください。

ページの先頭へ

最後の調整

ContactEditor アプリケーションの大まかな GUI が完成しましたが、まだ必要な作業が残っています。 この節では、GUI ビルダーによって合理化されるほかの一般的なレイアウト作業を確認します。

仕上げ

ユーザーが、入力した連絡先情報を確定して連絡先リストに追加するか、入力を取り消してデータベースの変更を中止できるボタンを追加します。この手順では、2 つの必要なボタンを追加したあと、表示テキストの長さが違ってもボタンのサイズが同じになるように編集します。

ボタンの表示テキストを追加および編集する手順は、次のとおりです。 下の JPanel が、JFrame フォームの下端まで拡張されている場合は、JFrame の下端を下にドラッグします。これで、JFrame の端と JPanel の端の間に「OK」ボタンと「Cancel」ボタン用のスペースができます。 「パレット」ウィンドウで、「Swing」カテゴリから JButton コンポーネントを選択します。 フォーム内の E-mail JPanel の下にカーソルを移動します。JButton の右端が JFrame の右下隅とそろっていることを示すガイドラインが表示されたら、クリックしてボタンを配置します。 別の JButton を最初の JButton の左側に追加します。このとき、JFrame の下端に沿ってガイドラインが示す間隔で配置します。 各 JButton をダブルクリックして表示テキストを選択します。左側のボタンには「OK」、右側のボタンには「Cancel」と入力します。名前の長さに合わせてボタンの幅が変わります。 両方の JButton を選択し、いずれか一方を右クリックし、ポップアップメニューから「同じサイズ」>「同じ幅」を選択することで 2 つのボタンを同じサイズにします。 フォームに JButton コンポーネントが表示され、対応するノードが「インスペクタ」ウィンドウに表示されます。JButton コンポーネントのコードがフォームのソースファイルに追加されます。このコードは、エディタのソースビューで確認できます。各 JButton が、もっとも長い名前のボタンと同じサイズになります。

最後に、各コンポーネントのプレースホルダのテキストを削除します。フォームの大まかなレイアウトが完成したあとにプレースホルダのテキストを削除すると、コンポーネントの位置揃えやアンカーの関係の問題を避けることができますが、ほとんどの開発者はコンポーネントを配置しながらこのテキストを削除します。フォーム内で各 JTextField のプレースホルダのテキストを選択し、削除します。JComboBox と JList のプレースホルダの項目は、別のチュートリアルで使うので残しておきます。

上記の手順のデモを表示するには、 デモを表示をクリックしてください。

ページの先頭へ

GUI のプレビュー

ContactEditor の GUI を構築できたので、インタフェースを試してその結果を確認することができます。GUI ビルダーのツールバーの「プレビュー」ボタン () をクリックすることで、作業中のフォームをプレビューできます。専用のウィンドウにフォームが開き、構築、実行する前にフォームをテストできます。

ページの先頭へ

GUI アプリケーションの配備

GUI ビルダーを使って作成したインタフェースが IDE なしでも機能するためには、アプリケーションを配備するときに、レイアウト関連のさまざまな拡張機能を含む外部ライブラリを含める必要があります。また、NetBeans の GUI ビルダーでは、Swing レイアウト拡張ライブラリが使用されているので、このライブラリが実行時にアプリケーションのクラスパスにある必要があります。

Swing レイアウト拡張ライブラリの JAR ファイルは、システム上の次の場所にあります。

<NetBeans インストールフォルダ>/platform6/modules/ext/swing-layout-<インストールされているバージョン>.jar

スタンドアロンの GUI アプリケーションの配布と実行

GUI アプリケーションの実行時に Swing レイアウト拡張ライブラリが自動的に使用されるように、プロジェクトを構築すると、JAR (およびプロジェクトのクラスパスにあるその他の JAR ファイル) が自動的に dist/lib フォルダにコピーされます。また、アプリケーションの JAR ファイルの manifest.mf ファイルで Class-Path 要素に各 JAR ファイルが追加されます。

GUI アプリケーションを IDE 外に配布する準備を行うには、次の手順に従います。

1. プロジェクトの dist フォルダ (lib フォルダを含む) を ZIP アーカイブに圧縮します。

スタンドアロンの GUI アプリケーションをコマンド行から実行するには、次の手順に従います。

1. プロジェクトの dist フォルダまで移動します。
2. 次のように入力します。

   java -jar <jar_name>.jar

レイアウト拡張ライブラリについては、Swing レイアウト拡張プロジェクトを参照してください。

ページの先頭へ

次の手順

これで、IDE の GUI 構築に関するチュートリアルを完了しました。 NetBeans IDE での Java GUI の操作についての詳細は、次のドキュメントを参照してください。

• ボタンへの機能の追加: 初心者向けガイド。 GUI で使用するボタンやフィールドに機能を追加する方法を示すチュートリアルです。
• Derby チュートリアル。 NetBeans IDE を使用した GUI の Derby データベースへの接続。
• NetBeans IDE を使用した GUI の Derby データベースへの接続。 アプリケーション GUI を Derby データベースに接続する手順を示したガイドです。
• Matisse GUI ビルダーの FAQ。NetBeans GUI ビルダーを使用するヒントや要領を示します。
• NetBeans のサポートおよびマニュアル。NetBeans IDE ユーザー向けの記事や FAQ 集、メーリングリストの全一覧です。

ページの先頭へ