corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

NetBeans IDE 4.0 による GUI 構築

この簡潔なチュートリアルでは、ColorSwitcher というアプリケーションを作成する手順を学習します。明るいグレーから、中間のグレー、そして黒へのパネルの色を切り替えるための単純なプログラムを構築します。

ColorSwitcher を作成する過程で、次のことを行う方法を学ぶことができます。

作業の開始

IDE では、あらゆる Java 開発作業がプロジェクト内で発生します。IDE では、Java ソースファイルと関係するメタデータ全体をプロジェクトと呼びます。メタデータは、プロジェクト固有のプロパティファイルや、その構築および実行を制御する Ant 構築スクリプト、Ant ターゲットを IDE コマンドにマッピングする project.xml ファイルに保持されます。

プロジェクトの作成

最初に ColorSwitcher Java アプリケーションを作成する必要がありますが、このためには、ソースおよびその他のプロジェクトファイルを保持するための新しいプロジェクトを作成します。Java アプリケーションはしばしば複数の IDE プロジェクトで構成されますが、このチュートリアルでは、完全に 1 つのプロジェクトに収まる単純なアプリケーションを作成します。

新しい ColorSwitcher アプリケーションプロジェクトを作成する手順は、次のとおりです。

  1. 「ファイル」Tip「新規プロジェクト」(Ctrl-Shift-N) を選択します。または、IDE ツールバーにある「新規プロジェクト」アイコンをクリックします。

  2. 「カテゴリ」区画で「一般」フォルダを選択します。「プロジェクト」区画で「Java アプリケーション」を選択し、「次へ」をクリックします。

  3. 「プロジェクト名」フィールドに ColorSwitcher と入力し、プロジェクトの場所を指定します。

  4. 「主プロジェクトとして設定」チェックボックスが選択されていることを確認し、「主クラスを作成」が選択されている場合は、選択解除します。

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

    システム上の指定された場所に ColorSwitcher フォルダが作成されます。このフォルダには、Ant スクリプトやソースおよびテストを保持するためのフォルダ、プロジェクト専用のメタデータ用のフォルダなどのプロジェクトに関係するすべてのファイルおよびフォルダが含まれます。 この構造は、「ファイル」ウィンドウで見ることができます。

コンテナの作成

アプリケーションの開発に進むには、ここで必要な他の GUI コンポーネントを保持する Java コンテナを作成します。新しいアプリケーションを作成すると、「プロジェクト」ウィンドウの「ソースパッケージ」フォルダに空の「<デフォルトパッケージ>」ノードが追加されます。JFrame コンポーネントを使用してコンテナを作成し、新しいパッケージにそのコンテナを追加します。

JFrame コンテナを作成する手順は、次のとおりです。

  1. 「プロジェクト」ウィンドウで、「ColorSwitcher」ノードを右クリックし、「新規」Tip「JFrame フォーム」を選択します。

  2. クラス名として ColorSwitch と入力します。

  3. パッケージとして my.colorswitcher.pkg を入力します。

  4. 「完了」をクリックします。

    ColorSwitch.java 内に ColorSwitch フォームと ColorSwitch クラスが作成されます。<デフォルトパッケージ> が my.colorswitcher.pkg パッケージに置き換えられ、「エディタ」ウィンドウのデザインビューに ColorSwitch フォームが表示されます。

プロジェクトの主クラスの定義

さらに先に進むためには、構築および実行コマンドが正しく機能するよう主クラスにするクラスを IDE に指示する必要があります。main メソッドを含む任意のクラスを主クラスとして設定できますが、この場合は、上記の手順で作成した ColorSwitcher クラスを主クラスとして設定します。

主クラスを設定する手順は、次のとおりです。

  1. 「プロジェクト」ウィンドウで「ColorSwitcher」プロジェクトノードを右クリックし、「プロパティ」を選択します。

  2. 左区画にある「実行」ノードで「プロジェクトの実行」を選択します。

  3. 右区画で、「主クラス」フィールドの右側にある「ブラウズ」ボタンをクリックします。

  4. 「主クラスをブラウズ」ダイアログで my.colorswitcher.pkg.ColorSwitch を選択し、「主クラスを選択」をクリックします。

  5. 「了解」をクリックし、「プロジェクトプロパティ」ダイアログを終了します。

    構築および実行コマンドを実行するときに参照される主クラスパラメータが設定されます。

IDE のエディタの操作

作成したアプリケーション用の新しいプロジェクトを使用し、IDE のエディタインタフェースの操作練習をしてみます。下図は、エディタのデザインビューに表示された ColorSwitcher アプリケーションの画面例です。

The IDE's GUI Editor Interface.

JFrame コンテナを追加すると、「ソース」および「デザイン」切り替えボタンを含むツールバーからなるエディタのタブに、新しく作成された ColorSwitch フォームが表示されました。これらのボタンを使用し、ColorSwitch クラスのソースコードまたはその GUI コンポーネントのグラフィカルビューを交互に切り替えることができます。

初めは、ColorSwitch クラスは、IDE の右端に次の 3つのウィンドウが合体されたデザインビューとして開かれてます。

  • パレット。さまざな Swing、AWT、「レイアウト」および Beans コンポーネントのタブで構成されます。これらはレイアウトマネージャの選択を行うことができます。
  • インスペクタ。アプリケーション内の可視および不可視両方のすべてのコンポーネントをツリー階層形式で表示します。また、「インスペクタ」は現在「エディタ」で編集中のツリーコンポーネントに関する視覚的なフィールドバック情報を提供します。提供されるパネルでコンポーネントを整理することもできます。
  • プロパティ。現在「インスペクタ」か「エディタ」、「プロジェクト」、「ファイル」のいずれかのウィンドウで選択されているコンポーネントのプロパティを表示します。

「ソース」ボタンをクリックすると、IDE によって生成されたコードブロックからなるアプリケーションの Java ソースコードが表示されます。これらのコードブロックは、ソースビューで編集できない「保護されたブロック」として青で示されます。ソースビュー内では、入力が受け付けられるのはエディタの白い部分内だけです。IDEのエディタの「デザイン」ボタンをクリックすると、グラフィカルビューに戻ります。

フォームの編集

フォームを作成し、IDE の GUI ツールの操作に慣れたら、GUI アプリケーションの基本部分の開発に着手します。この手順では、JFrame のデフォルトレイアウトを変更してから、IDE の「パレット」を使って必要な GUI 要素をフォームに追加し、「GridBagLayout カスタマイザ」を使って要素を再配置します。

レイアウトマネージャの選択

フォームの最上位のコンテナとして JFrame をすでに追加していますから、次のステップでは、そのコンテナ内のコンポーネントのサイズと位置の制御に使用するレイアウトマネージャを指定します。コンテナの種類ごとにデフォルトのレイアウトマネージャがあります。JFrame コンポーネント用のデフォルトのレイアウトマネージャは、コンテナを 5 つのセクション (北、南、東、西、中央) に分割する BorderLayout です。

the Palette's Layout tab

この手順では、レイアウトマネージャを GridBagLayout に変更します。このレイアウトマネージャでは、「制約」と呼ばれる複雑な一群のコンポーネントプロパティを使用し、あらゆる側面からレイアウトを正確に制御できます。GridBagLayout は、行および列からなるグリッドにコンポーネントを配置します。グリッドのセルが同じサイズである必要はありません。コンポーネントは、複数の行または列、あるいはその両方にまたがることができます。





レイアウトマネージャを変更する手順は、次のとおりです。

  1. 「パレット」で「レイアウト」タブをクリックし、Java Foundation Classes (JFC) で使用可能なレイアウトマネージャにアクセスします。「パレット」でレイアウトアイコン上にマウスポインタを置くと、レイアウトマネージャ名を示すツールチップが表示されます。

  2. 「レイアウト」タブで「GridBagLayout」ボタン (Tip) をクリックします。

  3. 「エディタ」でグレーの ColorSwitch フォーム上の任意の場所をクリックし、レイアウトマネージャを設定します。

    「インスペクタ」の JFrame のコンポーネント階層に GridBagLayout が追加されます。

ボタンの追加

レイアウトマネージャを変更したら、実際に ColorSwitcher アプリケーションを操作するボタンを追加します。この操作を行うときの IDE の「ピック & ドロップ」動作に注目してください。

ボタンを追加する手順は、次のとおりです。

  1. 「Swing」パレットで JButton コンポーネントを選択します。

  2. 「エディタ」の ColorSwitch フォーム上の任意の場所をクリックし、JButton コンポーネントをフォームに追加します。

    「エディタ」のデザインビューに JButton コンポーネントが表示され、「インスペクタ」にそのコンポーネントに対応するノードが表示されます。また、JButton コンポーネントのソースコードがソースコードに追加され、ソースビューで確認することができます。

追加したボタンを編集し、適切なフォントスタイルおよびサイズで正しくテキストが表示されるようにします。

ボタンの名前を変更し、その表示フォントを変更する手順は、次のとおりです。

  1. 「エディタ」のデザインビューで JButton コンポーネントを右クリックし、コンテキストメニューから「テキストを編集」を選択します。または、単にボタンをクリックしてスペースキーを押します。

  2. テキストフィールドに Switch Color と入力し、Enter キーを押します。

  3. JButton コンポーネントが選択した状態で、「プロパティ」ウィンドウ内の「font」プロパティ位置までスクロールし、省略符号ボタン (...) をクリックします。

  4. 「font」ダイアログで、フォントスタイルとしてボールド、フォントサイズとして 14 を選択します。「了解」をクリックします。

    JButton コンポーネントのラベル Switch Color が、サイズの大きいボールドで表示されます。

「エディタ」では、JFrame コンテナの中央に、ボーダーが濃い紫で縁取りされた「Switch Color」ボタンが表示されます。フォームのその他の部分はグレーの領域で何も含まれていません。明るい青の境界線は、JFrame そのものの境界を表します。

ラベルの追加

ColorSwitcher アプリケーションはラベルを使用し、ボタンが呼び出す色を表示するため、次にそのラベルを追加する必要があります。この手順では、IDE の「パレット」から JLabel Swing コンポーネントを選択し、「エディタ」の作業スペースにあるフォームにそのコンポーネントを配置します。ここでもまた、この操作を行うの IDE の「ピック & ドロップ」動作に注目してください。

Label コンポーネントを追加する手順は、次のとおりです。

  1. 「パレット」ウィンドウで「Swing」タブをクリックし、使用可能な Swing コンポーネントを表示します。

  2. JLabel コンポーネントを選択します。

  3. 「エディタ」の ColorSwitch フォーム上の任意の場所をクリックし、JLabel コンポーネントをフォームに追加します。

    jLabel1 というテキストの入ったラベルが「エディタ」に表示され、「インスペクタ」のツリービューに jLabel1 [JLabel] というノードが強調された状態で表示されます。また、「プロパティ」ウィンドウに JLabel コンポーネントのプロパティが表示され、「エディタ」のソースビューにそのソースコードが追加されます。

GridBag カスタマイザによるレイアウトの調整

他のレイアウトと異なり、「インスペクタ」で GridBagLayout を選択しても、「プロパティ」ウィンドウにプロパティは表示されません。「GridBagLayout カスタマイザ」では、GridBagLayout のコンポーネントの配置と制約をグラフィカルに調整できます。このカスタマイザには、GridBag 制約のプロパティシートと制約を調整するためのボタン、コンポーネントのレイアウトの簡単な説明が含まれています。

GridBag カスタマイザを使用してフォームのレイアウトを調整する手順は、次のとおりです。

  1. 「GridBagLayout カスタマイザ」を開くには、「インスペクタ」で「GridBagLayout」ノードを右クリックし、「カスタマイズ」を選択します。

  2. 作業スペースの領域 (ウィンドウの右区画) で、JButton の中央をクリックし、JLabel コンポーネントの下にドラッグしてボタンを再配置します。ボタンをドラッグすると、黒および赤のグリッドによって配置可能な場所が示されます。左区画の「グリッド X」および「グリッド Y」プロパティの値が新しい位置に合わせて変化することに注目してください。

  3. JLabel コンポーネントを選択し、その「内側のパディング Y」制約を 33 に変更し、ボタンの上のセルがラベルで完全に埋まるようにします。続いて、「サイズ設定の方法 (Fill) 」制約を「水平」に設定します。

  4. コンポーネントの大体のレイアウトを完成したら、Control キーを押しながら、JLabel および JButton を選択し、両方について「インセット」(左右上下) に 5 を設定し、コンポーネントとコンポーネントの間の空白を大きくします。「GridBagLayout カスタマイザ」 で、インセットはコンポーネントの周囲に明るい黄色で表示されます。

  5. 「閉じる」をクリックし、「GridBagLayout カスタマイザ」を終了します。

    6. 編集されたコンポーネントは更新され、新しい位置およびその他制約が反映されます。「エディタ」のデザインビューにグリッドは表示されませんが、1 列、2 行で構成されています。

The GridBag Customizer.

GridBag レイアウトを使用したときの実際のフォームの編集は、「GridBagLayout カスタマイザ」で行いますが、実行時にどのようにコンポーネントが表示されるかは、「エディタ」のデザインビューに正確に反映されます。「GridBagLayout カスタマイザ」を使用する前に、どのようなレイアウトにするかを描いておくと役立つことがよくあります。

フォームに対する最終調整

フォームに 2 つのコンポーネントを配置したら、ラベルを編集し、「Color Switcher」ボタンがクリックされたときに色が表示されるようにします。このためには、ラベルのテキストを削除し、ボタンがクリックされたときに色の表示のみ行うようにその「opacity」プロパティの設定を変更します。

ラベルのプロパティを編集する手順は、次のとおりです。

  1. 「エディタ」のデザインビューで JLabel コンポーネントを選択します。

  2. 「プロパティ」ウィンドウで「プロパティ」ボタンをクリックし、コンポーネントのプロパティを表示します。

  3. 「text」プロパティまでスクロールして現在の jLabel1 の名前を選択して削除し、テキストフィールドを空白にします。Enter キーを押します。

  4. 「他のプロパティ」まで下方向にスクロールし、「opaque」プロパティのチェックボックスを選択して再度 Enter キーを押します。

    5. 「エディタ」の作業スペースから jLabel1 コンポーネントが消えますが、このコンポーネントは、「インスペクタ」で対応するノードを使って選択することができます。

最後に、フォームのプロパティを調整し、実行されたときにフォームが適切なサイズのウィンドウに表示されるようにします。

フォームのプロパティを編集する手順は、次のとおりです。

  1. 「エディタ」のデザインビューの「インスペクタ」で JFrame コンテナを選択し、「コード」ボタンを選択します。

  2. 「プロパティ」ウィンドウで「フォームサイズポリシー」に「サイズ変更コードの生成」を設定します。

  3. 「フォームのサイズ」プロパティまでスクロールし、サイズを [200, 150] に設定して「了解」を押します。

    4. アプリケーションを実行すると、新しい寸法のウィンドウ内にフォームが生成されます。

コンポーネントイベントの設定

必要なコンポーネントを作成し、アプリケーションのフォームに追加したら、次にそのコンポーネントとユーザー間の対話を定義します。これを行う方法はいくつかありますが、このチュートリアルは、「エディタ」のソースビューを使ってコードを直接入力する方法に焦点を当てます。

ボタンの設定

最初に行う必要があるのは、色を切り替えるボタンの設定です。この手順では、ユーザー入力用のメソッドと、そのメソッドを監視するリスナーコードを追加します。

マウスイベントを追加する手順は、次のとおりです。

  1. 「エディタ」ウィンドウのデザインビューにフォーカスを置きます。
  2. jButton1 コンポーネントを右クリックし、「イベント」Tip「Mouse」Tip「MouseClicked」を選択します。

    リスナーコードの jButton1.addMouseListener とイベントメソッドの jButton1MouseClicked() が生成されます。ColorSwitcher クラスの Java ソースコードがあるソースビューにフォーカスが切り替わり、カーソルが、次の手順でイベント処理コードを追加する行に置かれます。


Tip IDE によって生成された Java コードの保護されたブロックは、ソースビューで明るい青の背景で表示され、直接編集することはできません。保護されたブロック内のコードを編集するには、「デザイン」ボタンをクリックし、デザインビューに戻る必要があります。

イベントハンドラコードの追加

jButton1MouseClicked() メソッドを作成すると、このイベントが発生したときにその処理をする独自のコードを追加することができます。目的は、「Switch Color」ボタンがクリックされるたびに、ラベルの色が変わるようにすることです。

コードを追加する手順は、次のとおりです。

  1. 「エディタ」のツールバーで「クイックブラウズ」コンボボックスを探し (「デザイン」切り替えボタンの右横にある)、ColorSwitcher アプリケーションの要素一覧から JButton1 を選択します。JButton1 の青色の保護されたブロック内の JButton1 変数宣言の先頭にカーソルが表示されます。

  2. 変数宣言ブロックの下の行 (行 67 あたり) にカーソルを移動します。
    3. Tip 「エディタ」のソースビューで左マージンを右クリックし、「行番号を表示」を選択すると、ソースビューに行番号を表示することができます。

  3. 次の新しい変数を宣言します。 
    private java.awt.Color currentColor = java.awt.Color.lightGray;
  4. 「クイックブラウズ」コンボボックスで jButton1MouseClicked を選択します。保護されたブロックの下の「ここに処理コードを追加:」の後ろ (行 50 あたり) にカーソルを置き、次のコードを入力します。 
    if (currentColor == java.awt.Color.lightGray)
    currentColor = java.awt.Color.gray;
else if (currentColor == java.awt.Color.gray)
    currentColor = java.awt.Color.black;
else
    currentColor = java.awt.Color.lightGray;
jLabel1.setBackground (currentColor);
    Tip 最後の行の jLabel のピリオドの前の文字は数字の 1 で、英小文字の l ではないことに注意してください。

  5. 「ファイル」Tip「保存」(Ctrl-S) を選択し、ファイルを保存します。

    コードが保存されます。このとき、問題が検出された場合は、その行の左側にエラーアイコンが表示されます。

The IDE's Editor in Source view.

作業を進めているときでも、「エディタ」のツールバーにある「フォームのテスト」ボタンをクリックすることによって、フォームをプレビューできます。専用のウィンドウにフォームが開き、構築、実行する前にフォームをテストできます。

パレットマネージャによる GUI コンポーネントの追加

カスタムコンポーネントや Bean、コンポーネントライブラリを作成した場合は、下図に示す「パレットマネージャ」を使用し、IDE のパレットにそれらを追加することができます。「パレットマネージャ」を起動するには、「ツール」Tip「パレットマネージャ」を選択します。

GUI Editor interface

ColorSwitcher アプリケーションの動作の観察

ColorSwitcher フォームを正しく作成したら、アプリケーションを試してその結果を確認することができます。

プログラムのコンパイルと実行

ユーザーインタフェースとコンポーネント間の接続を作成すると、アプリケーションをコンパイルして実行できます。

プログラムをコンパイルする手順は、次のとおりです。

  1. 「構築」Tip「"ColorSwitch.java" をコンパイル」(F9) を選択することによって、ColorSwitcher をコンパイルします。

    「出力」ウィンドウが開き、進行状況が表示されます。エラーが発生した場合はその情報も表示されます。構築が成功すると、メインウィンドウの一番下のステータスバーに「ColorSwitcher の構築を完了しました」というメッセージが表示されます。

構築に問題があると、「出力」ウィンドウにエラーメッセージが表示されます。エラーメッセージをダブルクリックすると、ソースコードのエラーが発生した行にジャンプできます。構築が成功すると、アプリケーションを実行できます。

Tip 構築を省略して単にプログラムを実行する方法もあります。この方法では、プログラムを実行する前に古くなっているすべてのクラスが自動的にコンパイルされます。

プログラムを実行する手順は、次のとおりです。

  1. 「実行」Tip「主プロジェクトを実行」(F6) を選択することによって ColorSwitcher アプリケーションを実行します。

    「出力」ウィンドウが表示されます。実行エラーが発生した場合は、「出力」および「実行」の両方のウィンドウが表示されます。


実行コマンドの実行に成功すると、ColorSwitcher アプリケーションが起動し、下図のように表示されます。アプリケーションのウィンドウで「Switch Color」ボタンをクリックし、ボタンの上の領域の色が変化することを確認してください。ボタンをクリックするたびに、ボタンの上のラベルが明るいグレーから中間のグレー、黒へと変化します。アプリケーションのテストを終えたら、ウィンドウを閉じるボタンをクリックすることによってアプリケーションを終了します。
The ColorSwitch after the first click.

NetBeans IDE についてさらに学ぶには

これで、IDE の GUI 構築に関するチュートリアルを完了しました。NetBeans IDE の使用方法については、以下を参照してください。

  • NetBeans のオンラインヘルプ - NetBeans IDE に付属しているマニュアルです。F1 キーを押すと、オンラインヘルプが開きます。
  • NetBeans IDE の使用方法 - NetBeans IDE における Java アプリケーション開発のすべてを取り上げた手引書です。
  • NetBeans のサポートおよびマニュアル - NetBeans IDE ユーザー向けの記事や FAQ 集、メーリングリストの全一覧です。

Bookmark this page

del.icio.us furl simpy slashdot technorati digg
Companion
Projects: 		MySQL Database Server   GlassFish Community: an Open Source Application Server   Open Solaris  Open JDK: an Open SourceJDK   Mobile & Embedded Community     Sponsored by 
Sponsored by Sun Microsystems