ステップ2: ユーザー・インタフェースの作成

Previous topic
前へ
Next topic
次へ

このセクションでは、コンボ・ボックス、テキスト・フィールドおよびボタンを含むユーザー・インタフェースを作成します。ユーザーがコンボ・ボックスにあるドロップダウン・リストからステータス・コードを選択して、ボタンをクリックすると、テキスト・フィールドにそのステータス・コードに関連するメッセージが表示されます。

このようなUIを作成するには、次の操作を行います。

フレームを作成するには、次のようにします。

  1. ナビゲータで、新規プロジェクト・ノード「Project1.jpr」をクリックして選択します。右クリックし、ポップアップ・メニューから「新規」を選択します。

    「新規」ギャラリが表示され、前回の選択内容が表示されます。

  2. 「カテゴリ」ツリーで、「Client Tier」ノードを開き、「Swing/AWT」を選択します。
  3. 「項目」リストで「フレーム」を選択し、「OK」をクリックします。
  4. 「新規フレーム」ダイアログで、デフォルトの設定のまま「OK」をクリックします。

    フレーム・クラスFrame1.javaに対する新規ノードがナビゲータに追加されます。このフレームの単純な初期UIが、ナビゲータの右側、JDeveloperの中央部に表示されます。UIエディタの右には、UIレイアウトの一部としてプロパティ・エディタも表示されます。

  5. ナビゲータで「Frame1.java」を右クリックし、ポップアップ・メニューから「コード・エディタ」を選択します。コード・エディタは .javaファイルのデフォルトのエディタなので、ノードをダブルクリックすることもできます。

    生成されたコードを見て、インポートされたクラスおよび作成されたJFrameクラスを確認します。

  6. ナビゲータで「Frame1.java」を右クリックし、ポップアップ・メニューから「UIエディタ」を選択します。

    UIエディタが再表示され、空のフレームが表示されます。

    プロパティ・インスペクタを確認してください。選択した項目の現在のプロパティが表示され、事前定義した属性およびクラス・メソッドを使用できます。

    プロパティ・インスペクタを閉じる、または明示的に開くには、メイン・メニューから「表示」->「プロパティ・インスペクタ」を選択します。インスペクトできるものがナビゲータで選択されず、UIエディタがアクティブでない場合は、空のパネルとともに開きます。

  7. 構造ウィンドウ(ナビゲータの下)では、フレームのUIコンポーネントを確認できます。+記号をクリックしてツリーを開くと、UIに追加するときにどのような変更が加えられるかを確認できます。
  8. プロパティ・インスペクタで、「プロパティ」タブを選択し、「title」プロパティを探して、その右のフィールドに「ステータス・コードの表示」と入力します。

    [Enter]を押すか、または別のプロパティやインスペクタの外をクリックすると、UIのタイトル・バーが更新され、入力したタイトルが表示されます。色またはサイズなどフレームのその他のプロパティは、プロパティ・インスペクタを使用して変更できます。

  9. コンポーネント・パレットを使用して、UIの設計を続けます。パレットが表示されていない場合は、メイン・メニューから「表示」->「コンポーネント・パレット」を選択します。(このメニュー項目がすでにチェックされている場合は、パレットが開いています。プロパティ・インスペクタの上を探してください。)

    コンポーネント・パレットのドロップダウン・リストでは、使用可能なリストからパレットを選択できます。

  10. 「Swing」パレットが現在選択されていない場合は、ドロップダウン・リストから選択し、Java Swing UIコンポーネントを使用してUIをビルドします。

    コンポーネント・パレットでは、アイコンのみを表示するか、またはテキスト・ラベルとともにアイコンを表示するかを選択できます。ラベルを表示すると、アイコンはアルファベット順に表示されます。この2種類の表示を切り替えるには、パレットで右クリックし、ポップアップ・メニューから「アイコン・ビュー」または「リスト・ビュー」を選択します。このチュートリアルでは、リスト・ビューで作業すると便利です。

次に、いくつかの項目をUIに追加します。

コンボ・ボックス、テキスト・フィールドおよびボタンを作成するには、次のようにします。

  1. Swingコンポーネント・パレットから、「JComboBox」アイコン(JComboBox icon)をクリックし、UIエディタのフレーム内をクリックします。

    どこをクリックしても、空のコンボ・ボックスがフレームに表示されます。

  2. また、コンポーネント・パレットでアイコンを選択してから、構造ウィンドウでUI(作成中のフレームでthisというラベルが付いているUI)のノードを選択してもコンポーネントを追加できます。

    すべてのコンポーネントがUIエディタに表示されるわけではないので、この方法はより詳細なUIの作成方法となります。

  3. コンボ・ボックスをクリックし、「ステップ5:  アプリケーションのコンパイルと実行」の図を確認して図のコンボ・ボックスと同じ位置までドラッグして、コンボ・ボックスの位置およびサイズを調整します。

    コンボ・ボックスの位置を変更するには、中央でつかみドラッグします。サイズを変更するには、クリックしてグラッブ・バーを表示し、任意のグラッブ・バーをクリックして、マウス・ポインタにより示される2つの矢印のうちのいずれかの方向にボックスのサイズを変更します。

  4. 次に、テキスト・フィールドをフレームに追加します。コンポーネント・パレットで右にスクロールし、「JTextField」アイコン(JTextField icon)を選択してから、フレーム内をクリックします。
  5. テキスト・フィールドが表示されたら、コンボ・ボックスと同様に位置とサイズを変更し、フレームが「ステップ5:  アプリケーションのコンパイルと実行」の例と同じに見えるように調整します。
  6. 次に、ボタンをUIに追加します。コンポーネント・パレットで、「JButton」アイコン(JButton icon)を選択し、フレーム内を再びクリックします。2つのコンポーネントと同様に、例に合せてボタンの位置を調整します。
  7. 次に、コンボ・ボックスにラベルを作成します。「JLabel」アイコン(JLabel icon)を選択し、フレーム内をクリックします。
  8. 作成したJLabelをフレームで選択し、プロパティ・インスペクタに戻って「プロパティ」タブを選択し、ラベルのテキストを「ステータス・コードの選択:」に変更します。

    ラベルにテキストを入力するには、「text」プロパティの右のフィールドに入力します。

  9. ここで、フレーム・ラベルがコンボ・ボックスの左に表示されるように、サイズおよび位置を調整します。
  10. テキスト・フィールドに対するラベルを作成するための最後の2つのステップを繰り返します。ただし、ここでは「text」プロパティを「ステータスの結果:」に変更します。
  11. 次に、ボタンのテキストを変更しますが、ここでは直接コード内で変更します。ナビゲータのすぐ上にあるドキュメント・バーでButton in the document bar for Frame1.javaをクリックし、Frame1.javaのコード・エディタを最前面に表示します。

    ドキュメント・バーを使用すると、エディタに現在開いているファイルのすべてのインスタンスを、迅速かつ容易に切り替えられます。ドキュメント・バーを明示的に開く、または閉じるには、メイン・メニューから「表示」->「ドキュメント・バー」を選択します。

    このチュートリアルでは、Frame1.javaのコード・エディタを2回開いているので、表示には番号2が付いています。

  12. コード・エディタで、次の行を検索します。

    jButton1.setText("jButton1");

    jButton1OKに変更します。

    行を迅速に検索するには、上方または下方のインクリメンタル検索を使用できます。コード・エディタにカーソルを置き、メイン・メニューで「検索」->「下にインクリメンタル検索」または「検索」->「上にインクリメンタル検索」を選択します。表示された検索ボックスに、検索文字列を入力します。入力する文字が増えるのに合せて、現在検索ボックスにあるテキストの次の出現箇所にカーソルが移動します。検索では、大/小文字が区別されます。

  13. UIエディタに戻り、フレームでボタンの上のテキストが「OK」に変更されていることを確認します。

次に、ソース・コードを編集し、コンボ・ボックスに表示されるステータス・コードを追加します。

ステータス・コードを追加するには、次のようにします。

  1. コード・エディタに戻り、jbInit()関数を見つけます。
  2. 左カッコ、または左カッコの前か後ろをクリックします。

    左カッコが別の色でハイライト表示されます。このとき、この左カッコに対応する右カッコも同じ色でハイライト表示されます。右カッコが見えない場合は、見える位置まで下にスクロールしてください。このカッコの一致機能は、条件文が長かったりネストしているため、すべてのカッコが正しく一致しているか確認するときに、非常に役に立ちます。エディタにより一致しないカッコが発見されると、別の色でハイライト表示されます。

    この機能を含むハイライト表示機能は、「設定」ダイアログからカスタマイズできます。メイン・メニューから「ツール」->「設定」を選択します。「コード・エディタ」ノードを開き、「構文の色指定」を選択します。「使用可能なスタイル」リストで現在選択している項目について、前景色および背景色を選択します。

  3. コード・エディタで、this.getContentPane().add(jLabel2, null);行の後ろに次の行を追加します。

    // Status Code jComboBox1.addItem("0"); jComboBox1.addItem("1"); jComboBox1.addItem("2"); jComboBox1.addItem("3"); jComboBox1.addItem("4"); jComboBox1.addItem("5"); jComboBox1.addItem("6"); jComboBox1.addItem("7"); jComboBox1.addItem("8"); jComboBox1.addItem("9"); jComboBox1.addItem("10");

    このコードをハイライトして選択し、[Ctrl]を押しながら[C]、続いて[Ctrl]を押しながら[V](Windowsの場合)を押すと、コード・エディタに直接このコードをコピーできます。

    これは、コンボ・ボックスに表示される注文ステータス・コードのコードです。引用符で閉じられた文字列はすべて同じ色で表示され、コメント行は別の色で表示されます。カッコの一致と同様に、この設定は「設定」ダイアログの「構文の色指定」ページで変更できます。Java構文のハイライト表示を変更するには、「言語」リストで「Java」を選択します。

  4. 次に進む前に、メイン・メニューから「ファイル」->「すべて保存」を選択し、変更を保存します。

次に、ユーザーが「OK」をクリックすると、ステータス・コードに関連するメッセージが表示されるようなイベントを作成します。

イベントを作成するには、次のようにします。

  1. UIエディタに戻り、「OK」ボタンを選択して、プロパティ・インスペクタで「イベント」タブを選択します。
  2. リストの上部で、actionPerformedイベントを探し、その右のフィールドにdisplayItと入力します。
  3. [Enter]を押すと、コード・エディタが自動的に表示され、displayIt()メソッドのカッコの間にコードを追加するために、カーソルが適切な場所に置かれるはずです。コード・エディタが表示されない場合は、コード・エディタを開き、次のメソッドのコードまで下にスクロールします。

    void displayIt(ActionEvent e) { }
  4. カッコの間に次のコードを追加します。

    if (jComboBox1.getSelectedItem()== "0") { jTextField1.setText("Not fully entered"); } if (jComboBox1.getSelectedItem()== "1") { jTextField1.setText("Entered"); } if (jComboBox1.getSelectedItem()== "2") { jTextField1.setText("Canceled - bad credit"); } if (jComboBox1.getSelectedItem()== "3") { jTextField1.setText("Canceled - by customer"); } if (jComboBox1.getSelectedItem()== "4") { jTextField1.setText("Shipped - whole order"); } if (jComboBox1.getSelectedItem()== "5") { jTextField1.setText("Shipped - replacement items"); } if (jComboBox1.getSelectedItem()== "6") { jTextField1.setText("Shipped - backlog on items"); } if (jComboBox1.getSelectedItem()== "7") { jTextField1.setText("Shipped - special delivery"); } if (jComboBox1.getSelectedItem()== "8") { jTextField1.setText("Shipped - billed"); } if (jComboBox1.getSelectedItem()== "9") { jTextField1.setText("Shipped - payment plan"); } if (jComboBox1.getSelectedItem()== "10") { jTextField1.setText("Shipped - paid"); }
  5. UIエディタに戻り、JTextFieldコンポーネントを選択します。
  6. プロパティ・インスペクタで「プロパティ」タブを選択し、「text」プロパティを探してテキストjTextField1を削除します。
  7. 「editable」プロパティを探し、「False」に変更します。

    「editable」プロパティを「False」に設定すると、ユーザーはこのフィールドを編集できなくなります。この例では、ユーザーがコンボ・ボックスからステータス・コードを選択すると、制御が「OK」ボタンに移ることになります。

  8. 次に進む前に、作業内容を保存します。

ユーザー・インタフェースを作成したので、次はこのUIを実行するため、これを基にアプリケーションを作成します。このためには、「ステップ3:  UI用のアプリケーションの作成」に進んでください。