// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= GUIビルドの概要
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: GUIビルドの概要 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, GUIビルドの概要

執筆: Saleem GulおよびTomas Pavek

この初心者向けチュートリアルでは、単純なグラフィカル・ユーザー・インタフェースを作成し、基本的なバックエンド機能を追加する方法を示します。具体的には、Swingフォーム内のボタンとフィールドの動作をコーディングする方法を示します。

GUIのレイアウトとデザインを行い、ボタンとテキスト・フィールドをいくつか追加します。テキスト・フィールドはユーザー入力を受け取るために使用し、またプログラム出力の表示にも使用します。ボタンは、フロント・エンドに組み込まれた機能を開始します。作成するアプリケーションは、単純なものですが機能的な電卓です。

GUIビルダーのデザイン機能に関する一般的な説明(様々なデザイン機能のビデオによるデモを含む)については、link:quickstart-gui.html[+NetBeans IDEでのSwing GUIのデザイン+]を参照してください。

*予想される所要時間: 20分*

== 内容

image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、NetBeans IDE 6.9以降に適用されます"]

* <<Exercise_1,課題1: プロジェクトの作成>>
* <<Exercise_2,課題2: フロント・エンドのビルド>>
* <<Exercise_3,課題3: 機能の追加>>
* <<Exercise_4,課題4: プログラムの実行>>
* <<how,イベント処理の方法>>
* <<seealso,関連項目>>

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

|===
|ソフトウェアまたはリソース |必須バージョン 

|link:http://netbeans.org/downloads/[+NetBeans IDEとJava SE+] |バージョン6.9以降 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |バージョン6、7または8 
|===


== 課題1: プロジェクトの作成

最初の手順では、開発するアプリケーション用のIDEプロジェクトを作成します。プロジェクトの名前は ``NumberAddition`` にします。

1. 「 ``ファイル`` 」>「 ``新規プロジェクト`` 」を選択します。または、IDEツールバーにある「新規プロジェクト」アイコンをクリックして選択することもできます。
2. 「カテゴリ」ペインで「Java」ノードを選択します。「プロジェクト」ペインで「Javaアプリケーション」を選択します。「次」をクリックします。
3. 「プロジェクト名」フィールドに「`NumberAddition`」と入力し、プロジェクトの場所として(たとえば、ホーム・ディレクトリ内の)パスを指定します。
4. (オプション)「ライブラリの格納用に専用フォルダを使用」チェックボックスを選択し、ライブラリ・フォルダの場所を指定します。詳細は、_NetBeans IDEによるアプリケーションの開発_のlink:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG455[+他のユーザーとのライブラリの共有+]を参照してください。
5. 「メイン・クラスの作成」チェックボックスが選択されている場合は選択を解除します。
6. 「終了」をクリックします。


== 課題2: フロント・エンドのビルド

インタフェースのビルドに進むには、他の必要なGUIコンポーネントを入れるJavaコンテナを作成する必要があります。この手順では、`JFrame`コンポーネントを使用してコンテナを作成します。コンテナは新しいパッケージに入れます。このパッケージは「ソース・パッケージ」ノード内に表示されます。


=== 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ビルダーを使用したことがない場合は、link:quickstart-gui.html[+NetBeans IDEでのSwing GUIのデザイン+]・チュートリアルにある有用なコンポーネントの配置に関する説明を参照してください。

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

image::images/Figure1.png[]

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

1. まず、パレットの「Swingコンテナ」カテゴリから「パネル」を選択し、それをJFrameにドロップします。
2. JPanelが強調表示されている状態で、「プロパティ」ウィンドウに移動し、「境界線」の横の省略符号(...)ボタンをクリックして、境界線スタイルを選択します。
3. 「境界線」ダイアログで、リストから「TitledBorder」を選択し、「タイトル」フィールドに「`Number Addition`」と入力します。「OK」をクリックして変更を保存し、ダイアログを閉じます。
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は次のスクリーンショットのようになります。

image::images/Figure2.png[]


== 課題3: 機能の追加

この課題では、「Add」、「Clear」、「Exit」の各ボタンに機能を追加します。`jTextField1`ボックスと`jTextField2`ボックスをユーザー入力用に、`jTextField3`をプログラム出力用に使用して、単純な電卓を作成します。それでは始めましょう。


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

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

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

[source,java]
----

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

[start=3]
. 「Exit」ボタンで行う処理のコードを追加します。TODOの行を`System.exit(0);`に置き換えます。完成した「Exit」ボタンのコードは次のようになります。

[source,java]
----

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


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

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

[source,java]
----

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`に配置します。
それでは始めましょう。


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

[source,java]
----

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt){
    // First we define float variables.
    float num1, num2, result;
    // We have to parse the text to a type float.
    num1 = Float.parseFloat(jTextField1.getText());
    num2 = Float.parseFloat(jTextField2.getText());
   // Now we can perform the addition.
    result = num1+num2;
    // We will now pass the value of result to jTextField3.
    // At the same time, we are going to
    // change the value of result from a float to a string.
    jTextField3.setText(String.valueOf(result));
                    }
----

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


== 課題4: プログラムの実行

*IDEでプログラムを実行するには:*

1. 「実行」>「メイン・プロジェクトの実行」を選択します(または[F6]を押します)。

*注意:* プロジェクトNumberAdditionでメイン・クラスが設定されていないことを通知するウィンドウが表示された場合は、同じウィンドウで ``my.NumberAddition.NumberAdditionUI`` をメイン・クラスとして選択し、「OK」をクリックします。

*IDEの外部でプログラムを実行するには:*

1. 「実行」>メイン・プロジェクトを消去してビルド([Shift]-[F11])を選択し、アプリケーションJARファイルをビルドします。
2. システムのファイル・エクスプローラまたはファイル・マネージャを使用し、`NumberAddition/dist`ディレクトリに移動します。

*注意:*  ``NumberAddition`` プロジェクト・ディレクトリの場所は、<<Exercise_1,課題1: プロジェクトの作成>>の項でプロジェクトを作成するときにステップ3で指定したパスによって決まります。


[start=3]
. `NumberAddition.jar`ファイルをダブルクリックします。

数秒後、アプリケーションが起動するはずです。

*注意:* JARファイルをダブルクリックしてもアプリケーションが起動しない場合、使用しているオペレーティング・システムに対応するJARファイルの関連付けに関する情報をlink:../../articles/javase-deploy.html#troubleshooting[+この記事+]で確認してください。

アプリケーションは、コマンド行からも起動できます。

*コマンド行からアプリケーションを起動するには:*

1. システムで、コマンド・プロンプトまたはターミナル・ウィンドウを開きます。
2. コマンド・プロンプトで、ディレクトリを`NumberAddition/dist`ディレクトリに変更します。
3. コマンド行に、次の文を入力します。

[source,java]
----

java -jar  NumberAddition.jar
----

*注意:* アプリケーションを実行する前に、 ``my.NumberAddition.NumberAdditionUI`` がメイン・クラスとして設定されていることを確認してください。これを確認するには、「プロジェクト」ペインで「NumberAddition」プロジェクト・ノードを右クリックし、ポップアップ・メニューから「プロパティ」を選択して、「プロジェクト・プロパティ」ダイアログ・ボックスで「実行」カテゴリを選択します。「メイン・クラス」フィールドに「 ``my.numberaddition.NumberAdditionUI`` 」と表示されます。


== イベント処理の方法

このチュートリアルでは、単純なボタン・イベントに応答する方法を示しました。アプリケーションで応答できるイベントは他にも多数あります。IDEでは、GUIコンポーネントで処理できるイベントのリストを簡単に確認できます。

1. エディタ内のファイル`NumberAdditionUI.java`に戻ります。「デザイン」タブをクリックして、GUIのレイアウトをGUIビルダーに表示します。
2. 任意のGUIコンポーネントを右クリックし、ポップアップ・メニューから「イベント」を選択します。現時点では、メニューの内容を確認するのみで、何も選択しません。
3. 「ウィンドウ」メニューから「プロパティ」を選択することもできます。「プロパティ」ウィンドウで「イベント」タブをクリックします。「イベント」タブでは、現在アクティブなGUIコンポーネントに関連付けられているイベント・ハンドラを表示および編集できます。
4. アプリケーションは、キーの押下、マウスのクリック、ダブルクリック、トリプル・クリック、マウスの移動、ウィンドウのサイズやフォーカスの変更に応答できます。これらすべてのイベント・ハンドラを「イベント」メニューから作成できます。最もよく使用するイベントはActionイベントです。(link:http://java.sun.com/docs/books/tutorial/uiswing/events/generalrules.html#twokinds[+イベント処理のベスト・プラクティス+]については、Sunのlink:http://java.sun.com/docs/books/tutorial/uiswing/events/index.html[+イベントに関するJavaチュートリアル+]を参照。)

イベント処理はどのように機能するのでしょうか。「イベント」メニューからイベントを選択するたびに、IDEによって、いわゆるイベント・リスナーが自動的に作成され、コンポーネントに関連付けられます。次の手順に従って、イベント処理の方法を確認します。

1. エディタ内のファイル`NumberAdditionUI.java`に戻ります。「ソース」タブをクリックしてGUIのソースを表示します。
2. 下にスクロールし、実装した`jButton1ActionPerformed()`、`jButton2ActionPerformed()`、`jButton3ActionPerformed()`の各メソッドを確認します。これらのメソッドはイベント・ハンドラと呼ばれます。
3. 次に`initComponents()`というメソッドまでスクロールします。このメソッドが表示されない場合は、「`生成されたコード`」と表示されている行を探し、その横の+記号をクリックして、縮小されている`initComponents()`メソッドを展開します。
4. `initComponents()`メソッドは、青いブロックで囲まれています。このコードはIDEによって自動的に生成されたものであり、編集できません。
5. 次に`initComponents()`メソッドの中を見てみます。このメソッドには、GUIコンポーネントを初期化し、フォームに配置するコードが含まれます。このコードは、デザイン・ビューでコンポーネントを配置し、編集したときに自動的に生成、更新されています。
6. `initComponents()`内で次のコードまでスクロールします。

[source,java]
----

jButton3.setText("Exit");
jButton3.addActionListener(new java.awt.event.ActionListener() {
    public void actionPerformed(java.awt.event.ActionEvent evt) {
           jButton3ActionPerformed(evt);
    }
            });
----

この箇所で、GUIコンポーネントにイベント・リスナー・オブジェクトが追加されています。この例では、ActionListenerを`jButton3`に登録しています。ActionListenerインタフェースにはActionEventオブジェクトを受け取るactionPerformedメソッドがあり、これは`jButton3ActionPerformed`イベント・ハンドラをコールすることで実装されています。このボタンは、アクション・イベントを待機しています。ボタンがクリックされるとActionEventが生成され、リスナーのactionPerformedメソッドに渡されます。このメソッドによって、このイベントのイベント・ハンドラに入力したコードが実行されます。

一般に、応答できるためには、対話型のGUIコンポーネントがイベント・リスナーに登録され、イベント・ハンドラを実装する必要があります。イベント・リスナーの関連付けはNetBeans IDEによって自動的に行われるので、開発者はそのイベントでトリガーする実際のビジネス・ロジックの実装に専念できます。

link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20GUI%20Building[+このチュートリアルに関するご意見をお寄せください+]


== 関連項目

* _NetBeans IDEによるアプリケーションの開発_のlink:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+Java GUIの実装+]
* link:quickstart-gui.html[+NetBeans IDEでのSwing GUIのデザイン+]
* link:gui-image-display.html[+GUIアプリケーションでのイメージの処理+]
* link:hibernate-java-se.html[+Java SwingアプリケーションでのHibernateの使用+]
* link:../../trails/matisse.html[+Java GUIアプリケーションの学習+]
* link:../../trails/java-se.html[+一般的なJava開発の学習+]
* link:http://wiki.netbeans.org/wiki/view/NetBeansUserFAQ#section-NetBeansUserFAQ-GUIEditorMatisse[+GUIビルダー - FAQ+]
* link:http://download.oracle.com/javase/tutorial/index.html[+The Java(tm) Tutorials+]のlink:http://download.oracle.com/javase/tutorial/uiswing/events/index.html[+Lesson: Writing Event Listeners+]。