目次

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

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

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

1. 「プロジェクト」ウィンドウで、「NumberAddition」ノードを右クリックし、「新規」>「その他」を選択します。
2. 「新規ファイル」ダイアログボックスで、「Swing GUI フォーム」カテゴリおよび「JFrame フォーム」のファイルの種類を選択します。「次へ」をクリックします。
3. クラス名として「NumberAdditionUI」と入力します。
4. パッケージとして「my.numberaddition」と入力します。
5. 「完了」をクリックします。

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

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

次にパレットを使用してアプリケーションのフロントエンドに JPanel を挿入します。次に JLabel を 3 つ、JTextField を 3 つ、JButton を 3 つ追加します。以前に GUI ビルダーを使用したことがない場合は、「NetBeans IDE での Swing GUI のデザイン」のチュートリアルにある有用なコンポーネントの配置に関する説明を参照してください。

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

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

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

   private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
       //TODO 処理コードをここに追加します:
                   }

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」ボタン (jButton2) を右クリックします。ポップアップメニューから「イベント」>「Action」>「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));
                       }

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