ステップ2: ユーザー・インタフェースの作成 |
![]() 前へ |
![]() 次へ |
このセクションでは、コンボ・ボックス、テキスト・フィールドおよびボタンを含むユーザー・インタフェースを作成します。ユーザーがコンボ・ボックスにあるドロップダウン・リストからステータス・コードを選択して、ボタンをクリックすると、テキスト・フィールドにそのステータス・コードに関連するメッセージが表示されます。
このようなUIを作成するには、次の操作を行います。
フレームを作成するには、次のようにします。
「Project1.jpr」
をクリックして選択します。右クリックし、ポップアップ・メニューから「新規」を選択します。
「新規」ギャラリが表示され、前回の選択内容が表示されます。
フレーム・クラスFrame1.java
に対する新規ノードがナビゲータに追加されます。このフレームの単純な初期UIが、ナビゲータの右側、JDeveloperの中央部に表示されます。UIエディタの右には、UIレイアウトの一部としてプロパティ・エディタも表示されます。
「Frame1.java」
を右クリックし、ポップアップ・メニューから「コード・エディタ」を選択します。コード・エディタは .java
ファイルのデフォルトのエディタなので、ノードをダブルクリックすることもできます。生成されたコードを見て、インポートされたクラスおよび作成されたJFrameクラスを確認します。
「Frame1.java」
を右クリックし、ポップアップ・メニューから「UIエディタ」を選択します。
UIエディタが再表示され、空のフレームが表示されます。
プロパティ・インスペクタを確認してください。選択した項目の現在のプロパティが表示され、事前定義した属性およびクラス・メソッドを使用できます。
プロパティ・インスペクタを閉じる、または明示的に開くには、メイン・メニューから「表示」->「プロパティ・インスペクタ」を選択します。インスペクトできるものがナビゲータで選択されず、UIエディタがアクティブでない場合は、空のパネルとともに開きます。
[Enter]を押すか、または別のプロパティやインスペクタの外をクリックすると、UIのタイトル・バーが更新され、入力したタイトルが表示されます。色またはサイズなどフレームのその他のプロパティは、プロパティ・インスペクタを使用して変更できます。
コンポーネント・パレットのドロップダウン・リストでは、使用可能なリストからパレットを選択できます。
コンポーネント・パレットでは、アイコンのみを表示するか、またはテキスト・ラベルとともにアイコンを表示するかを選択できます。ラベルを表示すると、アイコンはアルファベット順に表示されます。この2種類の表示を切り替えるには、パレットで右クリックし、ポップアップ・メニューから「アイコン・ビュー」または「リスト・ビュー」を選択します。このチュートリアルでは、リスト・ビューで作業すると便利です。
次に、いくつかの項目をUIに追加します。
コンボ・ボックス、テキスト・フィールドおよびボタンを作成するには、次のようにします。
どこをクリックしても、空のコンボ・ボックスがフレームに表示されます。
this
というラベルが付いているUI)のノードを選択してもコンポーネントを追加できます。
すべてのコンポーネントがUIエディタに表示されるわけではないので、この方法はより詳細なUIの作成方法となります。
コンボ・ボックスの位置を変更するには、中央でつかみドラッグします。サイズを変更するには、クリックしてグラッブ・バーを表示し、任意のグラッブ・バーをクリックして、マウス・ポインタにより示される2つの矢印のうちのいずれかの方向にボックスのサイズを変更します。
ラベルにテキストを入力するには、「text」プロパティの右のフィールドに入力します。
Frame1.java
のコード・エディタを最前面に表示します。
ドキュメント・バーを使用すると、エディタに現在開いているファイルのすべてのインスタンスを、迅速かつ容易に切り替えられます。ドキュメント・バーを明示的に開く、または閉じるには、メイン・メニューから「表示」->「ドキュメント・バー」を選択します。
このチュートリアルでは、Frame1.java
のコード・エディタを2回開いているので、表示には番号2が付いています。
jButton1.setText("jButton1");
jButton1
をOK
に変更します。
行を迅速に検索するには、上方または下方のインクリメンタル検索を使用できます。コード・エディタにカーソルを置き、メイン・メニューで「検索」->「下にインクリメンタル検索」または「検索」->「上にインクリメンタル検索」を選択します。表示された検索ボックスに、検索文字列を入力します。入力する文字が増えるのに合せて、現在検索ボックスにあるテキストの次の出現箇所にカーソルが移動します。検索では、大/小文字が区別されます。
次に、ソース・コードを編集し、コンボ・ボックスに表示されるステータス・コードを追加します。
ステータス・コードを追加するには、次のようにします。
jbInit()
関数を見つけます。左カッコが別の色でハイライト表示されます。このとき、この左カッコに対応する右カッコも同じ色でハイライト表示されます。右カッコが見えない場合は、見える位置まで下にスクロールしてください。このカッコの一致機能は、条件文が長かったりネストしているため、すべてのカッコが正しく一致しているか確認するときに、非常に役に立ちます。エディタにより一致しないカッコが発見されると、別の色でハイライト表示されます。
この機能を含むハイライト表示機能は、「設定」ダイアログからカスタマイズできます。メイン・メニューから「ツール」->「設定」を選択します。「コード・エディタ」ノードを開き、「構文の色指定」を選択します。「使用可能なスタイル」リストで現在選択している項目について、前景色および背景色を選択します。
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」を選択します。
次に、ユーザーが「OK」をクリックすると、ステータス・コードに関連するメッセージが表示されるようなイベントを作成します。
イベントを作成するには、次のようにします。
displayIt
と入力します。
displayIt()
メソッドのカッコの間にコードを追加するために、カーソルが適切な場所に置かれるはずです。コード・エディタが表示されない場合は、コード・エディタを開き、次のメソッドのコードまで下にスクロールします。
void displayIt(ActionEvent e)
{
}
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");
}
jTextField1
を削除します。「editable」プロパティを「False」に設定すると、ユーザーはこのフィールドを編集できなくなります。この例では、ユーザーがコンボ・ボックスからステータス・コードを選択すると、制御が「OK」ボタンに移ることになります。
ユーザー・インタフェースを作成したので、次はこのUIを実行するため、これを基にアプリケーションを作成します。このためには、「ステップ3: UI用のアプリケーションの作成」に進んでください。