| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <!-- |
| Copyright (c) 2009, 2014, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <html> |
| <head> |
| <title>NetBeans IDEでのSwing GUIのデザイン - チュートリアル</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css" media="screen"> |
| <meta content="?and? 0.5.5" name="GENERATOR"> |
| <meta name="KEYWORDS" content="NETBEANS, TUTORIAL, GUIDE, USER, DOCUMENTATION"> |
| <meta name="description" content="This tutorial guides you through the process of creating the graphical user interface (GUI) for an application using the NetBeans IDE GUI Builder." > |
| |
| </head> |
| <body> |
| |
| <!-- Begin Content Area --> |
| <a name="top"></a> |
| <h1>NetBeans IDEでのSwing GUIのデザイン</h1> |
| |
| <img alt="このページの内容は、NetBeans IDE 6.9以降に適用されます" class="stamp" src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" title="このページの内容は、NetBeans IDE 6.9以降に適用されます"> |
| <p>このチュートリアルでは、NetBeans IDEのGUIビルダーを使用して、ContactEditorというアプリケーションのグラフィカル・ユーザー・インタフェース(GUI)を作成する手順を示します。このとき、社員のデータベースに含まれる個人の連絡先情報を表示、編集できるGUIフロント・エンドのレイアウトを決定します。 </p> |
| |
| <p>このチュートリアルでは、GUIビルダーのインタフェースの使用、GUIコンテナの作成、コンポーネントの追加、サイズ変更、および位置揃え、コンポーネントのアンカー設定の調整、コンポーネント自動サイズ変更の動作の設定、コンポーネント・プロパティの編集を行う方法について学習します。</p> |
| |
| <p> このチュートリアルを完了するのに要する時間は約30分です。 </p> |
| |
| <h3>内容</h3> |
| |
| |
| <ul class="toc"> |
| <li><a href="#getting_started">開始</a> |
| <ul> |
| <li><a href="#project">プロジェクトの作成</a></li> |
| <li><a href="#container">JFrameコンテナの作成</a></li> |
| </ul></li> |
| <li><a href="#getting_familiar">GUIビルダーの操作</a></li> |
| <li><a href="#key_concepts">主な概念</a> |
| <ul> |
| <li><a href="#design">フリー・デザイン</a></li> |
| <li><a href="#snapping">コンポーネントの自動配置(スナップ)</a></li> |
| <li><a href="#feedback">視覚的なフィード・バック</a></li> |
| </ul></li> |
| <li><a href="#first_things">作業の開始</a> |
| <ul> |
| <li><a href="#adding_components">コンポーネントの追加: 基本</a></li> |
| <li><a href="#individual">フォームへの個々のコンポーネントの追加</a></li> |
| <li><a href="#multiple">フォームへの複数のコンポーネントの追加</a></li> |
| <li><a href="#inserting">コンポーネントの挿入</a></li> |
| </ul></li> |
| |
| <li><a href="#moving_forward">次の作業</a> |
| <ul> |
| <li><a href="#aligning_components">コンポーネントの位置揃え</a></li> |
| <li><a href="#baseline_alignment">ベースラインの位置揃え</a></li> |
| </ul></li> |
| <li><a href="#reviewing">学習した内容の復習</a> |
| <ul> |
| <li><a href="#adding_aligning_anchoring">追加、位置揃え、アンカー</a></li> |
| <li><a href="#component_sizing">コンポーネントのサイズ設定</a></li> |
| <li><a href="#indentation">インデント設定</a></li> |
| </ul></li> |
| <li><a href="#adjusting_form">最後の調整</a></li> |
| |
| <li><a href="#previewing_form">GUIのプレビュー</a></li> |
| <li><a href="#deploying">GUIアプリケーションのデプロイ</a></li> |
| <li><a href="#seealso">関連項目</a></li> |
| </ul> |
| |
| <p><b>このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">ソフトウェアまたはリソース</th> |
| <th class="tblheader" scope="col">必須バージョン</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://netbeans.org/downloads/index.html" target="_blank">NetBeans IDE</a></td> |
| <td class="tbltd1">バージョン6.9以降 </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">バージョン6、7または8</td> |
| </tr> |
| |
| </tbody> |
| </table> |
| <a name="getting_started"></a> |
| <h2>開始</h2> |
| <p>IDEのGUIビルダーを使用すると、レイアウト・マネージャを熟知していなくても高度なGUIをビルドできます。コンポーネントを任意の場所に置くのみでフォームのレイアウトを決定できます。 </p> |
| <p>GUIビルダーの視覚的なフィード・バックの詳細は、<a href="quickstart-gui-legend.html" target="_blank">GUIビルダーの視覚的なフィード・バックの説明</a>を参照してください。</p> |
| <blockquote> |
| <a name="project"></a> |
| <h3 class="tutorial">プロジェクトの作成 </h3> |
| <p>IDEでは、プロジェクト内でJava開発をすべて行うので、ソースやその他のプロジェクト・ファイルを保存する<tt>ContactEditor</tt>プロジェクトを新規に作成する必要があります。IDEプロジェクトは、Javaソース・ファイルとそれに関連するメタデータのグループで、プロジェクト固有のプロパティ・ファイル、そのビルドと実行を制御するAntビルド・スクリプト、AntターゲットをIDEコマンドにマッピングする<tt>project.xml</tt>ファイルが含まれます。Javaアプリケーションは複数のIDEプロジェクトで構成されることがよくありますが、このチュートリアルでは、完全に1つのプロジェクトに収まる単純なアプリケーションを作成します。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>新しい<tt>ContactEditor</tt>アプリケーションのプロジェクトを作成するには: </p> |
| <ol> |
| <li>「ファイル」>「新規プロジェクト」を選択します。または、IDEツールバーにある「新規プロジェクト」アイコンをクリックして選択することもできます。 </li> |
| <li>「カテゴリ」ペインで「Java」ノードを選択し、「プロジェクト」ペインで「Javaアプリケーション」を選択します。「次」をクリックします。</li> |
| <li> 「プロジェクト名」フィールドに「<tt>ContactEditor</tt>」と入力し、プロジェクトの場所を指定します。</li> |
| <li>「ライブラリの格納用に専用フォルダを使用」チェックボックスは選択されていない状態のままにします。 </li> |
| <li>「メイン・プロジェクトとして設定」チェックボックスが選択されていることを確認し、また「メイン・クラスの作成」フィールドをクリアします。 </li> |
| <li>「終了」をクリックします。 |
| <p> |
| システム上の指定した場所に<tt>ContactEditor</tt>フォルダが作成されます。このフォルダには、プロジェクトのAntスクリプト、ソースとテストを保持するフォルダ、プロジェクト専用のメタデータ用のフォルダなど、プロジェクトに関連するすべてのファイルとフォルダが含まれます。プロジェクト構造を表示するには、IDEの「ファイル」ウィンドウを使用します。 </p> |
| </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <a name="container"></a> |
| <h3 class="tutorial">JFrameコンテナの作成</h3> |
| <p>新しいアプリケーションを作成すると、「プロジェクト」ウィンドウの「ソース・パッケージ」フォルダに空の「<tt><デフォルト・パッケージ></tt>」ノードが追加されます。インタフェースのビルドに進むには、他の必要なGUIコンポーネントを入れるJavaコンテナを作成する必要があります。この手順では、<tt>JFrame</tt>コンポーネントを使用してコンテナを作成し、新しいパッケージにそのコンテナを配置します。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p><tt>JFrame</tt>コンテナを追加するには: </p> |
| <ol> |
| <li>「プロジェクト」ウィンドウで「<tt>ContactEditor</tt>」ノードを右クリックし、「新規」>「JFrameフォーム」を選択します。<br>または、「新規」>「その他」>「Swing GUIフォーム」>「JFrameフォーム」を選択してJFrameフォームを検索します。 </li> |
| <li>クラス名として「<tt>ContactEditorUI</tt>」と入力します。 </li> |
| <li>パッケージとして「<tt>my.contacteditor</tt>」と入力します。</li> |
| <li>「終了」をクリックします。 |
| <p> IDEによって、<tt>ContactEditorUI.java</tt>アプリケーション内に<tt>ContactEditorUI</tt>フォームと<tt>ContactEditorUI</tt>クラスが作成され、<tt>ContactEditorUI</tt>フォームがGUIビルダー内で開きます。デフォルトのパッケージが<tt>my.contacteditor</tt>パッケージに置き換わります。 |
| </p> |
| </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| </blockquote> |
| <p class="align-center"><a href="#top">先頭</a></p> |
| <a name="getting_familiar"></a> |
| <h2>GUIビルダーの操作</h2> |
| <p>アプリケーション用の新しいプロジェクトを作成できたので、GUIビルダーのインタフェースの操作を練習してみます。 </p> |
| <p class="notes"><b>注意:</b> 対話型デモを使用してGUIビルダーのインタフェースを調べるには、<a href="http://bits.netbeans.org/media/quickstart-gui-explore.swf" name="explore">GUIビルダーの調査(.swf)</a>スクリーンキャストを表示してください。</p> |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/01_gb_ui.png" rel="lytebox" title="IDEのGUIビルダーのインタフェース"> <img alt="IDEのGUIビルダーのインタフェース" border="1" src="../../../images_www/articles/80/java/quickstart-gui/01_gb_ui-small.png"></a></p> |
| |
| <p>前の図に示すように、JFrameコンテナを追加すると、IDEによって、新しく作成された<tt>ContactEditorUI</tt>フォームが、いくつかのボタンが含まれたツールバーとともにエディタのタブに開かれます。ContactEditorフォームはGUIビルダーのデザイン・ビューで開き、ビルドするGUIフォームを移動、編成、および編集できる3つのウィンドウがIDEの両端に自動的に表示されます。 |
| </p> |
| <p>GUIビルダーには、次のウィンドウがあります。 </p> |
| <ul> |
| <li><b>デザイン領域。</b>JavaのGUIフォームを作成および編集するGUIビルダーのプライマリ・ウィンドウ。ツールバーの「ソース」ボタンではクラスのソース・コードを表示することができ、「デザイン」ボタンではGUIコンポーネントのグラフィカル・ビューを表示することができ、「履歴」ボタンではファイルの変更のローカル履歴にアクセスできます。ツールバーのその他のボタンを使用すると、選択モードと接続モードの切替え、コンポーネントの位置揃え、コンポーネントの自動サイズ変更の動作の設定、フォームのプレビューなどの一般的な操作を実行できます。 </li> |
| <li><b>ナビゲータ。</b>アプリケーション内の可視および不可視のすべてのコンポーネントをツリー階層形式で表示します。また、「ナビゲータ」は、提供されるパネルでコンポーネントを整理できるのみでなく、現在GUIビルダーで編集中のツリー・コンポーネントに関する視覚的なフィード・バックも提供します。 </li> |
| <li><b>パレット。</b>使用可能なコンポーネントのカスタマイズ可能な一覧で、レイアウト・マネージャに加えて、JFC/Swing、AWT、およびJavaBeansコンポーネントのタブがあります。また、パレットに表示されるカテゴリは、カスタマイザを使用して作成、除去、および再配置できます。 </li> |
| <li><b>プロパティ・ウィンドウ。</b>GUIビルダー、「ナビゲータ」ウィンドウ、「プロジェクト」ウィンドウ、または「ファイル」ウィンドウで現在選択されているコンポーネントのプロパティを表示します。 </li> |
| </ul> |
| <p>「ソース」ボタンをクリックすると、IDEによってアプリケーションのJavaソース・コードがエディタに表示され、保護されたブロックと呼ばれるグレーの領域(選択されると青色になります)で示されたGUIビルダーによって自動的に生成されたコードのセクションも表示されます。保護されたブロックは、ソース・ビューで編集できない部分です。ソース・ビューでコードを編集できるのはエディタの白い部分のみです。保護されたブロック内のコードを変更する必要がある場合は、「デザイン」ボタンをクリックしてGUIビルダーに戻り、フォームを調整します。変更内容を保存すると、ファイルのソースが更新されます。</p> |
| <p><b>注意:</b> 上級開発者は、パレット・マネージャを使用してカスタム・コンポーネントをJAR、ライブラリ、または他のプロジェクトからパレットに追加できます。パレット・マネージャを使用してカスタム・コンポーネントを追加するには、「ツール」>「パレット」>「Swing/AWTコンポーネント」を選択します。 </p> |
| <p class="align-center"><a href="#top">先頭</a></p> |
| |
| <a name="key_concepts"></a> |
| <h2>主な概念</h2> |
| <p>IDEのGUIビルダーによって、グラフィカル・インタフェースの作成作業の流れが合理化され、開発者は複雑なSwingレイアウト・マネージャを使用する必要がないので、JavaのGUI作成の主な問題点が解決します。現在のNetBeans IDEのGUIビルダーは、理解しやすく簡単に利用できる単純レイアウト・ルールによって、「フリー・デザイン」方式をサポートするように拡張されました。GUIビルダーでフォームのレイアウトを調整するときは、コンポーネントの最適な間隔や位置揃えを示す視覚的なガイドラインが表示されます。バックグラウンドでは、GUIビルダーによってデザインが機能するUIに変換され、このUIは、新しいGroupLayoutレイアウト・マネージャやその他のSwingの構造を使用して実装されます。動的なレイアウト・モデルが使用されているため、GUIビルダーを使用してビルドしたGUIは、実行時に期待どおりに動作し、変更を加えた場合は、コンポーネント間で定義された関係を変更せずに調整されます。フォームのサイズを変更するか、ロケールを変更するか、異なるルック・アンド・フィールを指定すると、ターゲットのルック・アンド・フィールのインセットとオフセットにあわせてGUIが自動的に調整されます。</p> |
| <blockquote> |
| <a name="design"></a> |
| <h3 class="tutorial">フリー・デザイン</h3> |
| <p>IDEのGUIビルダーでは、絶対位置決め方式を使用しているかのようにコンポーネントを任意の位置に置くことでフォームをビルドできます。GUIビルダーによって必要なレイアウト属性が判別され、自動的にコードが生成されます。インセット、アンカー、塗りつぶしなどを意識する必要はありません。 </p> |
| <a name="snapping"></a> |
| <h3 class="tutorial">コンポーネントの自動配置(スナップ)</h3> |
| |
| <p>GUIビルダーでフォームにコンポーネントを追加すると、オペレーティング・システムのルック・アンド・フィールに基づいて、コンポーネントの位置決めを助ける視覚的なフィード・バックが表示されます。GUIビルダーでは、フォーム上でのコンポーネントの配置に関して役立つインラインのヒントやその他の視覚的なフィード・バックが表示され、またコンポーネントはガイドラインに自動的に配置(スナップ)されます。これらの提案は、フォームにすでに配置されているコンポーネントの位置に基づいて表示されますが、実行時に別のターゲットのルック・アンド・フィールが正しくレンダリングされるように、パディングは柔軟になっています。</p> |
| <a name="feedback"></a> |
| <h3 class="tutorial">視覚的なフィード・バック </h3> |
| <p>また、GUIビルダーは、コンポーネント間のアンカー関係と相互の繋がりを視覚的に表現します。これらのフィード・バックによって、実行時のGUIの表示と動作に影響する様々な配置の関係やコンポーネントの固定の動作を簡単に把握できます。その結果、GUIのデザイン・プロセスに要する期間を短縮でき、正常に機能する高度なビジュアル・インタフェースを短時間で作成できます。</p> |
| </blockquote> |
| <p class="align-center"><a href="#top">先頭</a></p> |
| <a name="first_things"></a> |
| <h2>作業の開始</h2> |
| <p>GUIビルダーのインタフェースについて理解できたので、ContactEditorアプリケーションのUIの開発を始めます。この項では、IDEのパレットを使用して必要なGUIコンポーネントをフォームに追加します。 </p> |
| <p>IDEではフリー・デザイン方式が採用されているので、レイアウト・マネージャを使用してコンテナ内のコンポーネントのサイズや位置を制御する必要がありません。この後の各図に示すように、必要なコンポーネントをGUIフォームにドラッグ・アンド・ドロップするのみです。 </p> |
| <blockquote> |
| <p class="notes"><b>注意:</b> 下の項に関する対話型デモについては、<a href="http://bits.netbeans.org/media/quickstart-gui-add.swf" name="add">個々のコンポーネントおよび複数のコンポーネントの追加(.swf)</a>スクリーンキャストを参照してください。</p> |
| <a name="adding_components"></a> |
| <h3 class="tutorial">コンポーネントの追加: 基本 </h3> |
| <p>IDEのGUIビルダーによって、JavaのGUIを作成するプロセスが簡素化されますが、配置を始める前にインタフェースのレイアウトをスケッチすると役立ちます。多くのインタフェース・デザイナは、この方法を推奨しています。このチュートリアルでは、<a href="#previewing_form">GUIのプレビュー</a>の項で完成したフォームを確認できます。 </p> |
| <p>フォームの最上位のコンテナとしてJFrameをすでに追加したので、次のステップではJPanelをいくつか追加し、JPanelのタイトル付き境界線を使用してUIのコンポーネントをまとめることができます。この後の各図を参照するとともに、これを行うときのIDEの「ドラッグ・アンド・ドロップ」動作に注目してください。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JPanelを追加するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、マウス・ボタンをクリックして離すことによって、「Swingコンテナ」カテゴリから「パネル」コンポーネントを選択します。</li> |
| <li>カーソルをGUIビルダー内のフォームの左上隅に移動します。コンポーネントをコンテナの左上隅に近づけると、適切なマージンを示す横方向と縦方向のガイドラインが表示されます。フォーム内をクリックしてこの位置にJPanelを配置します。 |
| <p><tt>JPanel</tt>コンポーネントが、選択されたことを示すオレンジ色の強調表示で<tt>ContactEditorUI</tt>フォームに表示されます。マウス・ボタンを離すと、次の図に示すように、コンポーネントのアンカーの関係を示す小さなインジケータが表示され、対応する「JPanel」ノードが「ナビゲータ」ウィンドウに表示されます。</p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_1.png" rel="lytebox" title="選択されたJPanel"> <img alt="選択されたJPanel" border="1" src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_1-small.png"></a></p> |
| <p>次に、この後で別のコンポーネントを配置する領域を設定するためにJPanelのサイズを変更しますが、その前にGUIビルダーの別の表示機能について説明します。そのためには、追加したJPanelの選択を解除する必要があります。タイトル付き境界線をまだ追加していないので、パネルは表示されなくなります。ただし、JPanelの上にカーソルを置くと、パネルの位置がわかるように輪郭がグレーに変わります。コンポーネント内の任意の場所をクリックするとコンポーネントが再度選択され、サイズ変更のハンドルや、アンカーのインジケータが再度表示されます。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JPanelのサイズを変更するには:</p> |
| <ol> |
| <li>追加したJPanelを選択します。コンポーネントの周囲にサイズ変更のハンドル(小さい四角形)が表示されます。</li> |
| <li>JPanelの右端のサイズ変更のハンドルをクリックし、マウス・ボタンを押したまま、フォームの端の近くに点線のガイドラインが表示されるまでドラッグします。</li> |
| <li>マウス・ボタンを離してコンポーネントのサイズを変更します。 |
| <p> 次の図に示すように、適切なオフセットに従って、<tt>JPanel</tt>コンポーネントがコンテナの左右のマージンまで広がります。</p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_2.png" rel="lytebox" title="サイズ変更されたJPanel"> <img alt="サイズ変更されたJPanel" border="1" src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_2-small.png"></a></p> |
| <p>UIの名前情報を格納するパネルを追加できたので、このプロセスを繰り返して、このパネルの下に電子メール情報用の別のパネルを追加する必要があります。この後の各図を参考にし、GUIビルダーの提案された配置に注意して、前の2つの作業を繰り返します。2つのJPanel間でガイドラインが示す間隔は、左右の端のマージンよりも狭くなっています。2つ目のJPanelを追加したら、フォームの縦方向の残りのスペースが埋まるようにサイズを変更します。</p> |
| <table class="align-center"> |
| <tr> |
| <td> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_3.png" rel="lytebox" title="追加された別のJPanel"> <img alt="追加された別のJPanel" border="1" src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_3-small.png"></a></p></td> |
| <td><p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_4.png" rel="lytebox" title="選択された別のJPanel"> <img alt="選択された別のJPanel" border="1" src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_4-small.png"></a></p></td></tr> |
| |
| <tr><td><p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_5.png" rel="lytebox" title="サイズ変更された別のJPanel"> <img alt="サイズ変更された別のJPanel" border="1" src="../../../images_www/articles/80/java/quickstart-gui/02_add_panels_5-small.png"></a></p></td> |
| </tr> |
| </table> |
| |
| <p>GUIの上下2つのセクションの機能を視覚的に区別するために、各JPanelに境界線とタイトルを追加します。まず、「プロパティ」ウィンドウでこの作業を実行し、次にポップアップ・メニューを使用して実行します。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JPanelにタイトル付き境界線を追加するには: </p> |
| <ol> |
| <li>GUIビルダーで上のJPanelを選択します。 </li> |
| <li>「プロパティ」ウィンドウで、「border」プロパティの横にある省略符号ボタン(...)をクリックします。 </li> |
| <li>表示されるJPanelの境界線エディタで、「使用可能な境界線」ペインで「TitledBorder」ノードを選択します。 </li> |
| <li>下の「プロパティ」ペインで、「タイトル」プロパティに「<tt>Name</tt>」と入力します。 </li> |
| <li>「フォント」プロパティの横にある省略符号(...)をクリックし、「フォント・スタイル」に「太字」を選択し、「サイズ」に「12」と入力します。「OK」をクリックしてダイアログを閉じます。</li> |
| <li>下のJPanelを選択してステップ2から5を繰り返しますが、今回はJPanelを右クリックし、ポップアップ・メニューを使用して「プロパティ」ウィンドウを開きます。「タイトル」プロパティに「<tt>E-mail</tt>」と入力します。 |
| <p>両方の<tt>JPanel</tt>コンポーネントにタイトル付き境界線が追加されます。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/02_add_borders.png" rel="lytebox" title="追加されたタイトル付き境界線"> <img alt="追加されたタイトル付き境界線" border="1" src="../../../images_www/articles/80/java/quickstart-gui/02_add_borders-small.png"></a></p> |
| |
| <a name="individual"></a> |
| <h3 class="tutorial">フォームへの個々のコンポーネントの追加</h3> |
| <p>連絡先リストで実際の連絡先情報を表示するコンポーネントを追加します。この作業では、連絡先情報を表示するJTextFieldと、これらのフィールドの説明を表示するJLabelをそれぞれ4つ追加します。このとき、オペレーティング・システムのルック・アンド・フィールの定義に従って、適切なコンポーネントの間隔を示す横方向と縦方向のガイドラインがGUIビルダーで表示されます。このガイドラインに従うと、ターゲットのオペレーティング・システムのルック・アンド・フィールにあわせてGUIが実行時に自動的にレンダリングされます。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>フォームにJLabelを追加するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「ラベル」コンポーネントを選択します。 </li> |
| <li>先に追加した<tt>Name</tt> JPanelの上にカーソルを置きます。JLabelが、上端と左端にマージンを残してJPanelの左上隅にあることを示すガイドラインが表示されたら、クリックしてラベルを配置します。 |
| <p>JLabelがフォームに追加され、コンポーネントを表すノードが「インスペクタ」ウィンドウに追加されます。</p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <p>ここで、追加したJLabelの表示テキストを編集します。コンポーネントの表示テキストはいつでも編集できますが、コンポーネントの追加時に編集するのが最も簡単な方法です。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JLabelの表示テキストを編集するには: </p> |
| <ol> |
| <li>JLabelをダブルクリックして表示テキストを選択します。</li> |
| <li>「<tt>First Name:</tt>」と入力して、[Enter]を押します。 |
| <p>JLabelの新しい名前が表示され、コンポーネントの幅がテキストの長さにあわせて調整されます。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p>ここで、JTextFieldを追加して、GUIビルダーのベースライン位置揃え機能を確認します。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>フォームにJTextFieldを追加するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「テキスト・フィールド」コンポーネントを選択します。 </li> |
| <li><tt>First Name: </tt> JLabelの右側にカーソルを移動します。JTextFieldのベースラインがJLabelのベースラインとそろっていることを示す横方向のガイドラインが表示され、2つのコンポーネントの適切な間隔を示す縦方向のガイドラインが表示されたら、クリックしてJTextFieldを配置します。 |
| <p>次の図に示すように、JTextFieldは、フォーム内でベースラインがJLabelのベースラインとそろっている位置にスナップします。テキスト・フィールドのほうが高さがあるので、そのベースラインにあわせてJLabelが少し下に移動します。通常どおり、そのコンポーネントを表すノードが「ナビゲータ」ウィンドウに追加されます。 </p> |
| </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p class="align-center"> |
| <img alt="追加されたJTextField" border="1" src="../../../images_www/articles/80/java/quickstart-gui/03_indy_add_1.png"></p> |
| <p>ここで、次の図に示すように、追加したJLabelとJTextFieldの右側にさらにJLabelとJTextFieldを追加します。今回はJLabelの表示テキストとして「<tt>Last Name:</tt>」と入力し、JTextFieldのプレースホルダのテキストはそのままにします。</p> |
| |
| <p class="align-center"> |
| <img alt="追加された別のJTextField" border="1" src="../../../images_www/articles/80/java/quickstart-gui/03_indy_add_2.png"></p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JTextFieldのサイズを変更するには:</p> |
| <ol> |
| <li><tt>Last Name: </tt> JLabelの右側に追加したJTextFieldを選択します。 </li> |
| <li>JTextFieldの右端のサイズ変更のハンドルをJPanelの右端の方向にドラッグします。 </li> |
| <li>テキスト・フィールドとJPanelの右端の間の適切なマージンを示す縦方向のガイドラインが表示されたら、マウス・ボタンを離してJTextFieldのサイズを変更します。 |
| <p>次の図に示すように、JTextFieldの右端が、ガイドラインが示すJPanelの端のマージンにあわせてスナップします。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p class="align-center"> |
| <img alt="サイズ変更されたJTextField" border="1" src="../../../images_www/articles/80/java/quickstart-gui/03_indy_add_3.png"></p> |
| |
| |
| <a name="multiple"></a> |
| <h3 class="tutorial">フォームへの複数のコンポーネントの追加</h3> |
| <p>これから追加する2つのJTextFieldの説明を示す<tt>Title:</tt>と<tt>Nickname:</tt>の2つのJLabelを追加します。[Shift]キーを押しながらコンポーネントをドラッグ・アンド・ドロップして、すばやくフォームに追加します。このとき、GUIビルダーで、コンポーネント間の適切な間隔を示す横方向と縦方向のガイドラインが表示されます。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>フォームに複数のJLabelを追加するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、マウス・ボタンをクリックして離すことによって、「Swingコントロール」カテゴリから「ラベル」コンポーネントを選択します。 </li> |
| <li><tt>First Name: </tt> JLabelの下にカーソルを移動します。新しいJLabelの左端が上のJLabelの左端とそろっていて、これらのJLabel間に小さなマージンがあることを示すガイドラインが表示されたら、[Shift]を押しながらクリックして最初のJLabelを配置します。 </li> |
| <li>[Shift]キーを押したまま、別のJLabelをすぐに最初のJLabelの右側に配置します。[Shift]キーは、2つ目のJLabelを配置する前に離します。2つ目のJLabelを配置する前に[Shift]キーを離さなかった場合は、[Esc]キーを押します。 |
| <p>次の図に示すように、2行目が作成され、JLabelがフォームに追加されます。各コンポーネントを表すノードが「ナビゲータ」ウィンドウに追加されます。 </p> |
| </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p class="align-center"> |
| <img alt="2行目のJLabel" border="1" src="../../../images_www/articles/80/java/quickstart-gui/04_multi-add_1.png"></p> |
| <p>ここで、この後で設定する位置揃えの結果を確認できるように、JLabelの名前を編集します。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JLabelの表示テキストを編集するには:</p> |
| <ol> |
| <li>最初のJLabelをダブルクリックして表示テキストを選択します。</li> |
| <li>「<tt>Title:</tt>」と入力して、[Enter]を押します。</li> |
| <li>ステップ1と2を繰り返し、2つ目のJLabelの名前プロパティとして「<tt>Nickname:</tt>」と入力します。 |
| <p>次の図に示すように、JLabelの新しい名前がフォームに表示され、編集後の長さにあわせてJLabelの位置が調整されます。 |
| </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p class="align-center"> |
| <img alt="2行目のJLabelの新しい名前" border="1" src="../../../images_www/articles/80/java/quickstart-gui/04_multi-add_2.png"></p> |
| |
| |
| <a name="inserting"></a> |
| <h3 class="tutorial">コンポーネントの挿入</h3> |
| <p class="notes"><b>注意:</b> 下の項に関する対話型デモについては、<a href="http://bits.netbeans.org/media/quickstart-gui-insert.swf" name="insert">コンポーネントの挿入(.swf)</a>スクリーンキャストを参照してください。</p> |
| <p>フォーム内にすでに配置されているコンポーネントの間にコンポーネントを追加する必要がある場合があります。2つの既存のコンポーネントの間にコンポーネントを追加すると、GUIビルダーではその新しいコンポーネント用の領域を確保するために、既存のコンポーネントが自動的に移動します。この処理を確認するため、この後の2つの図に示すように、追加したJLabelの間にJTextFieldを挿入します。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>2つのJLabelの間にJTextFieldを挿入するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「テキスト・フィールド」コンポーネントを選択します。 </li> |
| <li>JTextFieldが2行目の<tt>Title:</tt>と<tt>Nickname:</tt>の各JLabelと重なり、ベースラインがそろうようにカーソルを移動します。新しいテキスト・フィールドの位置決めをできない場合は、次の最初のイメージに示すように<tt>Nickname</tt> JLabelの左側のガイドラインにスナップしてもかまいません。</li> |
| <li>クリックしてJTextFieldを<tt>Title:</tt>と<tt>Nickname:</tt>の各JLabelの間に配置します。 |
| <p>JTextFieldが2つのJLabelの間にスナップします。ガイドラインが示す横方向のオフセットに従って、右側にあるJLabelがJTextFieldの右に移動します。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <table class="align-center"> |
| <tr> |
| <td> <p class="align-center"> |
| <img alt="Nickname: JLabelと重なったJTextField" border="1" src="../../../images_www/articles/80/java/quickstart-gui/05_insert_1.png"></p></td> |
| <td><p class="align-center"><img alt="Tiltle: JLabelとNickname: JLabelの間に配置されたJTextField" border="1" src="../../../images_www/articles/80/java/quickstart-gui/05_insert_2.png"></p> |
| </td> |
| </tr> |
| </table> |
| <p>ここで、各連絡先の通称を表示するJTextFieldをフォームの右側に追加します。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JTextFieldを追加するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swing」カテゴリから「テキスト・フィールド」コンポーネントを選択します。 </li> |
| <li>カーソルを<tt>Nickname</tt>ラベルの右側に移動し、クリックしてテキスト・フィールドを配置します。 |
| <p>JTextFieldがJLabelの右側にスナップします。 |
| <!--Notice |
| that it is the same margin that used elsewhere in the form.--> |
| </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <table width="91%"> |
| <tr> |
| <td><p>JTextFieldのサイズを変更するには: </p> |
| <ol> |
| <li>前のタスクで追加した<tt>Nickname: </tt>ラベルのJTextFieldのサイズ変更のハンドルをJPanelの右端の方向にドラッグします。 </li> |
| <li>テキスト・フィールドとJPanelの端の間の適切なマージンを示す縦方向のガイドラインが表示されたら、マウス・ボタンを離してJTextFieldのサイズを変更します。 |
| <p>JTextFieldの右端が、ガイドラインが示すJPanelの端のマージンにあわせてスナップし、GUIビルダーで適切なサイズ変更の動作が表示されます。 </p> |
| </li> |
| <li>[Ctrl]-[S]を押して、ファイルを保存します。</li> |
| </ol></td> |
| </tr> |
| </table> |
| </blockquote> |
| <p class="align-center"><a href="#top">先頭</a></p> |
| <a name="moving_forward"></a> |
| <h2>次の作業</h2> |
| <p>位置揃えは、高度なGUIを作成するための最も基本的な方法です。前の項では、JLabelコンポーネントとJTextFieldコンポーネントをContactEditorUIフォームに追加するときにIDEの位置揃え機能を確認しました。ここでは、アプリケーションに必要な他のコンポーネントを操作しながら、GUIビルダーの位置揃え機能を詳しく見ていきます。</p> |
| <blockquote> |
| <a name="aligning_components"></a> |
| <h3 class="tutorial">コンポーネントの位置揃え</h3> |
| <p class="notes"><b>注意:</b> 下の項に関する対話型デモについては、<a href="http://bits.netbeans.org/media/quickstart-gui-align.swf" name="align">コンポーネントの位置揃えおよびアンカー設定(.swf)</a>スクリーンキャストを参照してください。</p> |
| |
| <p>コンポーネントをフォームに追加すると、表示されるガイドラインが示すように、GUIビルダーによって効果的にコンポーネントの位置揃えが実行されます。ただし、複数のコンポーネント間で異なる関係を指定する必要がある場合もあります。すでに、ContactEditorのGUIに必要なJLabelを4つ追加しましたが、位置揃えは実行しませんでした。ここでは、JLabelが縦2列に並ぶようにJLabelの右端をそろえます。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>コンポーネントの位置揃えを行うには: </p> |
| <ol> |
| <li><tt>[Ctrl]</tt>キーを押したままクリックして、フォーム左側の<tt>First Name:</tt>および<tt>Title:</tt>のJLabelを選択します。</li> |
| <li>ツールバーの「列内で右揃え」ボタン(<img src="../../../images_www/articles/80/java/quickstart-gui/align_r.png">)をクリックします。または、いずれか1つを右クリックし、ポップアップ・メニューから「位置揃え」>「列の右」を選択することもできます。</li> |
| <li>この操作を<tt>Last Name:</tt>と<tt>Nickname:</tt>の各JLabelにも繰り返します。 |
| <p>各JLabelの表示テキストの右端がそろうように、JLabelの位置が調整されます。アンカーの関係が更新され、コンポーネントがグループ化されたことを示します。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <p>追加したJTextFieldの操作を終了する前に、JLabelの間に挿入した2つのJTextFieldが正しくサイズ変更されるように設定されていることを確認します。フォームの右端まで拡張した2つのJTextFieldとは異なり、挿入したコンポーネントのサイズ変更の動作は自動的に設定されません。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>コンポーネントのサイズ変更の動作を設定するには:</p> |
| <ol> |
| <li>GUIビルダーで、挿入した2つのJTextFieldコンポーネントを[Ctrl]を押しながらクリックし、選択します。</li> |
| <li>両方のJTextFieldを選択した状態で、いずれか一方を右クリックし、ポップアップ・メニューから「自動サイズ変更」>「水平」を選択します。 |
| <p>JTextFieldは実行時に水平方向にサイズ変更するように設定されます。ガイドラインとアンカーのインジケータが更新され、コンポーネントの関係を視覚的なフィード・バックで示します。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>コンポーネントを同じサイズにするには:</p> |
| <ol> |
| <li>フォーム内の4つのJTextFieldをすべて[Ctrl]を押しながらクリックして選択します。</li> |
| <li>JTextFieldが選択された状態で、いずれか1つを右クリックし、ポップアップ・メニューから「同じサイズを設定」>「同じ幅」を選択します。 |
| <p>JTextFieldがすべて同じ幅に設定され、コンポーネントの関係を視覚的なフィード・バックで示すインジケータが各JTextFieldの上端に追加されます。</p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <p>ここで、JComboBoxを説明する別のJLabelを追加します。JComboBoxは、ContactEditorアプリケーションに表示する情報の形式をユーザーが選択できます。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JLabelとコンポーネント・グループの位置揃えを実行するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swing」カテゴリから「ラベル」コンポーネントを選択します。 </li> |
| <li>JPanelの左側の<tt>First Name:</tt>と<tt>Title:</tt>の各JLabelの下にカーソルを移動します。新しいJLabelの右端が、その上にあるコンポーネント・グループ(2つのJLabel)の右端とそろっていることを示すガイドラインが表示されたら、クリックしてコンポーネントを配置します。 |
| <p>次の図に示すように、JLabelの右端が、上にあるJLabelの列の右端とそろっている位置にスナップします。GUIビルダーでは、コンポーネントの間隔とアンカーの関係を示す位置揃えの状態線が更新されます。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/06_align_1.png" rel="lytebox" title="位置揃えされたJLabel"> <img alt="位置揃えされたJLabel" border="1" src="../../../images_www/articles/80/java/quickstart-gui/06_align_1-small.png"></a></p> |
| <p>前の例と同様に、JLabelをダブルクリックして表示テキストを選択し、表示名に「<tt>Display Format:</tt>」と入力します。JLabelがスナップするとき、表示テキストの長さにあわせて他のコンポーネントの位置が調整されます。 </p> |
| |
| <a name="baseline_alignment"></a> |
| <h3 class="tutorial">ベースラインの位置揃え</h3> |
| <p>テキストを含むコンポーネント(JLabel、JTextFieldなど)を追加または移動するときには、コンポーネント内のテキストのベースラインに基づいて適切な位置がガイドラインで表示されます。たとえば、上記でJTextFieldを挿入したとき、隣接するJLabelにベースラインが自動的にそろえられました。 </p> |
| <p>ここで、ContactEditorアプリケーションに表示する情報の形式をユーザーが選択できるコンボ・ボックスを追加します。JComboBoxを追加するとき、そのベースラインをJLabelのテキストのベースラインにそろえます。このとき、位置決めに使用できるベースラインのガイドラインが表示されます。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>コンポーネントのベースラインの位置揃えを実行するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「コンボ・ボックス」コンポーネントを選択します。 </li> |
| <li>追加したJLabelの右側にカーソルを移動します。JComboBoxのベースラインがJLabelのテキストのベースラインとそろっていることを示す横方向のガイドラインが表示され、2つのコンポーネントの適切な間隔を示す縦方向のガイドラインが表示されたら、クリックしてコンボ・ボックスを配置します。 |
| <p> 次の図に示すように、コンポーネントは、ベースラインが、左側にあるJLabel内のテキストのベースラインとそろっている位置にスナップします。GUIビルダーに、コンポーネントの間隔とアンカーの関係を示す状態線が表示されます。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/06_align_2.png" rel="lytebox" title="位置揃えされたコンボ・ボックス"> <img alt="位置揃えされたコンボ・ボックス" border="1" src="../../../images_www/articles/80/java/quickstart-gui/06_align_2-small.png"></a></p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JComboBoxのサイズを変更するには: </p> |
| <ol> |
| <li>GUIビルダーでコンボ・ボックスを選択します。 </li> |
| <li>JComboBoxとJPanelの間のオフセットを示すガイドラインが表示されるまで、JComboBoxの右端にあるサイズ変更のハンドルを右方向にドラッグします。 |
| <p>次の図に示すように、JComboBoxの右端が、ガイドラインが示すJPanelの端のマージンにあわせてスナップし、コンポーネントの幅がフォームにあわせて自動的にサイズ変更されるように設定されます。 |
| </p> |
| |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/06_align_3.png" rel="lytebox" title="サイズ変更されたコンボ・ボックス"> <img alt="サイズ変更されたコンボ・ボックス" border="1" src="../../../images_www/articles/80/java/quickstart-gui/06_align_3-small.png"></a></p></li> |
| <li>[Ctrl]-[S]を押して、ファイルを保存します。</li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p>コンポーネント・モデルの編集については、このチュートリアルで説明しないので、JComboBoxのプレースホルダの項目リストはそのままにします。</p> |
| |
| </blockquote> |
| <p class="align-center"><a href="#top">先頭</a></p> |
| <a name="reviewing"></a> |
| <h2>学習した内容の復習</h2> |
| <p>ContactEditorのGUIの作成は順調に進んできましたが、ここで、インタフェースに必要なコンポーネントをさらに追加しながら、これまでに学んだことを復習します。 </p> |
| <p>これまでは、IDEのガイドラインを使用して、ContactEditorのGUIにコンポーネントを追加してきました。しかし、コンポーネントの配置には、アンカーも重要です。アンカーについてはまだ説明していませんが、意識せずにこの機能をすでに利用しています。前述したように、コンポーネントをフォームに追加すると、IDEではターゲットのルック・アンド・フィールに適切な配置を示すガイドラインが表示されます。新しいコンポーネントを配置すると、このコンポーネントは、コンポーネント間の関係が実行時に維持されるように、最も近いコンテナの端またはコンポーネントにアンカーで固定されます。この項では、GUIビルダーによってバックグラウンドで実行される処理を確認しながら、作業をより合理的に行う方法について説明します。 </p> |
| <blockquote> |
| <a name="adding_aligning_anchoring"></a> |
| <h3 class="tutorial">追加、位置揃え、アンカー</h3> |
| <p>GUIビルダーを使用すると、一般的なワークフローを合理化し、短時間で簡単にフォームのレイアウトを調整できます。コンポーネントをフォームに追加すると、GUIビルダーで適切な位置にコンポーネントが自動的にスナップされ、必要なチェーン関係が設定されるため、複雑な実装の詳細を操作せずに、フォームのデザインに専念できます。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JLabelの表示テキストの追加、位置揃え、および編集を実行するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「ラベル」コンポーネントを選択します。 </li> |
| <li>フォーム内の一番下のJPanelの「E-mail」タイトルの下にカーソルを移動します。JLabelが、上端と左端にマージンを残してJPanelの左上隅にあることを示すガイドラインが表示されたら、クリックしてJLabelを配置します。 </li> |
| <li>JLabelをダブルクリックして表示テキストを選択します。「<tt>E-mail Address:</tt>」と入力して、[Enter]を押します。 |
| <p>JLabelが、フォーム内の適切な位置にスナップし、JPanelの上端と左端にアンカーで固定されます。前と同じように、そのコンポーネントを表す対応するノードが「ナビゲータ」ウィンドウに追加されます。 </p> |
| </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JTextFieldを追加するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「テキスト・フィールド」コンポーネントを選択します。 </li> |
| <li>追加した<tt>E-mail Address</tt>ラベルの右側にカーソルを移動します。JTextFieldのベースラインがJLabelのテキストのベースラインとそろっていることを示すガイドラインが表示され、2つのコンポーネントの適切なマージンを示す縦方向のガイドラインが表示されたら、クリックしてテキスト・フィールドを配置します。 |
| <p>JTextFieldが<tt>E-mail Address: </tt> JLabelの右側にスナップし、JLabelに関連付けられます。対応するノードが「インスペクタ」ウィンドウに追加されます。 </p></li> |
| <li>JTextFieldとJPanelの間の適切なオフセットを示すガイドラインが表示されるまで、JTextFieldの右端にあるサイズ変更のハンドルをJPanelの右端の方向にドラッグします。 |
| <p>JTextFieldの右端が、適切なマージンを示すガイドラインにスナップします。 </p> </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <p>ここで、ContactEditorの連絡先リスト全体を表示するJListを追加します。</p> |
| <!--todo : add more info here--> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JListを追加してサイズを変更するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「リスト」コンポーネントを選択します。</li> |
| <li>前の手順で追加した<tt>E-mail Address</tt> JLabelの下にカーソルを移動します。JListの上端と左端に、JPanelの左端と上のJLabelとの間の適切なマージンとそろっていることを示すガイドラインが表示されたら、クリックしてJListを配置します。</li> |
| <li>上のJTextFieldと幅が同じであることを示すガイドラインが表示されるまで、JListの右側にあるサイズ変更のハンドルをJPanelの右端の方向にドラッグします。 |
| <p> JListは、ガイドラインが示す位置にスナップし、対応するノードが「インスペクタ」ウィンドウに表示されます。また、新しく追加したJListが入るようにフォームが拡張されます。 </p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/06_align_4.png" rel="lytebox" title="追加され、サイズ変更されたJList"> <img alt="追加され、サイズ変更されたJList" border="1" src="../../../images_www/articles/80/java/quickstart-gui/06_align_4-small.png"></a></p> |
| <p>JListは、多数のデータのリストの表示に使用するので、通常はJScrollPaneを追加する必要があります。GUIビルダーでは、JScrollPaneが必要なコンポーネントを追加すると、JScrollPaneが自動的に追加されます。JScrollPaneは不可視コンポーネントなので、GUIビルダーによって作成されたJScrollPaneを表示または編集するには、「インスペクタ」ウィンドウを使用する必要があります。</p> |
| |
| |
| <a name="component_sizing"></a> <h3 class="tutorial">コンポーネントのサイズ設定</h3> |
| <p class="notes"><b>注意:</b> 下の項に関する対話型デモについては、<a href="http://bits.netbeans.org/media/quickstart-gui-resize.swf" name="resize">コンポーネントのサイズ変更およびインデント(.swf)</a>スクリーンキャストを参照してください。</p> |
| <p>モーダル・ダイアログ内のボタンなど、複数の関連するコンポーネントを同じサイズにすると、視覚的な一貫性を保つことができます。このことを示すため、この後の各図に示すように、連絡先リストの各エントリを追加、編集、および除去できる4つのJButtonをContactEditorフォームに追加します。その後、4つのボタンを同じサイズにして、これらのボタンが関連する機能を提供することがすぐにわかるようにします。 |
| </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>複数のボタンの表示テキストの追加、位置揃え、および編集を実行するには: </p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「ボタン」コンポーネントを選択します。</li> |
| <li>下のJPanelでJButtonを<tt>E-mail Address</tt> JTextFieldの右端に移動します。JButtonのベースラインと右端が、JTextFieldのベースラインと右端とそろっていることを示すガイドラインが表示されたら、[Shift]を押しながらクリックし、最初のボタンをJFrameの右端に沿って配置します。マウス・ボタンを離すと、JButtonが入るようにJTextFieldの幅が小さくなります。 |
| <table class="align-center"> |
| <tr> |
| <td><p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_1.png" rel="lytebox" title="位置揃えされたJButton"> <img alt="位置揃えされたJButton" border="1" src="../../../images_www/articles/80/java/quickstart-gui/buttons_1-small.png"></a></p></td> |
| <td><p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_2.png" rel="lytebox" title="追加されたJButton"> <img alt="追加されたJButton" border="1" src="../../../images_www/articles/80/java/quickstart-gui/buttons_2-small.png"></a></p> |
| |
| </td> |
| </tr> |
| </table> </li> |
| <li>下のJPanel内のJListの右上隅にカーソルを移動します。JButtonの上端と右端が、JListの上端と右端とそろっていることを示すガイドラインが表示されたら、[Shift]を押しながらクリックし、2つ目のボタンをJFrameの右端に沿って配置します。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_3.png" rel="lytebox" title="追加された2つ目のJButton"> <img alt="追加された2つ目のJButton" border="1" src="../../../images_www/articles/80/java/quickstart-gui/buttons_3-small.png"></a></p></li> |
| <li>追加した2つのボタンの下にさらにJButtonを2つ縦に追加します。これらのJButtonは、ガイドラインに従い、間隔が同じになるように配置します。最後のJButtonを配置する前に[Shift]キーを離さなかった場合は、[Esc]キーを押します。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_4.png" rel="lytebox" title="追加された2つのJButton"> <img alt="追加された2つのJButton" border="1" src="../../../images_www/articles/80/java/quickstart-gui/buttons_4-small.png"></a></p></li> |
| <li>各JButtonの表示テキストを設定します。(ボタンのテキストを編集するには、ボタンを右クリックして「テキストを編集」を選択します。または、ボタンをクリックし、しばらくしてからもう一度クリックすることもできます。)一番上のボタンは「<code>Add</code>」、2つ目のボタンは「<code>Edit</code>」、3つ目のボタンは「<code>Remove</code>」、4つ目のボタンは「<code>As Default</code>」にします。 |
| <p>JButtonコンポーネントはガイドラインが示す位置にスナップします。名前の長さにあわせてボタンの幅が変わります。 </p> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_5.png" rel="lytebox" title="名前変更されたJButton"> <img alt="名前変更されたJButton" border="1" src="../../../images_www/articles/80/java/quickstart-gui/buttons_5-small.png"></a></p> </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p>ボタンを配置したら、これらのボタンが関連する機能であることを明確にするため、また視覚的な一貫性を保つために、4つのボタンを同じサイズにします。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>コンポーネントを同じサイズにするには: </p> |
| <ol> |
| <li>[Ctrl]キーを押しながらJButtonを選択し、4つすべてのJButtonを選択します。</li> |
| <li>いずれか1つを右クリックし、ポップアップ・メニューから「同じサイズ」>「同じ幅」を選択します。 |
| <p>すべてのJButtonが、最も長い名前のボタンと同じサイズになります。 </p> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/buttons_6.png" rel="lytebox" title="同じサイズに設定されたJButton"> <img alt="同じサイズに設定されたJButton" border="1" src="../../../images_www/articles/80/java/quickstart-gui/buttons_6-small.png"></a></p> |
| </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <a name="indentation"></a> |
| <h3 class="tutorial">インデント設定</h3> |
| <p>コンポーネント下の複数のコンポーネントをまとめ、これらのコンポーネントが関連する機能のグループに属することを明確にする必要がある場合があります。たとえば、1つのラベルの下に複数の関連するチェックボックスを配置する場合があります。GUIビルダーでは、オペレーティング・システムのルック・アンド・フィールに適切なオフセットを示す特殊なガイドラインによって、インデントを簡単に設定できます。</p> |
| <p>この項では、ユーザーがアプリケーションでデータを表示する方法をカスタマイズできる複数のJRadioButtonをJLabelの下に追加します。作業を行うときには、この後の各図を参照してください。また、手順の後の「デモを表示」のリンクをクリックすると、対話型デモが表示されます。 </p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>JLabelの下のJRadioButtonのインデントを設定するには: </p> |
| <ol> |
| <li> フォームのJListの下に<tt>Mail Format</tt>というJLabelを追加します。ラベルは左端を上にあるJListの左端にそろえます。</li> |
| <li>「パレット」ウィンドウで、「Swing」カテゴリから「ラジオ・ボタン」コンポーネントを選択します。 </li> |
| <li>追加したJLabelの下にカーソルを移動します。JRadioButtonの左端がJLabelの左端とそろっていることを示すガイドラインが表示されたら、セカンダリ・インデント設定のガイドラインが表示されるまで、JRadioButtonを右に移動します。[Shift]を押しながらクリックし、最初のラジオ・ボタンを配置します。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/07_indent_1.png" rel="lytebox" title="JRadioButtonに対するセカンダリ・インデント設定のガイドライン"> <img alt="JRadioButtonに対するセカンダリ・インデント設定のガイドライン" border="1" src="../../../images_www/articles/80/java/quickstart-gui/07_indent_1-small.png"></a></p></li> |
| <li>カーソルを最初のJRadioButtonの右側に移動します。[Shift]を押しながらクリックして、2つ目と3つ目のJRadioButtonを配置します(このとき、提示されたコンポーネントの間隔に従います)。[Shift]キーは、最後のJRadioButtonを配置する前に離します。 </li> |
| <li>各JRadioButtonの表示テキストを設定します。(ボタンのテキストを編集するには、ボタンを右クリックして「テキストを編集」を選択します。または、ボタンをクリックし、しばらくしてからもう一度クリックすることもできます。)左端のラジオ・ボタンは「<code>HTML</code>」、2つ目のラジオ・ボタンは「<code>Plain Text</code>」、3つ目のラジオ・ボタンは「<code>Custom</code>」にします。 |
| <p>3つのJRadioButtonがフォームに追加され、<tt>Mail Format</tt> JLabelの下でインデントが設定されます。 </p> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/07_indent_3.png" rel="lytebox" title="追加して名前変更された3つのJRadioButton"> <img alt="追加して名前変更された3つのJRadioButton" border="1" src="../../../images_www/articles/80/java/quickstart-gui/07_indent_3-small.png"></a></p></li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p>ここで、3つのJRadioButtonをButtonGroupに追加し、一度に1つのラジオ・ボタンのみを選択できる切替えの動作を有効にします。これにより、ContactEditorアプリケーションの連絡先情報が、順番に選択したメール形式で表示されます。</p> |
| <table> |
| <tr> |
| <td> |
| <p>JRadioButtonをButtonGroupに追加するには:</p> |
| <ol> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「ボタン・グループ」コンポーネントを選択します。 </li> |
| <li>GUIビルダーのデザイン領域内の任意の場所をクリックし、ButtonGroupコンポーネントをフォームに追加します。ButtonGroupはフォーム自体には表示されませんが、ナビゲータの「他のコンポーネント」領域に表示されることに注意してください。 </li> |
| <li>フォーム内の3つのJRadioButtonをすべて選択します。</li> |
| <li>「プロパティ」ウィンドウで、buttonGroupプロパティのコンボ・ボックスからbuttonGroup1を選択します。 |
| <p>3つのJRadioButtonがボタン・グループに追加されます。</p> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/07_group.png" rel="lytebox" title="ボタン・グループに追加される3つのJRadioButton"> <img alt="ボタン・グループに追加される3つのJRadioButton" border="1" src="../../../images_www/articles/80/java/quickstart-gui/07_group-small.png"></a></p></li> |
| <li>[Ctrl]-[S]を押して、ファイルを保存します。</li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| |
| </blockquote> |
| <p class="align-center"><a href="#top">先頭</a></p> |
| <a name="adjusting_form"></a> |
| <h2>最後の調整 </h2> |
| <p>ContactEditorアプリケーションの大まかなGUIが完成しましたが、まだ必要な作業が残っています。この項では、GUIビルダーによって合理化される他の一般的なレイアウト作業を確認します。 </p> |
| <blockquote> |
| <h3 class="tutorial">仕上げ</h3> |
| <p>ユーザーが、入力した連絡先情報を確定して連絡先リストに追加するか、入力を取り消してデータベースの変更を中止できるボタンを追加します。この手順では、2つの必要なボタンを追加した後、表示テキストの長さが違ってもボタンのサイズが同じになるように編集します。</p> |
| <table width="91%"> |
| <tr> |
| <td> |
| <p>ボタンの表示テキストを追加および編集するには: </p> |
| <ol> |
| <li>下のJPanelが、JFrameフォームの下端まで拡張されている場合は、JFrameの下端を下にドラッグします。これで、JFrameの端とJPanelの端の間に「OK」ボタンと「Cancel」ボタン用のスペースができます。</li> |
| <li>「パレット」ウィンドウで、「Swingコントロール」カテゴリから「ボタン」コンポーネントを選択します。</li> |
| <li>フォーム内のE-mail JPanelの下にカーソルを移動します。JButtonの右端がJFrameの右下隅とそろっていることを示すガイドラインが表示されたら、クリックしてボタンを配置します。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/08_cancel.png" rel="lytebox" title="JPanelの下に追加されたボタン"> <img alt="JPanelの下に追加されたボタン" border="1" src="../../../images_www/articles/80/java/quickstart-gui/08_cancel-small.png"></a></p></li> |
| <li>別のJButtonを最初のJButtonの左側に追加します。このとき、JFrameの下端に沿ってガイドラインが示す間隔で配置します。</li> |
| <li>各JButtonの表示テキストを設定します。左側のボタンには「<tt>OK</tt>」、右側のボタンには「<tt>Cancel</tt>」と入力します。名前の長さにあわせてボタンの幅が変わります。</li> |
| <li>両方のJButtonを選択し、いずれか一方を右クリックし、ポップアップ・メニューから「同じサイズ」>「同じ幅」を選択することで2つのボタンを同じサイズにします。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/08_same_size.png" rel="lytebox" title="同じサイズに設定されたボタン"> <img alt="同じサイズに設定されたボタン" border="1" src="../../../images_www/articles/80/java/quickstart-gui/08_same_size-small.png"></a></p> |
| <p><tt>JButton</tt>コンポーネントがフォームに表示され、それに対応するノードが「ナビゲータ」ウィンドウに表示されます。<tt>JButton</tt>コンポーネントのコードがフォームのソース・ファイルに追加されます。このコードは、エディタのソース・ビューで確認できます。各JButtonが、最も長い名前のボタンと同じサイズになります。 </p> |
| </li> |
| <li>[Ctrl]-[S]を押して、ファイルを保存します。</li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p>最後に、各コンポーネントのプレースホルダのテキストを削除します。フォームの大まかなレイアウトが完成した後にプレースホルダのテキストを除去すると、コンポーネントの位置揃えやアンカーの関係の問題を避けることができますが、ほとんどの開発者はコンポーネントを配置しながらこのテキストを除去します。フォーム内で各JTextFieldのプレースホルダのテキストを選択し、削除します。JComboBoxとJListのプレースホルダの項目は、別のチュートリアルで使用するので残しておきます。</p> |
| |
| |
| </blockquote> |
| <p class="align-center"><a href="#top">先頭</a></p> |
| <a name="previewing_form"></a> |
| <h2>GUIのプレビュー </h2> |
| <p>ContactEditorのGUIを正常にビルドできたので、インタフェースを試してその結果を確認することができます。GUIビルダーのツールバーの「プレビュー」ボタン(<img src="../../../images_www/articles/80/java/quickstart-gui/test_form.png">)をクリックすることで、作業中のフォームをプレビューできます。専用のウィンドウにフォームが開き、ビルドおよび実行する前にフォームをテストできます。</p> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/quickstart-gui/08_preview_gui.png" rel="lytebox" title="フォームのプレビュー"> <img alt="フォームのプレビュー" border="1" src="../../../images_www/articles/80/java/quickstart-gui/08_preview_gui-small.png"></a></p> |
| |
| |
| <p class="align-center"><a href="#top">先頭</a></p> |
| <a name="deploying"></a> |
| <h2>GUIアプリケーションのデプロイ</h2> |
| <p>GUIビルダーを使用して作成したインタフェースがIDEなしでも機能するためには、GroupLayoutレイアウト・マネージャのクラスを対象にアプリケーションをコンパイルし、さらに、実行時にそれらのクラスを有効にしておく必要があります。それらのクラスは、Java SE 5でなくJava SE 6に含まれています。Java SE 5で実行するアプリケーションを開発する場合は、アプリケーションでSwingレイアウト拡張ライブラリを使用する必要があります。 </p> |
| <p>JDK 5でIDEを実行している場合は、Swingレイアウト拡張ライブラリを使用するように、自動的にアプリケーション・コードが生成されます。アプリケーションをデプロイするときは、アプリケーションにSwingレイアウト拡張ライブラリを含める必要があります。アプリケーションをビルドすると(「ビルド」>「メイン・プロジェクトのビルド」)、IDEによってライブラリのJARファイルのコピーがアプリケーションの<tt>dist/lib</tt>フォルダに自動的に配置されます。また、IDEによって<tt>dist</tt>フォルダ内の各JARファイルが、アプリケーションJARファイルの<tt>manifest.mf</tt>ファイルにある<tt>Class-Path</tt>要素にも追加されます。 </p> |
| <p>JDK 6でIDEを実行している場合は、Java SE 6のGroupLayoutクラスを使用するように、アプリケーション・コードが生成されます。これは、インストールされているJava SE 6を使用してシステムを実行するようにアプリケーションをデプロイでき、Swingレイアウト拡張ライブラリを使用してアプリケーションをパッケージ化する必要がないことを意味します。</p> |
| |
| <div style="border: 1px solid rgb(14, 27, 85); padding: 10px 30px; background-color: rgb(231, 231, 231); margin-left: 60px; margin-right: 40px;"> |
| <b>注意:</b> JDK 6を使用してアプリケーションを作成するが、そのアプリケーションをJava SE 5でも実行する必要がある場合、Java SE 6のクラスでなく、Swingレイアウト拡張ライブラリを使用するようにコードを生成することができます。GUIエディタでContactEditorUIを開きます。ナビゲータで、フォームの「ContactEditorUI」ノードを右クリックし、ポップアップ・メニューで「プロパティ」を選択します。「プロパティ」ダイアログ・ボックスで、「レイアウト生成スタイル」プロパティの値を「Swingレイアウト拡張統合」に変更します。 </div> |
| |
| <blockquote> |
| <h3 class="tutorial">スタンドアロンのGUIアプリケーションの配布と実行</h3> |
| |
| |
| <p>GUIアプリケーションをIDE外に配布する準備を行うには:</p> |
| <ul> |
| <li>プロジェクトの<tt>dist</tt>フォルダをZIPアーカイブに圧縮します。<tt>dist</tt>フォルダに<tt>lib</tt>フォルダが含まれる場合は、このフォルダも含める必要があります。</li> |
| </ul> |
| <p>アプリケーションを実行するには、プロジェクト名を右クリックし、コンテキスト・メニューの「実行」を選択します。「プロジェクトの実行」ダイアログで、メイン・クラス名(たとえば、ここで作成したプロジェクトの場合は「<tt>my.contacteditor.ContactEditorUI</tt>」)を選択し、「OK」をクリックします。アプリケーションが起動し実行中です。</p> |
| <p>スタンドアロンのGUIアプリケーションをコマンド行から実行するには:</p> |
| <ol> |
| <li>プロジェクトの<tt>dist</tt>フォルダまで移動します。</li> |
| <li>次を入力します。 |
| <blockquote> <tt>java -jar <jar_name>.jar</tt> </blockquote> |
| </li> |
| </ol> |
| |
| </blockquote> |
| <p><b>注意:</b> 次のエラーが発生する場合があります。</p> |
| <blockquote><tt>Exception in thread "main" java.lang.NoClassDefFoundError: org/jdesktop/layout/GroupLayout$Group</tt></blockquote> |
| <p><tt>manifest.mf</tt>ファイルで、現在インストールされているバージョンのSwingレイアウト拡張ライブラリが指定されていることを確認してください。 </p> |
| |
| <!--<p>For more information about the layout extension library, visit the <a href="http://swing-layout.dev.java.net/" target="_blank">Swing |
| Layout Extensions project</a>. </p>--> |
| <p class="align-center"><a href="#top">先頭</a></p> |
| |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20Designing%20a%20Swing%20GUI%20in%20NetBeans%20IDE">このチュートリアルに関するご意見をお寄せください</a></div> |
| <br style="clear:both;" > |
| |
| <a name="seealso"></a><h2>関連項目</h2> |
| <p>これでSwing GUIのデザインのチュートリアルは完了です。作成するGUIに機能を追加する方法については、次のドキュメントを参照してください。</p> |
| <ul> |
| <li><a href="gui-functionality.html">GUIビルドの概要</a> </li> |
| <li><a href="gui-image-display.html">GUIアプリケーションでのイメージの処理</a></li> |
| <li><a href="http://wiki.netbeans.org/wiki/view/NetBeansUserFAQ#section-NetBeansUserFAQ-GUIEditorMatisse" target="_blank">GUIビルダーのFAQ</a> </li> |
| <li><a href="../../trails/matisse.html">Java GUIアプリケーションの学習</a> </li> |
| <li><i>NetBeans IDEによるアプリケーションの開発</i>の<a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920">Java GUIの実装</a></li> |
| </ul> |
| |
| <p class="align-center"><a href="#top">先頭</a></p> |
| </body> |
| </html> |
