プライマリ・コンテンツに移動
Oracle® Fusion Middleware Oracle JDeveloperによるアプリケーションの開発
12c (12.1.3)
E57556-02
  目次へ移動
目次

前
 
次
 

13 Java Swingユーザー・インタフェースの実装

この章では、Swingコンポーネントを使用するアプリケーションのユーザー・グラフィカル・インタフェース(GUI)を作成する方法について説明します。

JDeveloperのSwing GUIビルダーを使用すると、Swingコンポーネントを使用したJavaアプリケーションのユーザー・インタフェース(UI)の要素を、迅速かつ容易に作成できます。このUIは、「コンポーネント」ウィンドウから選択したコンポーネント(ボタン、テキスト領域、リスト、ダイアログ、メニューなど)を使用して構成します。次に、コンポーネント・プロパティの値を設定し、コンポーネント・イベントにイベント・ハンドラ・コードをアタッチします。

これには、AWTおよびSwingベースのクライアント・アプリケーション専用のユーザー・インタフェースのデバッグに使用されるUIデバッガの説明が含まれます。UIデバッガには、GUIアプリケーションのデバッグについて代替方法が用意されています。

この章の内容は次のとおりです。

13.1 旧バージョンで開発されたアプリケーションについて

旧バージョンのJDeveloperで開発されたSwingを使用するアプリケーションを本バージョンのJDeveloperに移行して開くことができます。また、以前に設計されたビジュアル・クラスの使用も完全にサポートされています。レガシー・エディタでは、jbInit()メソッドを持つすべてのクラスが使用できます。

以前のJavaビジュアル・エディタを使用する旧アプリケーションで、視覚的にフォームを編集できますが、以前の動作方法と新しいSwing GUIビルダーの動作方法は異なります。また、アプリケーション間を移行する方法はありません。

13.2 Java SwingのUIコンポーネントとコンテナについて

Java Swingのコンポーネントには、ボタン、表、テキスト・コンポーネント、および分割区画のすべてが含まれます。たとえば、JCheckboxコンポーネントは四角いボックスで、ブール値(true/false)の表示に使用します。多くのコンポーネントには、ソート、印刷、ドラッグ・アンド・ドロップの機能があり、その他にもサポートされる機能が組み込まれています。

http://docs.oracle.com/javase/tutorial/uiswing/から表示可能なチュートリアルで、Java Swingの使用例を参照できます。

JDeveloperでUIを設計するためにフォームをレイアウトする際、コンテナを使用します。コンテナもコンポーネントです。コンテナでは、その他のコンポーネントが保持および管理されます。コンテナのプロパティの取得と設定、メソッドのコール、さらに、その他のコンポーネントと同様にイベントへの応答を通してコンテナと対話します。JDeveloperには、コンテナの生成に役立つツールが用意されています。詳細は、第13章「コンテナの使用」を参照してください。

レイアウト・マネージャでは、そのレイアウト・マネージャ固有の特定のルール・セットに従ってコンテナ内のコンポーネントが自動的に配置されます。これによって、コンテナ内でのコンポーネントのサイズと位置が決まります。たとえば、BorderLayoutは、最初、最後、前、後および中央の領域にコンテナのコンポーネントを配置します。

図13-1 BorderLayout

この図は周囲のテキストで説明しています

13.3 Java GUIの設計

IDEのGUIビルダーによって、視覚的にGUI(グラフィカル・ユーザー・インタフェース)を設計できます。GUIの作成および変更が行われている間に、IDEはインタフェースを実装するJavaコードを自動的に生成します。

GUIフォームを開くときには必ず、ソース・ビューと設計ビューとを切り替えるためのタブが同時に表示されます。デザイン・ビューではGUIフォームを視覚的に使用できるのに対し、ソース・ビューではフォームのソース・コードを直接編集できます。

通常は、「コンポーネント」ウィンドウを使用してコンポーネントをフォームに追加し、GUIビルダー・ワークスペースに配置します。作業が進むにつれて、GUIビルダーは、追加するコンポーネントに望ましい位置合せと配置指定を提案するガイドラインを表示します。「プロパティ」ウィンドウを「構造」ウィンドウと併用すると、フォームのコンポーネントとレイアウト・マネージャのプロパティの調査と調整、コンポーネント・イベント・ハンドラの管理、およびコードの生成方法の定義を行うことができます。

注意:

  • GroupLayoutは、Javaプラットフォームのバージョン6に追加されました。このバージョンのGroupLayoutを、フォームごとにプロパティ・シートに設定できます。

  • GUIビルダーを使用するには、IDEのGUIフォーム・テンプレートで作成されたファイルを使用する必要があります。IDEの外側で作成されたGUIフォーム(つまり、Javaファイル)は、GUIビルダーを使用して編集することはできません。

13.3.1 ガード付きブロックについて

設計ビューでフォームを使用して作業を進めるうちに、GUIビルダーによってコードが自動的に生成され、そのコードはソース・ビューにグレーの背景で表示されます。このコードはガード付きコードと呼ばれ、直接編集することはできません。


注意:

ガードされていないコードはすべて、自由に編集できます。たとえば、UIの初期化またはカスタマイズ用のコードを作成できます(initComponents()コールの直後のコンストラクタの中に入れます)。

すべてのコンポーネントにはフィールドが関連付けられているため、Javaクラス内のどこからでもアクセスできます。


GUIビルダーにより生成されるガード付きテキストには、次のものがあります。

  • コンポーネントの変数宣言のブロック。

  • initComponents()メソッド(この中でフォーム初期化が実行されます)。このメソッドはフォームのコンストラクタからコールされます。これは手動で編集できませんが、コンポーネントのプロパティ・シートでCodeプロパティを編集することにより、その生成方法に影響を与えることができます。

  • すべてのイベント・ハンドラのヘッダー(および末尾のカッコ)。

13.4 フォームの作成方法

既存のプロジェクト内でフォームを作成できます。

新しいフォームを作成する手順は次のとおりです。

  1. 「アプリケーション」ウィンドウで、フォームを作成するためのプロジェクトを選択します。

  2. メイン・メニューから、「新規」「ギャラリから」「クライアント層」「Swing/AWT」を選択します。

  3. 作成するフォームのタイプを選択します。

  4. ウィザードへの入力を完了させて、「OK」をクリックします。

  5. 「アプリケーション」ウィンドウで、フォームのソース・ファイル(例: NewPanel.java)にスクロールします。

  6. ソース・ファイルをダブルクリックします。

    GUIビルダーで、フォームが編集可能な場所が表示されます。

13.5 作成可能なフォームの理解

次の表に、JDeveloperでビルドできるフォームを示します。

フォーム 説明
JPanelフォーム 新しいSwingパネルを作成します。パネルは、いくつかの他のコンポーネントを1箇所にまとめるために頻繁に使用します。JPanel自体も、JFrameまたはJDialog内でコンポーネントとして使用できます。
JFrameフォーム 新しいSwingフレームを作成します。フレームは一般に、アプリケーションのメイン・ユーザー・インタフェースとして、スタンドアロンのトップレベルのウィンドウとして使用されます。大半のSwingアプリケーションがこのフォームから開始してビルドされます。
JDialogフォーム 新しいSwingダイアログを作成します。ダイアログはモーダルまたはモードレスのウィンドウで、通常はユーザーに入力を促すために使用します。
JInternalFrameフォーム 新しいSwing内部フレームを作成します。このフレームをJDesktopPaneの中に配置すると、MDIユーザー・インタフェースを提供することができます。
Beanフォーム 任意のJavaBeansコンポーネント(ビジュアルまたは非ビジュアルのいずれか)に基づいて、新しいフォームを作成します。ウィザードでBeanクラスを指定する必要があります。
Panelフォーム 新しいAWT (Abstract Window Toolkit)パネルを作成します。パネルは、いくつかの他のコンポーネントを1箇所にまとめるために頻繁に使用します。

AWTは、旧バージョンのJDeveloperで使用されるツールキットです。現在はSwingを推奨しています。

Frameフォーム 新しいAWTフォームを作成します。フレームは一般に、アプリケーションのメイン・ユーザー・インタフェースとして、スタンドアロンのトップレベルのウィンドウとして使用されます。
Dialogフォーム 新しいAWTダイアログを作成します。ダイアログはモーダルまたはモードレスのウィンドウで、通常はユーザーに入力を促すために使用します。

13.6 コンポーネントの追加

新しいフォームが作成されると、表示および制御用にコンポーネントを追加できます。コンポーネントの追加は、次のようにいくつかの方法で実行できます。

「コンポーネント」ウィンドウから1つのコンポーネントを追加する手順は次のとおりです。

  1. 「コンポーネント」ウィンドウで、コンポーネントのアイコンをクリックしてそのコンポーネントを選択します。

  2. マウス・ボタンを押したまま、コンポーネントをフォーム内の目的の位置までドラッグします。

  3. 設計したコンテナのビジュアル階層の外に非ビジュアル・コンポーネント、またはビジュアル・コンポーネントを追加する場合は、そのコンポーネントをフォームの周りの白いエリアに配置します。それが、「構造」ウィンドウ内の「他のコンポーネント」ノードの下に表示されます。

「コンポーネント」ウィンドウから複数のコンポーネントを追加する手順は次のとおりです。

  1. 「コンポーネント」ウィンドウで、コンポーネントのアイコンをクリックしてそのコンポーネントを選択します。マウス・ボタンを離します。

  2. [Shift]キーを押しながら、パレットで選択したコンポーネントのインスタンスをフォーム内で配置する各位置をクリックします。

  3. 最後のコンポーネントを追加したら[Shift]キーを放します。または、追加を取り消す場合は[Esc]キーを押すか、右クリックします。

  4. 設計したコンテナのビジュアル階層の外に非ビジュアル・コンポーネント、またはビジュアル・コンポーネントを追加する場合は、そのコンポーネントをフォームの周りの白いエリアに配置します。それが、「構造」ウィンドウ内の「他のコンポーネント」ノードの下に表示されます。

ポップアップ・メニューを使用して1つのコンポーネントを追加する手順は次のとおりです。

  1. 「構造」ウィンドウで、コンポーネントの追加先のコンテナを右クリックします。

  2. 「コンポーネントから追加」を選択して、適切なサブメニューから目的のコンポーネントを選択します:

    • コンテナ

    • 制御

    • メニュー

    • ウィンドウ

    • ボックス・フィラー

    • AWT

    • Bean

13.6.1 コンポーネント・プロパティの設定方法

コンポーネントがフォームに追加されると、「プロパティ」ウィンドウでそのコンポーネントの動作と外観を調整できます。

コンポーネントのプロパティを編集する手順は次のとおりです。

  1. GUIビルダーまたは「構造」ウィンドウでコンポーネントを選択し、「プロパティ」ウィンドウにそのプロパティを表示します。複数のコンポーネントを選択した場合は、それらの共通プロパティが表示されて、変更が加えられた場合は選択されたすべてのコンポーネントに変更が適用されます。

  2. 「プロパティ」ウィンドウでコンポーネントのプロパティを編集するには、プロパティを選択して、目的の値を入力します。

  3. 編集するプロパティに省略記号(...)ボタンが付いている場合は、それをクリックすると、より高度な編集オプション(たとえば、カラー・タイプのプロパティ用のカラー・チューザなど)、あるいは、プロパティ値を表すコードを直接入力できる機能も含め、プロパティ値を指定する代替方法(たとえば、テキスト・プロパティ用にリソース・バンドルを使用)を提供する特別なプロパティ・エディタを開くことができます。

    これを使用すると、プロパティ・ウィンドウで小さいインプレース・エディタを使用する方法とは別の方法で、指定されたプロパティを編集できます。また、上部のコンボ・ボックスを使用してプロパティ値を入力する場合にも、いくつかの方法から選択できます。

13.6.2 ユーザー・インタフェースでのコンポーネントの選択方法

UIの既存のコンポーネントを選択する前に、GUIビルダー・ツールバーの選択矢印が押下されていることを確認してください。そうでない場合、コンポーネントを意図せずにUIに配置してしまうことがあります。

13.6.2.1 単一コンポーネントの選択方法

単一コンポーネントを選択するには、次のいずれかの操作を実行します。

  • GUIビルダーでコンポーネントをクリックします。

  • GUIビルダーにフォーカスを置き、[Tab]を使用してコンポーネントに移動します([Tab]を押すと正方向へ移動し、[Shift]を押しながら[Tab]を押すと逆方向へ移動します)。

  • 「構造」ウィンドウでコンポーネントを選択します。

13.6.2.2 複数のコンポーネントの選択方法

複数のコンポーネントを選択するには、[Ctrl]キーを押しながら次のいずれかの操作を実行します。

  • [Ctrl]キーを押しながら、GUIビルダーまたは「構造」ウィンドウでコンポーネントをクリックし、選択したコンポーネントを1つずつ追加/削除します。

  • 選択するコンポーネントの範囲の外側をクリックしてドラッグします。ドラッグして複数コンポーネントを(投げ縄で囲むように)方形で囲みます。選択するコンポーネントがすべてこの方形で囲まれた時点で、マウス・ボタンを放します。必要な場合は、[Ctrl]キーを押しながらクリックして、選択したグループのコンポーネントを個別に追加または削除できます。

    サブコンテナ内の選択をドラッグする必要がある場合、通常はサブコンテナそのものをドラッグします。この方法を避けたい場合は、[Shift]キーを押しながらドラッグします。

  • [Shift]キーを押しながら「構造」ウィンドウでコンポーネントをクリックして、間隔選択を実行します。デザイン・キャンバスで[Shift]をクリックすると、1つずつ選択に追加されますが、選択からの削除は行われません。

13.6.3 コンポーネントの位置合せ方法

コンポーネントが追加されたら、実行時に意図したとおりにフォームが表示されるようにコンポーネントの位置合せを調整できます。

多くの場合、ドラッグする際に提案された位置にコンポーネントを「スナップ」することによって、望ましい位置合せが達成できます。さらに、ツールバーまたはポップアップ・メニューから位置合せアクションを使用して、さらに位置合せを調整できます。


注意:

これはフリー・デザイン(デフォルトのレイアウト・モード)のみに適用されます。その他のレイアウト・マネージャには適用できません。

コンポーネントを位置合せするには:

  1. GUIビルダーで位置合せをするコンポーネントを選択します。

  2. GUIビルダーのツールバーで、適切な位置合せボタンをクリックします。

    または、いずれかのコンポーネントを右クリックして、ポップアップ・メニューから「位置合せ」「列内で左揃え」(または、「位置合せ」「列内で右揃え」)を選択することもできます。

    IDEでは、指定されたエッジの位置合せが行われて、コンポーネントのアンカー関係が更新されるようにコンポーネントの位置をシフトします。

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

モーダル・ダイアログでのボタンなどのように複数の関連コンポーネントを同じサイズに設定しておくと、類似機能を提供するものとして容易に認識できるため、役立ちます。また、コンポーネント間の関係が実行時に維持されるように、コンポーネントのサイズ変更動作を調整することもできます。

フリー・デザイン・モードでは、必要に応じてマウスを使用してコンポーネントのサイズを設定できます。ただし、マウスを使用する場合はよく考えてください。コンポーネントをデフォルトのサイズから固定サイズに変更すると、コンポーネントがハードコード化されたサイズ(ピクセル単位)で設定されるため、クロス・プラットフォームのレイアウト原則に反する場合があります。通常は、ボタンやラベルのサイズを変更する必要はありません。これらのサイズはそれぞれのテキストによってのみ定義されます。「自動サイズ変更」に設定されている固定コンテンツを持たないコンポーネントをサイズ変更することは通常は問題ありません。その理由は、このようなコンポーネントは実行時にサイズを調整できるためです(たとえば、テキスト・フィールド)。

nullAbsoluteLayout、またはGridBagLayoutを使用している場合は、最初にUIに配置するときにコンポーネントのサイズを設定したり、後でコンポーネントをサイズ変更して移動できます。


注意:

これはフリー・デザイン(デフォルトのレイアウト・モード)のみに適用されます。その他のレイアウト・マネージャには適用できません。

コンポーネントを同じサイズにするには:

  1. GUIビルダーで同じサイズにする必要のあるコンポーネントをすべて選択します。

  2. いずれかのコンポーネントを右クリックし、ポップアップ・メニューから「同じサイズ」幅の設定(または、「同じサイズ」高さの設定)を選択します。

コンポーネントのサイズ変更の動作を設定する手順は次のとおりです。

  1. 自動設定変更動作を設定するコンポーネントを選択します。

  2. いずれかのコンポーネントを右クリックし、ポップアップ・メニューから「自動サイズ変更」「水平方向」(または、「自動サイズ変更」「垂直方向」)を選択します。

    あるいは、ツールバーのボタンを使用します。

    コンポーネントの自動サイズ変更動作は、実行時に水平方向のサイズ変更に設定されています。位置合せガイドラインとアンカーのインジケータが更新され、新しいコンポーネントの関係を示すように更新されます。

13.7 コンテナの使用

Java GUIは最上位レベルのコンテナで構成されたフォームであり、その中にはグループ化されたサブコンテナと、必要な情報の提供および機能の制御に使用される各種コンポーネントがあります。

GUIビルダーで通常表示されるフォーム全体ではなく、単一のサブコンテナに作業をフォーカスさせるほうが効果的です。複雑にネストしたコンテナの階層が含まれている大容量のフォームを使用する場合、GUIビルダーのフォーカスの範囲をインタフェースの特定の部分に集中するように変更できます。

GUIビルダーのフォーカスを特定のコンテナに変更する手順は次のとおりです。

  1. GUIビルダーまたは「構造」ウィンドウで、編集するコンテナを右クリックします。

  2. ポップアップ・メニューから「このコンテナをデザイン」を選択します。

    作業領域全体に現在のコンテナが表示されるようにワークスペースの表示が調整され、フォームのその他のコンポーネントが非表示になります。フォームの階層全体は、「構造」ウィンドウに表示されたままです。

GUIビルダーの表示フォーカスをフォーム全体に戻す手順は次のとおりです。

  1. GUIビルダーでコンテナをクリックします。

  2. コンテキスト・メニューから、「親の設計」→「[トップ親]」を選択します。

    フォーム全体が表示されるように作業領域の表示が調整されます。「親の設計」メニュー項目が明るく表示されない場合は、フォーム全体がすでに設計されています。

13.7.1 コンテナ内でのコンポーネントの並替え

コンテナ内のコンポーネントの順序は、コンポーネントの追加順序に従っています。コンテナ用に選択したレイアウト・マネージャで制約(FlowLayout、BoxLayout、およびGridLayout)を使用していない場合は、コンポーネントの順序によってビジュアルな配置方法も決定します。ただし、「構造」ウィンドウを使用するか、コンポーネントをフォームの中にドラッグすることによって、コンポーネントを並べ替えることができます。

制約(BorderLayout、GridBagLayout、CardLayout、AbsoluteLayout、およびNull Layout)を適用するレイアウト・マネージャを使用した場合、コンテナ内のコンポーネントの順序によってコンポーネントの表示順序が決まることはありません。このようなコンテナの場合は、「構造」ウィンドウでのみコンポーネントの順序を変更できます。GridBagLayoutでは制約を使用してコンポーネントの配置方法が決定しますが、グリッドXとグリッドYの制約が使用されない場合は、コンポーネントの順序によってレイアウトが決定します。

13.8 レイアウト・マネージャの使用

Javaプログラムは複数のプラットフォームでデプロイできます。標準的なUI設計技術を使用してUIコンポーネントの絶対位置とサイズを指定する場合は、そのUIがすべてのプラットフォームで適切に表示されるとはかぎりません。このため、製品UIではAbsoluteLayoutおよびnullレイアウトは使用しないでください。これらのレイアウトはクロス・プラットフォームUIには適していません。その制約を十分認識したうえで、プロトタイプのみに使用することをお薦めします。開発システムで適切に表示されても、別のプラットフォームでは使用できない場合があります。この問題を解決するために、Javaでは移植可能なレイアウト・マネージャのシステムが提供されています。レイアウト・マネージャを使用すると、UIのレイアウトに関するルールと制約を移植可能な方法で指定できます。

レイアウト・マネージャでは、コンテナ内でのコンポーネントのサイズと位置を決定することによって、ビジュアル・コンポーネントがGUIフォームで配置される方法を制御します。これは、LayoutManagerインタフェースを実装して処理されます。

JDeveloperのレイアウト・マネージャを使用して、コンテナ内のコンポーネントの配置とサイズを表示のたびに制御します。レイアウト・マネージャでは、そのレイアウト・マネージャ固有の特定のルール・セットに従ってコンテナ内のコンポーネントが自動的に配置されます。

レイアウト・マネージャには、次のメリットがあります。

  • フォント、画面の解像度およびプラットフォームの違いに関係なく、コンポーネントの位置を正確に設定できます。

  • 実行時に動的にサイズが変わるコンテナに対応する、インテリジェントなコンポーネント配置ができます。

  • 様々なサイズの文字列を容易に調整できます。文字列が長くなっても、コンポーネントの正しい位置合せが保たれます。

レイアウト・マネージャでは、コンポーネントのサイズと位置が次のように様々なファクタに基づいて設定されます。

  • レイアウト・マネージャのレイアウト・ルール

  • レイアウト・マネージャのプロパティ設定(存在する場合)

  • すべてのコンポーネントに共通する特定のプロパティ(preferredSizeminimumSizemaximumSizealignmentXおよびalignmentYなど)

  • コンテナのサイズ

通常、UIを手動でコーディングする場合は、コンテナにコンポーネントを追加する前にデフォルトのレイアウト・マネージャをオーバーライドします。コンテナ上でレイアウト・マネージャを変更するには、デザイナ領域または「構造」ウィンドウでコンテナを右クリックし、「レイアウトを設定」メニューに移動して目的のレイアウト・マネージャを選択します。詳細は、第13.8.1項「レイアウト・マネージャの設定方法」を参照してください。

GUIビルダー(またはビジュアル・エディタ)を使用すると、いつでもレイアウトを変更できます。JDeveloperにより必要に応じてコードが調整されます。


注意:

GUIビルダーを使用してレイアウト・マネージャのプロパティを変更する場合は、「プロパティ」ウィンドウでプロパティにアクセスできるように、コンテナのレイアウトを明示的に指定する必要があります。

コンテナに必要な設計全体に基づいてレイアウト・マネージャを選択します。レイアウトによっては、コンテナに追加した直後にコンポーネントの配置とサイズ変更を引き継ぐため、GUIビルダーで操作しにくいものがあります。初期のレイアウト・プロトタイプ作成中にこの問題を軽減するため、JDeveloperにはnullというレイアウトが用意されています。このレイアウトでは、コンポーネントの配置と指定したサイズが正確に維持されます。nullを土台にすると、コンテナでのプロトタイプ作成が容易になります。その後、コンポーネントをコンテナに追加してから、設計に適した移植可能なレイアウトに切り替えることができます。

フリー・デザイン・モードで必要な内容が得られない場合は、様々なレイアウトを試して、コンテナのコンポーネントに対する効果を確認してください。たとえば、複合レイアウトの実行可能な代替方法としてGridBagLayoutがあります。詳細は、第13.8.8.3項「GridBagカスタマイザの使用方法」を参照してください。選択したレイアウト・マネージャで期待通りの結果が得られない場合は、別のレイアウト・マネージャを試行するか、異なるレイアウトで複数のパネルのネストを試して目的の効果が得られるか確認してください。

13.8.1 レイアウト・マネージャの設定方法

新しいコンテナを作成する場合、通常は、IDEのフリー・デザイン機能を活用できるように、デフォルトのレイアウトを使用して作成されます。必要に応じてGUIビルダーまたは「構造」ウィンドウを使用して、ほとんどのコンテナのレイアウトを変更できます。

GUIビルダーからレイアウト・マネージャを設定する手順は次のとおりです。

  1. 変更したいレイアウトのあるコンテナを右クリックします。

  2. 「レイアウトを設定」とレイアウト・メニューを選択します。

「構造」ウィンドウからレイアウト・マネージャを設定する手順は次のとおりです。

  1. 変更したいレイアウトのあるコンテナのノードを右クリックします。

  2. ポップアップ・メニューで、「レイアウトを設定」サブメニューから目的のレイアウトを選択します。

レイアウトを変更した場合、IDEでは、廃棄したレイアウト・マネージャのプロパティが保存されます。前のレイアウト・マネージャに戻った場合、フォームも以前の状態に戻ります。

13.8.2 FreeDesignレイアウトの理解

FreeDesignでは、最適な位置合せと間隔調整を自動的に提案するビジュアル・ガイドラインを使用してフォームのレイアウトを設定します。作業を進めていくうちに、GUIビルダーによってデザインの決定が機能UIに変換されていくため、レイアウト・マネージャを指定する必要がありません。フリー・デザインでは動的レイアウト・モデルを採用していて、フォームのサイズ変更やロケールの切替えが行われるたびに変更が受け入れられるようにGUIで調整されるため、コンポーネント間の関係は変更されません。

  • FreeDesignコンテナと、他のレイアウト・マネージャを使用しているコンテナを同じフォームにまとめて結合できます。FreeDesignを使用すると、最適な位置合せとコンポーネントの間隔調整を自動的に提案するビジュアル・ガイドラインを使用してフォームのレイアウトを設定できます。

13.8.3 レイアウト・プロパティの設定方法

フォームの外観を変更するには、一般的なレイアウト・マネージャ・プロパティとコンポーネントに固有のプロパティを調整します。

次の変更を行えます。

  • 一般的なレイアウト・プロパティ: コンテナ内のすべてのコンポーネント、つまり、コンポーネントの位置合せやコンポーネント間のギャップなどに影響します。

  • コンポーネントに固有のレイアウト・プロパティ: 特定のレイアウト・マネージャにより管理され、そのコンポーネントのみに適用されます。このタイプのプロパティを制約ともいいます。

一般的なレイアウト・マネージャのプロパティを設定する手順は次のとおりです。

  1. 「構造」ウィンドウでレイアウト・マネージャのノードを選択します。

  2. 「プロパティ」ウィンドウで、編集するプロパティを選択して、目的の値を入力します。プロパティはレイアウト・マネージャによって異なり、一部のレイアウト・マネージャにはプロパティが割り当てられていません。

コンポーネントのレイアウト・のプロパティを設定する手順は次のとおりです。

  1. 「構造」ウィンドウでコンポーネントを選択します。

  2. 「プロパティ」ウィンドウで、「レイアウト」にスクロール・ダウンし、編集するプロパティを選択して、目的の値を入力します。


    注意:

    コンポーネントのポップアップ・メニューから「コードをカスタマイズ」を選択すると、コンポーネントのカスタム・コードをより自然な方法で編集できます。

13.8.4 JDeveloperで提供されるレイアウトの理解

IDEで次のレイアウト・マネージャの中から選択できます。

  • FlowLayout

    FlowLayoutでは、コンテナ内のコンポーネントを1ページに表示される単語のように配置できます。最上行を左から右へ、適合するコンポーネントがなくなるまで埋めていき、以下の行についても1行ずつ同様の処理が継続されます。

  • BorderLayout

    BorderLayoutでは、コンテナの端または中央に沿ってコンポーネントが配置されます。BorderLayoutを使用すると、コンテナのComponentOrientationに対して、次のように使用可能な5つの位置にコンポーネントを配置できます。

    • 最初: BorderLayout.PAGE_STARTに対応。

    • 最後: BorderLayout.PAGE_ENDに対応。

    • 前: BorderLayout.LINE_STARTに対応。

    • 後: BorderLayout.LINE_ENDに対応。

    • 中央: 内部領域に対応。

  • GridLayout

    GridLayoutでは、等サイズのセルのグリッドにコンポーネントが配置されます。コンポーネントは、グリッドに左から右へ、上から下へと追加されます。

  • GridBagLayout

    GridBagLayoutは強力なレイアウト・マネージャであり、コンテナがサイズ変更された場合でも、「制約」という複雑なコンポーネント・プロパティのセットを使用してレイアウトのあらゆる側面を正確に制御します。これは、プラットフォーム全体にわたって一貫性のある外観を維持する自由形式のレイアウトを作成できるため、特にマルチプラットフォームのJavaアプリケーションに役立ちます。

    GridBagLayoutでは行と列のグリッドにコンポーネントが配置されますが、この場合、グリッド・セルがすべて同じサイズである必要はありません。さらに、コンポーネントは複数の行、列、またはその両方にわたることができます。

  • CardLayout

    CardLayoutでは、同じ表示領域を使用する2つ以上のコンポーネントを管理できます。CardLayoutを使用する場合、それぞれのコンポーネントは1組のカードのようなもので、カードのサイズはすべて同じですが、常に一番上のカードだけが表示されます。コンポーネントは同じ表示領域を共有するため、デザイン時に「構造」ウィンドウを使用してコンポーネントを個別に選択する必要があります。

  • BoxLayout

    BoxLayoutでは複数のコンポーネントを垂直に、または水平に配置できますが、その両方に配置することはできません。BoxLayoutにより管理されるコンポーネントは、左から右に、または上から下に、コンテナへ追加された順序で配置されます。BoxLayoutでは、複数のコンポーネントが追加された場合、またはコンテナがサイズ変更された場合でも、コンポーネントは2行目または2列目に折り返されません。

  • AbsoluteLayout

    AbsoluteLayoutでは、コンポーネントをフォーム内で正確な位置に配置したり、IDE内を自由に移動させたり、選択中の境界線を使用してサイズ変更したりすることができます。これは、正式な制限がなく、プロパティ設定を入力する必要がないため、特にプロトタイプの作成に役立ちます。ただし、コンポーネントの固定位置とサイズが環境に応じて変更できないため、本番アプリケーションにはお薦めできません。

  • Nullレイアウト

    Nullレイアウトは、レイアウト・マネージャを一切使用しないでフォームをデザインする場合に使用します。AbsoluteLayoutのようにクイック・プロトタイプの作成には役立ちますが、コンポーネントの固定位置とサイズが環境に応じて変更できないため、本番アプリケーションにはお薦めできません。

13.8.5 BorderLayoutの使用

BorderLayoutは、最初、最後、前、後および中央の領域にコンテナのコンポーネントを配置します。

  • 最初および最後のコンポーネントには高さの推奨値が指定され、コンテナの幅全体にわたって拡張されます。

  • 前および左のコンポーネントには幅の推奨値が指定され、最初と最後の領域に挟まれた空白を埋めるよう垂直に拡張されます。

  • 中央のコンポーネントは、残りのすべての領域を埋めるよう拡張されます。

図13-2 BorderLayout

この図は周囲のテキストで説明しています

図13-2に示すBorderLayoutは、コンテナの1つ以上の端にコンポーネントを配置したり、コンテナの中央を1つのコンポーネントで埋める場合に効果的です。また、単一コンポーネントでコンテナを完全に埋めるために使用するレイアウトでもあります。

BorderLayoutは、UI内の大き目のコンテナに最も有用なレイアウト・マネージャであることがわかります。BorderLayoutの各領域内にパネルをネストしてから、これらの各パネルに各種レイアウトのその他のパネルを移入することで、非常に複雑なUI設計を実現できます。

コンポーネントは、constraintsプロパティに基づき、BorderLayout内の5つの領域のいずれかに配置されます。「プロパティ」ウィンドウで、コンポーネントのconstraintsプロパティを、「最初」、「最後」、「前」、「後」または「中央」のいずれかの値に設定できます。

たとえば、BorderLayoutコンテナの最上部全体にツールバーを配置するには、ボタンのFlowLayoutパネルを作成し、これをコンテナの「最初」領域に配置します。このためには、パネルを選択し、「プロパティ」ウィンドウでconstraintsプロパティに対し「最初」を選択します。

この5つの領域にはそれぞれ、任意の数のコンポーネント(または、コンポーネントのパネル)を含めることができます。ただし、最上位のコンポーネントが不透明でないかぎり、同じ領域内の下位コンポーネントはすべて最上位コンポーネントによってカバーされます。

複数のコンポーネントおよびBorderLayoutの使用に関する一般的なガイドラインを次に示します。

  • コンテナ内に含まれるコンポーネントが5つ以下になるようにします。

  • BorderLayoutの1つの領域に配置するコンポーネントを増やす必要がある場合には、「含める」ポップアップ・メニュー・オプションを使用して、選択したコンポーネントを1つのサブパネルにグループ化します。


注意:

BorderLayoutでは、コンポーネントをコンテナに追加する順序は無視されます。

デフォルトにより、BorderLayoutが管理するコンポーネント間にギャップは挿入されません。ただし、「プロパティ」ウィンドウを使用して、コンテナに関連付けられたBorderLayoutに対し、水平または垂直のギャップをピクセル単位で指定できます。

BorderLayoutコンポーネントの周囲のギャップを変更するには、「構造」ウィンドウで、(BorderLayoutが管理するコンテナの真下に表示される)BorderLayoutオブジェクトを選択してから、「プロパティ」ウィンドウで、水平ギャップおよび垂直ギャップ・プロパティのピクセル値を変更します。

13.8.6 CardLayoutの使用

CardLayoutでは、コンポーネント(通常はパネル)が1組のカードのようにスタック内に相互に重ねられます。一度に1つのコンポーネントのみが表示され、別のコントロールを使用してパネルを順にめくり、最上位にくるパネルを選択できます。

図13-3 Cardレイアウト

この図は周囲のテキストで説明しています

CardLayoutは、異なる時点で別のコンポーネントが含まれる可能性のある領域がある場合に使用すると効果的なレイアウトです。これによって、同じ表示領域を共有する必要がある2つ以上のパネルを管理できます。

「構造」ウィンドウでCardLayoutを選択すると、「プロパティ」ウィンドウ内のコンポーネント・スタックを囲む水平ギャップおよび垂直ギャップの量を指定できます。

13.8.7 FlowLayoutの使用

FlowLayoutでは、各コンポーネントのpreferredSizeを使用して、コンポーネントが行内に左から右へ、続いて上から下へ配置されます。FlowLayoutでは、1行にできるだけ多くのコンポーネントが並べられた後、新しい行に移動します。通常、FlowLayoutはパネル上にボタンを配置する際に使用します。

図13-4 FlowLayout

この図は周囲のテキストで説明しています

FlowLayoutコンテナの行内にコンポーネントを配置する方法を選択するには、左、右または中央の位置合せの理由を指定します。また、コンポーネントと行の間のギャップの量(水平および垂直間隔)を指定できます。GUIビルダーを使用している場合、alignmentおよびgapプロパティを両方とも変更するには「プロパティ」ウィンドウを使用します。

13.8.7.1 位置合せの変更

位置合せを変更するには、「構造」ウィンドウでFlowLayoutオブジェクトを選択してから、「プロパティ」ウィンドウでalignmentプロパティの値を指定します。

13.8.7.2 ギャップの変更

FlowLayoutにおけるコンポーネント間のデフォルトのギャップは5ピクセルです。

水平または垂直のギャップを変更するには、「構造」ウィンドウでFlowLayoutオブジェクトを選択してから、「プロパティ」ウィンドウで水平ギャップまたは垂直ギャップのプロパティのピクセル値を変更します。

13.8.7.3 コンポーネントの順序変更

FlowLayoutコンテナ内のコンポーネントの順序を変更するには、コンポーネントを新しい位置にドラッグするか、コンポーネントを右クリックし、「上へ移動」または「下へ移動」を選択します。

13.8.8 GridBagLayoutの使用

GridBagLayoutはきわめて柔軟かつ強力なレイアウトであり、グリッド内のコンポーネントのレイアウトをGridLayoutよりも厳密に制御します。GridBagLayoutでは、コンポーネントが動的な矩形グリッドに水平および垂直に配置されます。各コンポーネントのサイズが同じである必要はなく、複数のセルを埋めることもできます。

図13-5 GridBagLayout

この図は周囲のテキストで説明しています

GridBagLayoutでは、各コンポーネントの制約と最小サイズ、およびコンテナの優先サイズに基づいてコンポーネントの位置が決定されます。

このトピックで使用する用語の意味は次のとおりです。

  • コンポーネントのセルは、コンポーネントが占めているグリッド・セルのセット全体を指します。

  • コンポーネントの表示領域は、コンポーネントが占めているセルのうち、コンポーネントの外部余白(空間)に使用されていないすべてのスペースを指します。

GridBagLayoutは複合グリッドに対応できますが、コンポーネントを小さいパネルに編成してGridBagLayoutコンテナ内でネストする方が正常に(かつ予測どおりに)動作します。このようにネストしたパネルでは、他のレイアウトを使用したり、必要に応じてさらにコンポーネント・パネルを含めることができます。この方法には、次の2つのメリットがあります。

  • ボタン・バーのような特定の領域に、より適切なレイアウトを使用できるため、コンポーネントの配置とサイズを個別に正確に制御できます。

  • 使用するセルの数が少なくなり、GridBagLayoutが簡素化されて制御が容易になります。

一方、GridBagLayoutの方が使用するコンテナ数が多いため、他のレイアウト・マネージャを使用した場合に比べてプログラムのメモリー使用量が大きくなります。

13.8.8.1 GridBagLayoutコンテナへのコンポーネントの追加

コンポーネントをデザイン・キャンバスに追加した場合、それらのコンポーネントは、デフォルトでは、1行に表示されます。そのコンポーネントをマウスを使用して配置することはできません。かわりに、GridBagカスタマイザを使用する必要があります。詳細は、第13.8.8.3項「GridBagカスタマイザの使用方法」を参照してください。

13.8.8.2 「プロパティ」ウィンドウでのGridBagConstraintsの設定方法

「プロパティ」ウィンドウを使用して、いくつかのGridBagConstraintsを指定できます。

図13-6 「プロパティ」ウィンドウでのレイアウト・プロパティ

この図は周囲のテキストで説明しています

GridBagLayoutコンテナ内のすべてのボタンに同じ内側のパディングを使用する場合は、[Ctrl]キーを押しながらボタンを1つずつ選択し、対応するレイアウト制約プロパティを編集できます。

「プロパティ」ウィンドウでのレイアウト・プロパティの設定方法: 

  1. 「構造」ウィンドウまたはGUIビルダーで、GridBagLayoutコンテナ内で変更するコンポーネントを選択します。

  2. 「プロパティ」ウィンドウで、「レイアウト」を選択します。

  3. 「プロパティ」ウィンドウでconstraintsプロパティの値を選択します。

  4. プロパティ・エディタで必要な制約を設定して「OK」をクリックします。

13.8.8.3 GridBagカスタマイザの使用方法

GridBagカスタマイザを使用すると、GridBagLayoutでのコンポーネントの配置と制約を視覚的に調整できます。

図13-7 「レイアウト」ダイアログのカスタマイズ

この図は周囲のテキストで説明しています

これには、GridBag制約のプロパティ・シート、制約調整ボタン、およびコンポーネントのレイアウトの概略描写が含まれています。GUI Builderでは、コンポーネントが実行時にどのように表示されるかがより詳細に反映されます。

GridBagカスタマイザを使用する手順は次のとおりです。

  1. フォームに必要なコンポーネントを追加し、そのコンポーネントに対してGridBagLayoutが設定されていることを確認します。

  2. カスタマイザを開くには、「構造」ウィンドウでGridBagLayoutノードを右クリックして、ポップアップ・メニューから「カスタマイズ」を選択します。

  3. コンポーネントを右側のペインにドラッグして、必要に応じて再配置します。

    コンポーネントをドラッグしている間、その「グリッドX」および「グリッドY」プロパティは新しい位置を反映するように変更されます。

  4. コンポーネントのおおよそのレイアウトが確立されたら、コンポーネントを1つ選択して、左側のペインで必要に応じてその制約を調整します。

    値を直接入力することも、表示されるボタンを使用してコンポーネントの制約を調整することもできます。

    編集しながら、次の操作を行います。

    • 右側のペインの上のツールバーに、「再実行」、「元に戻す」、「パディング」、および「レイアウトをテスト」の各ボタンが必要な場合があります。

    • 列/行ヘッダーを右クリックして、列/行を追加または削除することができます。

    • また、空のセルを右クリックして、新しいコンポーネントを追加できます(したがって、パレットにアクセスするために、GridBagカスタマイザのダイアログを閉じる必要がありません)。

    数行を追加し、設計が特定数の列に適切に収まった後、コンポーネント数が奇数である必要のある1行に気づいた場合は、1行全体を占めている行にパネルをドロップし、そのパネル内で別のレイアウトを使用して必要な外観にすることを検討してください。

  5. そのレイアウトに満足できる場合は、「閉じる」をクリックしてカスタマイザを終了します。

13.8.9 GridLayoutの使用

GridLayoutでは、行および列内のセルのグリッドにコンポーネントが配置されます。GridLayoutでは各コンポーネントが拡張され、セル内の使用可能な領域が埋まります。各セルはサイズが完全に同じであり、グリッドは均一です。GridLayoutコンテナをサイズ変更すると、コンテナに使用できる領域が与えられて、GridLayoutによりセルができるだけ大きくなるようセルのサイズが変更されます。

図13-8 GridLayout

この図は周囲のテキストで説明しています

グリッド内の列および行の数を指定できますが、ゼロにできるのは行または列の一方のみです。少なくともどちらか一方に値を指定し、GridLayoutマネージャがもう一方を計算できるようにする必要があります。

たとえば、15のコンポーネントが含まれるグリッドに対して4列およびゼロ行を指定した場合、GridLayoutでは4列および4行が作成され、最後の行には3つのコンポーネントが含められます。または、3行およびゼロ列を指定した場合、GridLayoutでは3行および5列が作成されます。

行および列の数だけでなく、水平ギャップおよび垂直ギャップのプロパティを変更して、セル間のピクセル数を指定できます。デフォルトの水平および垂直ギャップはゼロです。

GridLayoutコンテナのプロパティ値を変更するには、「構造」ウィンドウでGridLayoutオブジェクトを選択してから、「プロパティ」ウィンドウで、rows、columns、horizontal gapおよびvertical gapの各プロパティの値を編集します。

13.8.10 ユーザー・インタフェースのプレビュー

コンパイルおよび実行時のGUIの表示状況を簡単にテストするには、GUIビルダーのツールバーで「デザインのプレビュー」ボタンをクリックします。フォームで実際に表示されるとおりにコンポーネントが配置されたダイアログ・ボックスが表示されます。

プレビューされたGUIフォームをクリックすると、マウス・イベントが実際のコンポーネントに伝えられて、「動作中」のコンポーネントを確認できます。したがって、たとえばスライダを動かしたり、テキスト・フィールドに入力したり、ボタンをクリックしたときに「押下」されたように見えますが、クロス・コンポーネント・コードやイベント処理コードは実行されません。

13.9 アクセス可能なフォームの作成方法

作成したGUIフォームとその中に含まれるコンポーネントがアクセシビリティ要件を満たしていることを確認するために、それぞれのアクセシビリティ・プロパティを調整できます。スクリーン・リーダーなどの各種アシスティブ・テクノロジで動作する場合、GUIはアクセス可能であると見なされます。

次のプロパティを編集して、アクセシビリティを支援することができます。

  • アクセシビリティ対応の名前: コンポーネントの名前を設定します。デフォルトでは、この名前はコンポーネントのtextプロパティ値に設定されます。

  • アクセシビリティ対応の説明: コンポーネントの説明を設定します。

  • アクセシビリティ対応の親: アクセス可能な親コンポーネントの名前を設定します。

フォームまたはコンポーネントのaccessibilityプロパティを編集する手順は次のとおりです。

  1. 「構造」ウィンドウで、変更する必要のあるaccessibilityプロパティを持つフォームまたはコンポーネントを選択します。

  2. 「プロパティ」ウィンドウで、Accessibilityプロパティまでスクロール・ダウンします。

  3. 省略記号(...)ボタンをクリックしてプロパティ・エディタを開き、目的の値を入力します。

    あるいは、現在のプロパティ値をクリックして選択し、新しい値を入力できます。

13.10 イベント処理の使用

JDeveloperのUI設計ツールを使用して、コンポーネント・イベントとメニュー・イベントにイベント・ハンドラ・コードをアタッチします。

Javaプログラムの構築時は、コードを初期化コードおよびイベント処理コードの2つのカテゴリに分けられるものとみなすことができます。

  • 初期化コードは、UIコンポーネントの作成時に実行されます。これは主にコンポーネントの起動コードとみなすことができます。この初期化コードには、JDeveloperで設計されたすべてのGUIクラスに含まれるinitComponents()メソッド内のすべての要素が含まれます。JDeveloperでは、UI設計に基づいてこのコードが生成されます。たとえば、「プロパティ」ウィンドウを使用してボタンのtextプロパティを「OK」に設定したため、JDeveloperではbutton1.setLabel("OK")メソッドのコールが生成されます。

  • イベント処理コードは、ユーザーがボタンを押したりメニュー項目を使用するなどのアクションを実行したときに実行されるコードです。そのコンポーネントのイベント名を「構造」ウィンドウに入力し、[Enter]を押すと、JDeveloperではスタブ(空)イベント処理メソッドが作成されます。そのスタブにおいて、イベントにより引き起こされる実際のアクションを処理するコードを記述します。

プログラム全体は、要素が最初に表示されたときの外観を示す初期化コードと、ユーザー入力に応じた処理内容を示すイベント処理コードで構成されています。

13.10.1 メニュー・イベントへのイベント処理コードのアタッチ方法

Swingでは、メニュー項目にactionPerformedイベントがあり、CheckboxMenuItemsにはitemStateChangedイベントがあります。メニュー項目のactionPerformedイベントに追加するコードは、ユーザーがそのメニュー項目を選択するか、対応するアクセラレータ・キーを使用するたびに実行されます。

メニュー項目のイベントにコードを追加する手順は、次のとおりです。

  1. ビジュアル・エディタでJFrameフォームを開きます。

  2. UIフレームにメニュー・バーを追加し、メニュー・バーにメニューとメニュー項目を挿入します。または、すでにメニューが含まれているファイルを開く方法もあります。

  3. メニュー・エディタまたは「構造」ウィンドウでメニュー項目を選択します。

  4. 「プロパティ」ウィンドウで、Eventsノードを開いて、目的のイベント値フィールドをクリックします。

  5. イベントの「値」フィールドにイベントのスタブ名を入力し、[Enter]を押して、イベント処理メソッド・スタブを指定の名前でソース・コードに作成します。

    イベントの「値」フィールドに名前を入力すると、コード・エディタが開いて「構造」ウィンドウにソース・コードが表示されます。カーソルは新規に作成したイベント処理メソッドの本体に置かれており、コードを入力できます。

  6. 左カッコと右カッコの間に、ユーザーがこのメニュー・コマンドをクリックしたときに実行させるコードを入力します。

13.10.2 コンポーネント・イベントへのイベント処理コードのアタッチ方法

「プロパティ」ウィンドウの「イベント」カテゴリを使用すると、コンポーネント・イベントにハンドラをアタッチしたり、既存のイベント・ハンドラを削除したりできます。

コンポーネント・イベントにイベント処理コードをアタッチする手順は、次のとおりです。

  1. GUIビルダーまたは「構造」ウィンドウでコンポーネントを選択します。

  2. 「プロパティ」ウィンドウで、「イベント」タブを選択して、そのコンポーネントのイベントを表示し、目的のイベント値フィールドをクリックします。

  3. イベントの「値」フィールドにイベントのスタブ名を入力し、[Enter]を押して、イベント処理メソッド・スタブを指定の名前でソース・コードに作成します。

    イベント・ハンドラが新しい名前で作成され、ソース・コード内でそのイベント・ハンドラにフォーカスが移ります。また、イベントからイベント処理メソッドへの接続を確立するために、adapterクラスに追加のコードも挿入されます。

  4. イベント・ハンドラのスタブ内でコードを記述して、そのコンポーネント・イベントに対するレスポンスを指定します。

13.10.3 コンポーネントのデフォルト・イベントに対してイベント・ハンドラをすばやく作成する方法

GUIビルダーでイベント・ハンドラを作成できます。

コンポーネントのデフォルト・イベントに対するイベント・ハンドラをすばやく作成する手順は、次のとおりです。

  1. 「コンポーネント」ウィンドウでコンポーネントを選択して、それをUIに追加します。

  2. GUIビルダーでコンポーネントをダブルクリックします。イベント・スタブが作成され、ソース・コード内でそのイベント・ハンドラにフォーカスが移ります。

  3. イベント・ハンドラに必要なコードを追加して完成します。


注意:

デフォルト・イベントはBeanInfoで定義されるか、未指定の場合はactionPerformedとして定義されます。

13.11 GUIソース・コードの変更方法

GUIビルダーでGUIフォームを作成すると、IDEでは、グレーのガード付きコード・ブロックが自動的に生成されます。ただし、初期化コードの生成方法は変更可能であり、初期化コード内に配置されるカスタム・コードを作成することもできます。

コンポーネント、フォーム、またはコンポーネントのプロパティに対する初期化コードの生成方法を変更するには、「プロパティ」ウィンドウでそのCodeプロパティを編集します。さらに、カスタム・コードを作成して、それを初期化コード内に配置する場所を指定できます。

フォーム・コンポーネントのガード付きブロックを変更する手順は次のとおりです。

  1. 「構造」ウィンドウで、編集する必要のある初期化コードを持つコンポーネントを選択します。

  2. ガード付きコード内の指定されたコンポーネントに対して生成されるカスタム・コードを追加するために、個別のプロパティを示したCode Generationプロパティ・グループまでスクロール・ダウンします。

    あるいは、コンポーネントを右クリックして、ポップアップ・メニューから「コードをカスタマイズ委」を選択します。こうして開いたダイアログでは、あらゆるタイプのカスタム・コードをより快適に編集できます。


注意:

Javaクラス内でガードされていないその他のすべてのコードは自由に編集できるため、必要に応じてUIをカスタマイズできます。すべてのコンポーネントにはフィールドがあるため、任意の場所でさらに変更できます。最適な場所は、initComponents()コールの直後のコンストラクタの中です。通常は、ここにコードを作成するだけで十分です。これは、GUIビルダーで適切なコード・プロパティにコードを入力することによってinitComponents()の中にそのコードを表示させようとするよりも、ずっと簡単に行えます。この方法は、特殊な場合のみ使用してください。

13.11.1 IDE外部でのGUIフォーム・コードの変更

IDEでは、それぞれのフォームは次の2つのファイルで構成されます。

  • .javaファイル: フォームのJavaソース・コードが含まれています。

  • .formファイル: GUIビルダーでフォームを変更する際、.javaファイルの生成に使用される情報が格納されています。このファイルは、アプリケーションで配信する必要はありません。このファイルが削除されると、GUIビルダーを使用してフォームを変更できなくなります。

.javaファイルは、外部エディタを使用して編集できます(IDEでフォームを編集中の場合を除く)。ただし、次の例外があります。

  • initComponents()メソッドのコンテンツを変更しないでください。このメソッドの本体は、IDEでフォームが開かれると常に再生成されます。

  • IDEのGUIビルダーによりソース内に配置された特別のコメント(// GEN-...)を削除または変更しないでください。これらのコメントは、フォームを正しく開くために必要です。これらのコメントは、IDEのソース・エディタ内では表示されません。

  • イベント・ハンドラのヘッダーまたはフッターを変更しないでください。

13.11.2 プロパティのコード生成の変更方法

プロパティ値はカスタム・コードとして設定できます。

コード生成を変更する手順は次のとおりです。

  1. GUIビルダーまたは「構造」ウィンドウでコンポーネントを選択し、「プロパティ」ウィンドウにそのプロパティを表示します。複数のコンポーネントを選択した場合は、それらの共通プロパティが表示されて、変更が加えられた場合は選択されたすべてのコンポーネントに変更が適用されます。

  2. 「プロパティ」ウィンドウでコンポーネントのプロパティを編集するには、プロパティを選択して、目的の値を入力します。

  3. 編集するプロパティに省略記号(...)ボタンが付いている場合は、それをクリックすると、より高度な編集オプション(たとえば、カラー・タイプのプロパティ用のカラー・チューザなど)、あるいは、プロパティ値を表すコードを直接入力できる機能も含め、プロパティ値を指定する代替方法(たとえば、テキスト・プロパティ用にリソース・バンドルを使用)を提供する特別なプロパティ・エディタを開くことができます。

    これを使用すると、プロパティ・ウィンドウで小さいインプレース・エディタを使用する方法とは別の方法で、指定されたプロパティを編集できます。また、上部のコンボ・ボックスを使用してプロパティ値を入力する場合にも、いくつかの方法から選択できます。

13.12 UIデバッガの使用

JDeveloperでは、標準的なJavaおよびPL/SQLデバッガ機能のみでなく、AWTおよびSwingベースのクライアント・アプリケーションおよびアプレット専用のグラフィカル・ユーザー・インタフェース(GUI)のデバッグをサポートしています。

UIデバッガには、GUIアプリケーションのデバッグについて代替方法が用意されています。従来のデバッガでは、データ構造を調べてプログラム・フローをトラッキングしていました。UIデバッガでは、かわりにGUI構造とイベントの順序を調べることができます。UIデバッガを使用すると、画面に表示されるUIコンポーネントと実際のデータの関係を確認できます。また、UIコンポーネントにより起動されるイベントとイベントを受信するリスナーも表示されます。

UIデバッガを使用するには、「ヘルプ」「更新のチェック」を選択し、ウィザードの指示に従い、最初にUIデバッガをダウンロードする必要があります。

UIデバッガの使用に特別な追加前提条件はなく、JDeveloperデバッガを使用する場合と同じですが、「プロジェクト・プロパティ - ライブラリ」ページでJDeveloperランタイム・ライブラリjdev-remote.jarを選択する必要があります。

従来のほとんどのデバッガでは、GUIアプリケーションのツリー構造を調べるのが容易ではなく、アプリケーションに表示される内容の詳細も表示されないため、GUIアプリケーションのデバッグは困難な場合がありました。

デバッグを開始するには、プロジェクトを選択して「実行」「UIデバッグ<projectname>.jpr」を選択することで、デバッグを開始できます。

13.12.1 「UIデバッガ」ウィンドウの使用

JDeveloperで公開されるUIデバッガ機能は、3つのドッキング可能ウィンドウを介して使用できます。「UIツリー」ウィンドウと「UIアウトライン」ウィンドウは、UIデバッガの起動時に自動的に表示されます。「イベント」ウィンドウは、イベントを初めてトラッキングする際に表示されます。この3つのウィンドウはいずれも、「表示」「UIデバッガ - <UI_debugger_window>を選択することでトグルできます。


注意:

「UIデバッガ」ウィンドウには、スナップショットを生成するまでは情報が表示されません。「スナップショット」ボタン([F5])をクリックすると、「UIツリー」ウィンドウと「UIアウトライン」ウィンドウに移入されます。

  • UIツリー: アプリケーションのコンポーネント、サブコンポーネントおよびその親子関係を表す階層構造が表示されます。ツリーからコンポーネントを選択し、右クリックしてポップアップ・メニューのオプションを表示します。そのコンポーネントが「UIアウトライン」ウィンドウでも選択されていることがわかります。

  • UIアウトライン: アプリケーションのGUIのイメージまたはアウトライン・イメージが表示されます。GUIアプリケーションのグラフィカル表現からコンポーネントを選択し、右クリックしてポップアップ・メニューのオプションを表示します。


    注意:

    AWTコンポーネントが正しくペイントされない可能性があるため、Swingベース以外のアプリケーション場合はアウトライン・モードを使用することをお薦めします。

  • イベント: 「リスナー」ダイアログでリスニング対象として選択したイベントに関する情報が表示されます。「リスナー」ダイアログは、「UIツリー」ウィンドウまたは「UIアウトライン」ウィンドウで「イベント」ポップアップ・メニューのオプションを選択すると表示されます。このウィンドウでイベントを選択すると、そのソース・コンポーネントがツリー・ウィンドウとアウトライン・ウィンドウで選択されます。

13.12.2 UIデバッガの起動方法

UIデバッガ・タスクを実行する前に、まずUIデバッガを起動する必要があります。

UIデバッガを起動する手順は、次のとおりです。

  1. 「アプリケーション」ウィンドウで、デバッグするプロジェクトを選択します。

  2. 実行構成を選択します。詳細は、第12.3項「プロジェクトを実行用に構成」を参照してください。

  3. 「実行」「UIデバッグ<projectname>.jpr」を選択し、プロジェクトのデフォルト・ターゲットを起動してアプリケーションを実行します。

    JDeveloperによって、UIデバッガが起動します。アプリケーションが起動し、「UIツリー」ウィンドウと「UIアウトライン」ウィンドウが自動的に表示されます。ただし、UIデバッガのウィンドウにはまだ情報が表示されません。

  4. アプリケーションが完全に起動した後、デバッグ対象のダイアログまたはウィンドウに移動して選択します。

  5. 一方のUIデバッガ・ウィンドウで「スナップショット」([F5])ボタンをクリックします。

    「UIツリー」ウィンドウにアプリケーションの階層構造が表示され、「UIアウトライン」ウィンドウにアプリケーションのユーザー・インタフェースのグラフィカル表現が表示されます。

13.12.3 アプリケーション・コンポーネント階層の検査

「UIツリー」に表示される情報、「UIアウトライン」ウィンドウに表示される情報、および両者間の関係は、常に同期化されています。この2つのウィンドウには(表示方法が異なるのみで)同じ情報が表示されるため、「UIツリー」階層でコンポーネントを選択すると、「UIアウトライン」ウィンドウ内で同じオブジェクトが検索されてハイライトされ、その逆も同じです。

アプリケーション・コンポーネント階層を調べる前に、UIデバッガを起動してスナップショットを生成する必要があります。アプリケーションのUIが更新されるたびに、「スナップショット」を再度クリックして、UIデバッガのウィンドウに表示される情報を更新する必要があります。

アプリケーション・コンポーネント階層を検査する手順は次のとおりです。

  • 「UIツリー」ウィンドウのツリーを使用してコンポーネントの階層構造を調べるか、「UIアウトライン」ウィンドウを使用してコンポーネントを目視で探します。

  • 「UIアウトライン」ウィンドウの上部にある「イメージ」および「アウトライン」チェック・ボックスを使用して、それぞれコンポーネントのイメージと枠線をトグルします。

  • 「UIアウトライン」ウィンドウの下部にあるアイコンを使用すると、アプリケーションのイメージをズーム・インまたはズーム・アウトできます。イメージがウィンドウよりも大きい場合は、イメージをクリックしてドラッグすると必要な部分を表示できます。

  • 「UIアウトライン」ウィンドウで選択されていないコンポーネントは、赤い網掛け付きで表示されます。

  • 非表示のコンポーネントは、「UIツリー」にグレーのテキストで表示されます。

  • どちらのウィンドウでもコンポーネントを右クリックすると、ポップアップ・メニューのオプションが表示されます。詳細は、「UIツリー」または「UIアウトライン」を参照してください。

13.12.4 「監視」ウィンドウでのコンポーネント情報の表示方法

コンポーネントに関連付けられているデータを調べるために、JDeveloperの「監視」ウィンドウで監視対象のコンポーネントを選択できます。監視式を使用すると、プログラムの実行に従って変化する、変数および式の値を監視できます。

「監視」ウィンドウにコンポーネント情報を表示する手順は、次のとおりです。

  1. まだ実行していない場合は、UIデバッガを起動してスナップショットを生成します。

  2. 「UIツリー」または「UIアウトライン」ウィンドウでコンポーネントを右クリックし、ポップアップ・メニューから「監視」を選択します。

    「監視」ウィンドウが「スマート・データ」ウィンドウのタブとして開き(まだ開いていない場合)、このタブにコンポーネントの構造を表すツリーが表示されます。

13.12.5 「プロパティ」ウィンドウでのUIコンポーネントのインスペクト方法

JDeveloperの「プロパティ」ウィンドウで、UIコンポーネントの状態を表示できます。

「プロパティ」ウィンドウでUIコンポーネントを表示する手順は次のとおりです。

  1. まだ実行していない場合は、UIデバッガを起動してスナップショットを生成します。

  2. 「UIツリー」または「UIアウトライン」ウィンドウでコンポーネントを右クリックし、ポップアップ・メニューから「インスペクト」を選択します。

    「インスペクト」ウィンドウが「スマート・データ」ウィンドウのタブとして開き(まだ開いていない場合)、このタブにコンポーネントの構造を表すツリーが表示されます。

13.12.6 コンポーネントにより生成されるイベントのトレース方法

イベント・トレース機能を使用して、UIコンポーネントにより生成されたイベントのうち、選択したイベントの起動を監視できます。この情報を使用して、イベントの内容と順序を判別します。

コンポーネントにより生成されるイベントをトレースする手順は、次のとおりです。

  1. まだ実行していない場合は、UIデバッガを起動してスナップショットを生成します。

  2. 「UIツリー」または「UIアウトライン」ウィンドウでコンポーネントを右クリックし、ポップアップ・メニューから「イベントのトレース」を選択します。

    「イベントのトレース」ダイアログが開き、コンポーネントにより起動されたイベント・タイプを受信するリスナーのリストが表示されます。


    注意:

    表示されるのは、スナップショットの生成時に参照可能だったUIコンポーネントのイベント・リスナーのみです。以降の実行によりUIコンポーネントが追加または削除されていても、その変更はリストに表示されません。

  3. (オプション)「子を含める」を選択します。これにより、選択したコンポーネントの子により起動されるイベント・タイプも追加表示されます。

  4. 「リスナー」ダイアログで、トレース対象のイベント・リスナーを選択します(複数選択可)。たとえば、「FocusListener」を選択すると、すべてのフォーカス・イベントがトレースされます。

  5. 「OK」をクリックします。

  6. 選択したリスナーにより起動されたイベントが「イベント」ウィンドウに表示されます。ウィンドウを右クリックしてウィンドウの内容を消去するか、または特定のリスナーを削除します。

13.12.7 イベント・リスナーの表示方法

「リスナーの表示」機能を使用すると、UIコンポーネントにより起動されたイベントの受信者を検索できます。この情報を使用してUIイベントのエクステントを判別します。


注意:

表示されるのは、スナップショットの生成時に参照可能だったUIコンポーネントのイベント・リスナーのみです。以降の実行によりUIコンポーネントが追加または削除されていても、その変更はリストに表示されません。

コンポーネントにより生成されるイベントをトレースする手順は、次のとおりです。

  1. まだ実行していない場合は、UIデバッガを起動してスナップショットを生成します。

  2. 「UIツリー」または「UIアウトライン」ウィンドウでコンポーネントを右クリックし、ポップアップ・メニューから「リスナーの表示」を選択します。

    選択したコンポーネントの「リスナー」ダイアログが開き、コンポーネントにより通知されたリスナー・タイプ、各リスナー・タイプの登録済リスナーのクラスおよび各クラスで実装されているイベント・メソッドのリストが表示されます。


    注意:

    リスナーのリストにはデバッガのトレーシング・フィルタが適用されます。フィルタによりクラスが除外されたリスナーは、リストに表示されません。

  3. メソッドを選択します。

  4. 「ソースに移動」をクリックします。

    編集ウィンドウが開き、選択したメソッドのソース・コードが表示されます。

13.12.8 GUIアプリケーションのリモート・デバッグ

JDeveloperでは、コマンドラインを介したGUIアプリケーションのリモート・デバッグをサポートしています。そのためには、デバッグ対象のプログラムを手動で起動する必要があります。プログラムが開始し、JDeveloperのデバッガがアタッチされた後は、リモート・デバッグとローカル・デバッグの動作はよく似ています。

UIのリモート・デバッグの実行方法は、アプリケーションのリモート・デバッグに似ています。最初に、次の要件が満たされていることを確認してください。

  • ライブラリにJDeveloperランタイムjdev-remote.jarを追加すること。

  • UIデバッガ・エージェントのメイン・クラスをアプリケーションのメイン・クラスの前に指定すること。

13.12.8.1 GUIアプリケーションのリモート・デバッグ方法

GUIアプリケーションのリモート・デバッグは、コマンドラインにコマンドを入力して実行します。

GUIアプリケーションのリモート・デバッグを実行するには、次のようにします。

  1. デバッグ用のプロジェクトを構成して、リモート・デバッグに使用可能であることを確認します。

  2. 次のコマンドを実行してアプリケーションを手動で起動します。

    java -XXdebug -cp ...\jdev\lib\jdev-remote.jar 
    oracle.jdevimpl.runner.uidebug.debuggee.Debuggee <MainClass>
    

    意味は次のとおりです。

    • ...¥jdev¥lib¥jdev-remote.jarは、JDeveloperランタイム・ライブラリのクラスパスです。これをコマンドに追加する必要があります。

    • oracle.jdevimpl.runner.uidebug.debuggee.Debuggeeは、UIデバッガのエージェントのメイン・クラスの名前です。

  3. コマンド・ウィンドウに次のようなメッセージが出力されます。

    *** Port is 4000 ***
    *** Waiting for JVM debugger connection. ***
    
  4. UIデバッガはソケットを使用してアプリケーションと相互作用します。ソケットのデフォルトのポート番号は4030ですが、次のようにアプリケーションのメイン・クラスの前に-uidport,<port>を挿入すると、別のポート番号を指定できます。

    java -XXdebug -cp ...\jdev\lib\jdev-remote.jar
    oracle.jdevimpl.runner.uidebug.debuggee.Debuggee -uidport,5678 
    mypackage1.Application1
    

    この場合、JDeveloper IDEでUIデバッガを起動するときにもポート番号を指定する必要があります。

13.12.8.2 UIのリモート・デバッグのためのJDeveloper IDEの起動方法

JDeveloper IDEを使用して、プロジェクトのUIのリモート・デバッグを実行できます。

UIのリモート・デバッグのためにJDeveloper IDEを起動するには: 

  1. リモート・デバッグ用に設定した実行構成を選択します(「実行」「アクティブな実行構成を選択」)。

  2. 「デバッグ」「UIデバッグ<project_name>.jpr」を選択します。

    Javaアプリケーションのメイン・メソッドが起動します。

  3. 「JPDAにアタッチ」ダイアログが表示され、ホスト名とUIデバッガ・ポートを指定するように要求されます。

    -uidportオプションを使用していないかぎり、この値をデフォルトの4030のままにしてください。

  4. UIのローカル・デバッグを実行しているかのようにUIデバッグ・セッションが動作します。任意のUIデバッガ・タスクの実行を開始できます。

13.12.9 リスナーの自動検出

UIデバッガによりトラッキングできるイベントのリストはハード・コード化されていませんが、実行時に動的に検出されます。したがって、次のガイドラインに従っていれば、すべてのリスナーにより起動されたイベントをトラッキングできます。

  • コンポーネント・クラスに、リスナーを追加および削除するためのパブリック・メソッドが必要です。

  • メソッド名がaddまたはremoveで始まってListenerで終わる必要があります。

  • 戻り型がvoidである必要があります。

  • メソッドの引数が1つのみである必要があります。

  • 引数のタイプがjava.util.EventListenerを拡張するインタフェースである必要があります。

  • メソッド名がaddまたはremoveで始まるインタフェース名と同じである必要があります。

  • 指定したインタフェース内の各メソッドの戻り型がvoidである必要があります。

  • メソッドに使用できる引数は1つのみ(イベント)です。

  • 引数のタイプがBeanとしてアクセス可能なクラスである必要があります。

  • getterの戻り値はvoid以外の値でもかまいません。プリミティブ型でない場合、UIデバッガに表示される値はオブジェクトのtoString()メソッドをコールすることで取得された文字列になります。

  • たとえば、Xxx型の新規イベント・リスナーを定義する場合、コンポーネントには次のシグネチャを持つメソッドが必要です。

    public void addXxxListener(XxxListener); 
    public void removeXxxListener(XxxListener);
    
  • XxxListenerインタフェースの例を次に示します。

    public interface XxxListener extends java.util.EventListener
    {
       public void methodOne(XxxEvent xxxEvent);
       public void methodTwo(XxxEvent xxxEvent);
       public void methodThree(XxxEvent xxxEvent);
    }
    
  • XxxEventクラスの例を次に示します。

    public class XxxEvent 
    {
       public int getA(){...} 
       public String getB(){...} 
       public OtherType getC(){...}