目次

• 課題 1: プロジェクトの作成
• 課題 2: フロントエンドの構築
• 課題 3: 機能の追加
• 課題 4: プログラムの実行
• イベント処理の方法
• 関連項目

このチュートリアルに従うには、次のソフトウェアとリソースが必要です。

JFrame コンテナを作成します。

1. 「プロジェクト」ウィンドウで「NumberAddition」ノードを右クリックし、「新規」>「JFrame フォーム」を選択します。
2. クラス名として「NumberAdditionUI」と入力します。
3. パッケージとして「my.numberaddition」と入力します。
4. 「完了」をクリックします。

IDE によって、NumberAddition アプリケーション内に NumberAdditionUI フォームと NumberAdditionUI クラスが作成され、NumberAdditionUI フォームが GUI ビルダー内で開きます。my.NumberAddition パッケージがデフォルトのパッケージに置き換わります。

コンポーネントの追加: フロントエンドの作成

次にパレットを使用してアプリケーションのフロントエンドに JPanel を挿入します。次に JLabel を 3 つ、JTextField を 3 つ、JButton を 3 つ追加します。GUI ビルダーの使用方法については、「NetBeans IDE での GUI 構築」のチュートリアルにあるコンポーネントの配置に関する説明を参照してください。

前述のコンポーネントをドラッグして配置したら、JFrame は次のスクリーンショットのようになります。

「パレット」ウィンドウが IDE の右上に表示されない場合は、「ウィンドウ」>「パレット」を選択します。

1. パレットで JPanel を選択し、JFrame 内にドロップします。
2. JPanel が強調表示されている状態で「プロパティー」ウィンドウの「ボーダー」の横の省略符号 (...) ボタンをクリックし、ボーダースタイルを選択します。
3. 「ボーダー」ダイアログで、リストから「TitledBorder」を選択し、「タイトル」フィールドに「Number Addition」と入力します。「了解」をクリックして変更を保存し、ダイアログを閉じます。
4. この時点で、スクリーンショットのように「Number Addition」というタイトルの空の JFrame が表示されます。スクリーンショットを確認し、上記のように JLabel を 3 つ、JTextField を 3 つ、JButton を 3 つ追加します。

コンポーネントの名前変更

この手順では、JFrame に追加したコンポーネントの表示テキストを変更します。

1. jLabel1 をダブルクリックして text プロパティーを First Number に変更します。
2. jLabel2 をダブルクリックして text を Second Number に変更します。
3. jLabel3 をダブルクリックして text を Result に変更します。
4. jTextField1 からサンプルテキストを削除します。表示テキストを編集可能にするには、テキストフィールドをクリックし、しばらくしてからもう一度クリックします。jTextField1 を元のサイズに戻す必要がある場合があります。jTextField2 と jTextField3 についてこの手順を繰り返します。
5. jButton1 の表示テキストを Clear に変更します。ボタンのテキストを編集するには、ボタンを右クリックして「テキストを編集」を選択します。ボタンをクリックし、しばらくしてからもう一度クリックすることもできます。
6. jButton2 の表示テキストを Add に変更します。
7. jButton3 の表示テキストを Exit に変更します。

完成した GUI は次のスクリーンショットのようになります。

「Exit」ボタンの機能の追加

ボタンに機能を追加するには、イベントに応答できるようにそれぞれにイベントハンドラを割り当てます。この例では、マウスまたはキーボードを使用してボタンがクリックされたときを認識できる必要があります。そこで ActionEvent に応答する ActionListener を使用します。

1. 「Exit」ボタンを右クリックします。ポップアップメニューから「イベント」>「アクション」>「ActionPerformed」を選択します。メニューには、応答できるイベントがほかにも多数あります。actionPerformed イベントを選択すると、「Exit」ボタンに ActionListener が自動的に追加され、リスナーの actionPerformed メソッドを処理するためのハンドラメソッドが生成されます。
2. 「ソースコード」ウィンドウが開き、マウスまたはキーボードを使用してボタンがクリックされたときに実行するアクションを実装する場所までスクロールされます。「ソースコード」ウィンドウには次の行が表示されます。

   private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
       //TODO: Add your handling code here:
                   }

3. 「Exit」ボタンで行う処理のコードを追加します。上記のコードの TODO 行を削除して、代わりに「System.exit(0);」と入力します。完成した「Exit」ボタンのコードは次のようになります。

   private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
       System.exit(0);
                   } 

「Clear」ボタンの機能の追加

1. 作業領域の上部にある「デザイン」タブをクリックし、フォームのデザインに戻ります。
2. 「Clear」ボタン (jButton1) を右クリックします。ポップアップメニューから「イベント」>「アクション」>「actionPerformed」を選択します。
3. 「Clear」ボタンでは、jTextField のテキストをすべて消去します。そのためには、前述のようにコードを追加します。完成したソースコードは次のようになります。

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){
    jTextField1.setText("");
    jTextField2.setText("");
    jTextField3.setText("");
                }

上記のコードでは、3 つの JTextField 内の既存のテキストを空白で上書きすることで、テキストを空にしています。

「Add」ボタンの機能の追加

「Add」ボタンでは、3 つのアクションを実行します。

1. jTextField1 と jTextField2 からユーザー入力を受け取り、入力内容を文字列型から浮動小数点に変換します。
2. 2 つの数値を加算します。
3. その和を文字列型に変換してjTextField3に挿入します。

1. 作業領域の上部にある「デザイン」タブをクリックし、フォームのデザインに戻ります。
2. 「Add」ボタン (jButton3) を右クリックします。ポップアップメニューから「イベント」>「アクション」>「actionPerformed」を選択します。
3. 「Add」ボタンが機能するようにコードを追加します。完成したソースコードは次のようになります。

   private void jButton2ActionPerformed(java.awt.event.ActionEvent evt){
       // 浮動小数点の変数の定義
       float num1, num2, result;
       // テキストを浮動小数点に解析
       num1 = Float.parseFloat(jTextField1.getText());
       num2 = Float.parseFloat(jTextField2.getText());
       // 加算
       result = num1+num2;
       // 結果の値を jTextField3 に渡す
       // 同時に結果の値を浮動小数点から
       // 文字列に変換
       jTextField3.setText(String.valueOf(result));
                       }

これでプログラムは完成なので、構築して実行し、動作するところを確認できます。