| // |
| // 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. |
| // |
| |
| = NetBeans IDEでのビジュアル・デバッガの使用 |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: NetBeans IDEでのビジュアル・デバッガの使用 - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, NetBeans IDEでのビジュアル・デバッガの使用 |
| |
| このドキュメントでは、ビジュアル・デバッガを使用して、GUIアプリケーション内のビジュアル要素のためのコードを見つけたり、デバッグしたりしやすくする方法について説明します。ビジュアル・デバッガは、JavaおよびJavaFX GUIアプリケーションで使用できます。 |
| |
| このドキュメントでは、ビジュアル・デバッガを使用してAnagram Gameサンプル・プロジェクトを調査します。このドキュメントは、アプリケーションのGUIスナップショットを作成した後、そのスナップショットを操作してソース・コードを見つけたり、イベントにリスナーを追加したり、GUIコンポーネントのイベント・ログを表示したりする方法を示します。 |
| |
| |
| image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます"] |
| |
| |
| *このチュートリアルに従うには、次のソフトウェアとリソースが必要です。* |
| |
| |=== |
| |ソフトウェアまたはリソース |必須バージョン |
| |
| |link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2, 7.3, 7.4, 8.0 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |バージョン7または8 |
| |=== |
| |
| *JUnitについての注意。*IDEをインストールした際にJUnitライブラリがインストールされなかった場合、アプリケーションのデバッグ時に、不足するリソースを解決してJUnitをインストールするよう求めるメッセージが表示されます。 |
| |
| |
| == GUIスナップショットの作成 |
| |
| このチュートリアルでは、新規プロジェクト・ウィザードでサンプルとして使用できる単純なGUIを備えたJavaデスクトップ・アプリケーションであるAnagram Gameサンプル・アプリケーションを使用します。プロジェクトを作成した後に、デバッグ・セッションを開始し、アプリケーションのGUIスナップショットを作成します。 |
| |
| 1. メイン・メニューから「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択して、新規プロジェクト・ウィザードを開きます。 |
| 2. 「サンプル」>「Java」カテゴリで「Anagram Game」を選択します。「次」をクリックします。 |
| 3. プロジェクトの場所を指定します。「終了」をクリックします。 |
| |
| 「終了」をクリックすると、IDEがプロジェクトを作成し、そのプロジェクトが「プロジェクト」ウィンドウで開きます。 |
| |
| |
| |
| . ツールバーの「デバッグ」ボタン([Ctrl]-[F5]、Macの場合は[⌘]-[F5])をクリックしてデバッグ・セッションを開始します。 |
| |
| または、「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「デバッグ」を選択します。 |
| |
| セッションを開始すると、IDEによってAnagram Gameアプリケーションが起動され、「デバッグ」ウィンドウが表示されます。 |
| |
| デバッガの実行の詳細は、_NetBeans IDEによるアプリケーションの開発_のlink:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG798[+Javaアプリケーション・プロジェクトの実行およびデバッグ+]を参照してください。 |
| |
| |
| |
| . メイン・メニューから「デバッグ」>「GUIスナップショットを作成」を選択します。 |
| |
| 「GUIスナップショットを作成」を選択すると、IDEによってGUIのスナップショットが作成され、そのスナップショットがメイン・ウィンドウに表示されます。 |
| |
| [.feature] |
| -- |
| |
| image::images/debug-fullscreen.png[role="left", link="images/debug-fullscreen.png"] |
| |
| -- |
| |
| ビジュアル・デバッガに関するこのガイドでは、「デバッグ」ウィンドウは使用しません。 |
| |
| |
| == ビジュアル・デバッガの操作 |
| |
| GUIスナップショットは、GUIコンポーネントのソース・コードを見つけるのに役立つ、ビジュアル・デバッグ用のツールです。GUIコンポーネントのソース・コードは見つけるのが困難な場合がありますが、このスナップショットによって、コード内を検索するのではなく、GUIに基づいてコードを見つけるための方法が提供されます。スナップショット内のコンポーネントを選択し、ポップアップ・メニューからタスクを呼び出すことにより、コンポーネントのソース・コードを表示したり、リスナーを表示したり、コンポーネントにブレークポイントを設定したりすることができます。 |
| |
| |
| === コンポーネントのソース・コードの検索 |
| |
| この課題は、GUIスナップショットを使用して、あるコンポーネントが宣言および定義されているソース・コード内の行に移動する方法を示します。GUIスナップショット内のコンポーネントを選択すると、ポップアップ・メニューを使用して、様々なコマンドを呼び出すことができます。 |
| |
| また、これらのコマンドは、コンポーネントを右クリックし、ポップアップ・メニューでコマンドを選択することによって「ナビゲータ」ウィンドウからも呼び出すことができます。 |
| |
| 1. GUIスナップショットで、「Guess」ボタンを選択します。 |
| |
| スナップショット内のコンポーネントを選択すると、IDEによって、選択されたコンポーネントに関する詳細が「プロパティ」ウィンドウに表示されます。「プロパティ」ウィンドウが表示されない場合は、メイン・メニューから「ウィンドウ」>「プロパティ」を選択してウィンドウを開くことができます。 |
| |
| image::images/debug-snapshot.png[title="GUIスナップショット"] |
| |
| また、IDEでは、コンポーネントの場所が「ナビゲータ」ウィンドウ内に階層形式で表示されます。 |
| |
| image::images/debug-navigator.png[title="GUIスナップショット"] |
| |
| |
| . スナップショット内の「Guess」ボタンを右クリックし、ポップアップ・メニューから「コンポーネント宣言へ移動」を選択します。 |
| |
| 「コンポーネント宣言へ移動」を選択すると、IDEによってソース・ファイルがエディタに表示され、 ``guessButton`` が宣言されているコード内の行にカーソルが移動されます。 |
| |
| image::images/debug-gotodeclaration.png[title="コンポーネントが宣言されているコードの行"] |
| |
| |
| . スナップショット内の「Guess」ボタンをもう一度右クリックし、「コンポーネント・ソースへ移動」を選択します。 |
| |
| 「コンポーネント・ソースへ移動」を選択すると、IDEによってソース・ファイルがエディタに表示され、JButtonコンポーネントのソース・コード内の行にカーソルが移動されます。 |
| |
| image::images/debug-gotosource.png[title="コンポーネントのソース・コードの行"] |
| |
| GUIスナップショットの「階層の追加へ移動」コマンドを使用して、コンポーネントがそのコンテナに追加されているソース・コード内の行を見つけることができます。「階層の追加へ移動」コマンドはデフォルトで無効になっています。「オプション」ウィンドウでコマンドを有効にできます。 |
| |
| 1. 「オプション」ウィンドウを開きます。 |
| 2. 「オプション」ウィンドウの「Java」カテゴリで、「Javaデバッガ」タブをクリックします。 |
| |
| *注意:*NetBeans IDE 7.1では、「オプション」ウィンドウの「Javaデバッガ」タブは「その他」カテゴリ内にあります。 |
| |
| |
| |
| . カテゴリ・リストの「ビジュアル・デバッグ」を選択し、「*コンポーネント階層の変更箇所をトラック*」を選択します。「OK」をクリックします。 |
| |
| |
| . デバッグ・セッション(実行中の場合)を停止します。 |
| |
| *注意:*「オプション」ウィンドウでコマンドを有効にした後、「階層の追加へ移動」コマンドを使用できるようにするには、デバッグ・セッションを再起動して、新規のGUIスナップショットを取る必要があります。 |
| |
| |
| |
| . 新規デバッグ・セッションを開始し、GUIスナップショットを作成します。 |
| |
| |
| . GUIスナップショット内のコンポーネントを右クリックし、「階層の追加へ移動」を選択します。 |
| |
| IDEによって、コンポーネントが追加されている行の部分のソース・コードがエディタに表示されます。 |
| |
| image::images/debug-hierarchy.png[title="コンポーネントがコンテナに追加されているソース・コードの行"] |
| |
| |
| === コンポーネント・イベントの調査 |
| |
| この課題は、GUIスナップショットと「イベント」ウィンドウを使用してコンポーネント・イベントを調査することによって、コンポーネントのリスナーやそれらのコンポーネントによってトリガーされたイベントを見つけることができる方法を示します。 |
| |
| 1. スナップショット内の「Guess」ボタンを右クリックし、ポップアップ・メニューから「リスナーを表示」を選択します。 |
| |
| 「リスナーを表示」を選択すると、IDEによって「イベント」ウィンドウが表示されます。「カスタム・リスナー」ノードが展開されることが確認できます。 |
| |
| image::images/debug-customlisteners.png[title="コンポーネントがコンテナに追加されているソース・コードの行"] |
| |
| |
| . 「カスタム・リスナー」ノードの下にある「*com.toy.anagrams.ui.Anagrams$3*」を右クリックし、ポップアップ・メニューで「コンポーネント・ソースへ移動」を選択します。 |
| |
| リスナーが定義されている行の部分のソース・コードがエディタに表示されます。 |
| |
| |
| |
| . スナップショット内の空のテキスト・フィールドを選択します。 |
| |
| または、「ナビゲータ」ウィンドウで「 ``guessedWord`` 」テキスト・フィールドを選択できます。 |
| |
| このテキスト・フィールドを選択すると、「イベント」ウィンドウ内の項目が自動的に変更され、選択されたコンポーネントのリスナーが表示されます。 |
| |
| |
| |
| . 「イベント」ウィンドウで、「イベント・ログ」ノードをダブルクリックして「リスナーを選択」ウィンドウを開きます。 |
| |
| または、「イベント・ログ」ノードを右クリックし、ポップアップ・メニューから「ロギング・イベントを設定」を選択できます。 |
| |
| |
| |
| . ダイアログから「 ``java.awt.event.KeyListener`` 」リスナーを選択します。「OK」をクリックします。 |
| |
| image::images/debug-select-listener.png[title="コンポーネントがコンテナに追加されているソース・コードの行"] |
| |
| このリスナーは現在、テキスト・フィールド内のキーボード・イベントを待機しています。 |
| |
| |
| |
| . Anagram Gameアプリケーションで、テキスト・フィールドに何文字か入力します。 |
| |
| テキスト・フィールドに文字を入力すると、そのイベントがイベント・ログに記録されます。「イベント・ログ」ノードを展開すると、各キー・ストロークがログに記録されていることが確認できます。Anagram Gameアプリケーションのテキスト・フィールドに入力するたびに、新しいイベントが表示されます。個々のイベント(たとえば、 ``keyPressed`` )を展開すると、ログ内のそのイベントのプロパティが表示されます。 |
| |
| image::images/debug-eventlog.png[title="コンポーネントがコンテナに追加されているソース・コードの行"] |
| |
| イベントの「コール元」ノードを展開すると、そのイベントのスタック・トレースが表示されます。 |
| |
| このチュートリアルでは、IDEのビジュアル・デバッガの基本について紹介しました。ビジュアル・デバッガを使用すると、GUIコンポーネントのソース・コードの検索やイベントの記録を容易に行うことができます。これは、GUIアプリケーションをデバッグする際に特に便利です。 |
| |
| |
| link:https://netbeans.org/about/contact_form.html?to=3&subject=Feedback:%20Using%20the%20Visual%20Debugger[+このチュートリアルに関するご意見をお寄せください+] |
| |
| |
| |
| == 関連項目 |
| |
| NetBeans IDEでのJavaアプリケーションの開発およびテストの詳細は、次のリソースを参照してください。 |
| |
| * link:gui-functionality.html[+Java GUIビルドの概要+] |
| * デモ: link:debug-visual-screencast.html[+ビジュアル・デバッガの使用+] |
| * デモ: link:debug-multithreaded-screencast.html[+マルチスレッド・アプリケーションのデバッグ+] |
| * デモ: link:debug-stepinto-screencast.html[+NetBeansデバッガでの視覚的なステップ・イン・アクション+] |
| * デモ: link:debug-deadlock-screencast.html[+NetBeansデバッガを使用したデッドロックの検出+] |
| * デモ: link:debug-evaluator-screencast.html[+NetBeansデバッガのコード・スニペット評価の使用+] |
| * link:../../trails/java-se.html[+基本的なIDEおよびJavaプログラミングの学習+] |