< 前へ | 次へ >

演習 1.2: 従業員テーブルを追加および配置する

この演習では、Java ビジュアル・エディターを 使用して、JScrollPane と JTable をアプリケーションに追加します。 この後に行う課題で、会社の登録簿にある全従業員のリストを戻す Web サービスからデータを取得するように、この JTable をプログラムします。

JTable を追加したならば、Java ビジュアル・エディターのデザイン・ビューを 使用して、JTable のレイアウトを 次の指定に一致するようにカスタマイズします。

  • JTable を横方向に 3 セル、縦方向に 2 セル拡大する。
  • 15 ピクセルの左側インセットを追加する。
  • JTable を employeesTable に名前変更する。

Java ビジュアル・エディターで DirectoryApp.java ファイルを開く

Java ビジュアル・エディターで DirectoryApp.java ファイルを開くには、以下の手順を行います。
  1. Java パースペクティブの「パッケージ・エクスプローラー」ビューを使用して、 「MyDirectory」プロジェクトと「directory.client」パッケージを展開する。
  2. 「DirectoryApp.java」ファイルを右クリックして、「アプリケーションから開く」 > 「ビジュアル・エディター」を選択する。 Java ビジュアル・エディターは、Java クラスをロードし、設計をグラフィック・キャンバス域に 表示します。
ヒント:
  • Java ビジュアル・エディターが使用するルック・アンド・フィールを変更するには、 「ウィンドウ」 > 「設定」 > 「Java」 > 「ビジュアル・ エディター」 の順に選択し、 「Swing ルック・アンド・フィール」を指定する。この設定は、次にこのクラスを開いたときに有効になります。 このチュートリアルは、Windows のルック・アンド・フィールを使用します。
  • すべての Java ファイルについてこのビジュアル・エディターをデフォルト・エディターにするには、 「ウィンドウ」 > 「設定」」をクリックして、 「一般」 > 「エディター」 > 「ファイルの関連付け」ページに進み、設定を定義する。

JScrollPane 上の JTable を追加する

DirectoryApp.java のメイン・ウィンドウでは、メイン・コンテンツ・ペインに JFrame と JPanel を使用しています。 このアプリケーションでの JPanel は jContentPane という名前です。 jContentPane は、GridBagLayout と呼ばれるレイアウト・マネージャーのタイプを使用するように設定されています。 GridBagLayout は、ビジュアル・コンポーネントが占有できるセルのグリッドをベースにした強力なレイアウト方式です。 Java ビジュアル・エディターは、グリッド枠を表示することによって、GridBagLayout の作業を簡単にしています。 このエディターは、また、グリッドに新しいコンポーネントをドロップするときに配置マーカーを表示し、 さらに GridBagLayout 上でサイズ変更または移動を行うコンポーネント上でハンドルを表示します。

従業員のテーブル (javax.swing.JTable) を DirectoryApp.java ユーザー・インターフェースに追加するには、次のようにします。 次の手順を実行します。
  1. 「デザイン」ビューまたは 「Java Bean」ビューで、「jContentPane」を右クリックして、 「グリッドの表示」を選択する。 赤色の点線はグリッド枠を示し、数値がついた青色の丸印は行番号と列番号を示します。 たとえば、「New」ボタンは、行 1 (Y 軸グリッド)、列 3 (X 軸グリッド) のセルにあります。

    グラフィカル・キャンバス上のグリッド

  2. Java ビジュアル・エディター のパレットで、 「JScrollPane の JTable「JScrollPane の JTable」アイ
コン Swing コンポーネントを選択する。 このコンポーネントは、パレットの「Swing コンポーネント」ドロ ワーに分類されています。
    ヒント: デフォルトでは、このパレットはデザイン域の右側に縮小表示されます。 このパレットのサイズ変更したり、移動させたりすることができます。
  3. マウス・ポインターを以下のようにグリッドの列 0、行 1 のセル上に移動する。

    グリッド上のドロップ配置

    • グリッド上でマウス・ポインターを移動しているときに、 マウス・ポインターの位置に応じて、グリッドでの X 座標と Y 座標を知らせる 2 つの番号付きの四角をマウス・ポインターが示します。
    • マウス・ポインターをグリッド枠のすぐ上に置くと、新しい行と列を作成することができ、 既存の行と列には再番号付けが行われます。 この場合、マウス・ポインター上には黄色の四角が、 グリッドとグリッドの間には黄色のバーが現れてこの動作を示し、 黄色の列と行のラベルが新しい番号付けを示します。
  4. 列 0、行 1 のセルを左クリックして、JScrollPane と JTable を ドロップする。

    グリッドにドロップされたテーブル

JScrollPane と JTable をグリッドの複数の列と行に拡大する

ここで、JScrollPane (および子の JTable) を 3 列 2 行に拡大して、スペーシングとサイズ変更動作を改善します。 テーブルを複数の列と行に拡大するには、次のようにします。
  1. デザイン域または「Java Bean」ビューで、JScrollPane を選択する (これは追加したばかりなので、まだ選択されたままになっているはずです)。 JScrollPane の右と下に、小さな緑色の四角があることに注目してください。 このサイズ変更ハンドルを使用し、JScrollPane をドラッグして、複数の列と行に拡大します。
  2. JScrollPane の右側にある緑色のハンドルの上で左マウス・ボタンをクリックし、押したままにする。
  3. マウス・ポインターを、その位置が列 2、行 1 を示すまで右方向にドラッグする。 ダーク・グレーのシャドーも、 マウス・ボタンを放したときにコンポーネントが占有するセルの位置を示しています。

    3 列に拡大するようにドラッグされたテーブル

  4. マウス・ボタンを放す。 これで、JScrollPane が 3 列に拡大されました。
  5. 同様のプロセスを繰り返して、JScrollPane の下にあるハンドルをドラッグし、 以下のように JScrollPane を 2 行に拡大する。

    2 行に拡大するようにドラッグされたテーブル

JScrollPane 内の余白を GridBag 内でカスタマイズする

GridBagLayout マネージャーのもう 1 つの機能として、さまざまな制約を指定して、レイアウトをさらにカスタマイズできるというものがあります。 たとえば、以下の制約を指定できます。
  • アンカー: セルの中で、コンポーネントにアンカー方向を指定できる。 これは、ユーザーがアプリケーションのサイズ変更をしたときのコンポーネントの移動方法に影響します。たとえば、コンポーネントのアンカー位置を左上、中央左、中央、または右下に設定できます。
  • 塗りつぶし: コンポーネントが、1 つまたは複数のセル内で、水平方向、垂直方向、あるいはその両方向で、使用可能な場所を占有するように指定できる。
  • インセット: コンポーネントには、上、下、左、右に、固有のセル余白を与え、 コンポーネントとグリッドの端の間に余白をおくことができる。

JScrollPane のアンカー、塗りつぶし、およびインセットをカスタマイズするには、次のようにします。

  1. デザイン・ビューまたは「Java Bean」ビューで、「JScrollPane」を右クリックして、 「レイアウトのカスタマイズ」を選択する。

    jScrollPane 上のポップアップ・メニュー

    ヒント: さまざまなコンポーネントのレイアウトを選択して変更しているときに、 「レイアウトのカスタマイズ」ダイアログ・ボックスを開いたままにしておくことができます。 「レイアウトのカスタマイズ」ダイアログ・ボックスは、メニュー・バーの「レイアウトのカスタマイズ」ボタンをクリックして、いつでも開くことができます。

    「レイアウトのカスタマイズ」メニュー・アイコン

  2. 「レイアウトのカスタマイズ」ダイアログ・ボックスにある「コンポーネント」タブの「アンカー」の中央のボタンが押されていることを確認する。
  3. 水平に塗りつぶす」ボタンと「垂直に塗りつぶす」ボタンの両方が押されていることを確認する。
  4. アプリケーションにある他のビジュアル・コンポーネントと同様に、JScrollPane の左側に 15 ピクセルの左インセットを追加して余白を作る。

    「レイアウトのカスタマイズ」ダイアログ・ボックス

    たとえば、テーブルは、この時点で「Filter」ラベルと位置合わせが行われています。

    「レイアウトのカスタマイズ」ダイアログ・ボックス

新規の JTable を便利な値に名前変更して、単一行を選択するように設定する

後でこのテーブルの作業をするので、JTable インスタンスとこのインスタンスの getter メソッドの名前を変更しておくと便利です。 このテーブルの名前を変更するには、以下のようにします。
  1. 「Java Bean」ビューで、「jTable」コンポーネントを右クリックし、 ポップアップ・メニューから「フィールド名の変更」を選択する。

    jTable 上のポップアップ・メニュー

  2. employeesTable と入力して、「OK」をクリックする。 これで、JTable の名前が employeesTable となり、 それをインスタンス化するメソッドの名前は getEmployeesTable となりました。
  3. 単一行だけを選択できるよう、次のようにテーブルを設定する。
    1. デザイン・ビューで、「employeesTable」を選択する。
    2. 「プロパティー」ビューで、「selectionMode」プロパティーを選択し、それを「SINGLE_SELECTION」に設定する。

      JTable で SINGLE_SELECTION を表示する「プロパティー」ビュー

    3. DirectoryApp.java ファイルを保管する。

演習のチェックポイント

この演習では、ビジュアル・エディターを使用して、 既存のユーザー・インターフェースにテーブルを追加する方法を学習しました。 次に、そのレイアウト、位置決め、および余白をカスタマイズする方法を学習しました。

< 前へ | 次へ >