| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head> |
| <title>Использование визуального отладчика</title> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| <link rel="stylesheet" type="text/css" href="../../../print.css" media="print"> |
| <link rel="stylesheet" type="text/css" href="../../../lytebox.css" media="screen"> |
| <script type="text/javascript" src="../../../images_www/js/lytebox-compressed.js"></script> |
| |
| <meta name="description" content="A guide to using the visual debugger in NetBeans IDE to locate source code in GUI applications."/> |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| <body> |
| <h1>Использование визуального отладчика в NetBeans IDE</h1> |
| |
| <p>В этом документе даны указания по использованию визуального отладчика для поиска ошибок и отладки программного кода для визуальных элементов вашего приложения графического интерфейса. Визуальный отладчик приложений можно использовать в приложениях Java или JavaFX с графическим интерфейсом. |
| </p> |
| |
| <p>В этом разделе мы рассмотрим использование визуального отладчика на примере игры "Анаграммы". В этом разделе мы продемонстрируем, как сделать снимок графического интерфейса пользователя приложения и затем использовать этот снимок для поиска исходного кода, добавления прослушивателей в событие и просмотра журнала событий компонентов графического интерфейса пользователя. |
| </p> |
| |
| <p><b>Содержание</b></p> |
| <img alt="Содержимое на этой странице применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0" class="stamp" src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" title="Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"> |
| <ul> |
| <li><a href="#Exercise_10">Снимок графического интерфейса</a></li> |
| <li><a href="#Exercise_20">Работа с визуальным отладчиком</a> |
| <ul> |
| <li><a href="#Exercise_21">Поиск исходного кода</a></li> |
| <li><a href="#Exercise_22">Исследование событий компонента</a></li> |
| </ul> |
| </li> |
| </ul> |
| |
| <p><b>Для работы с этим учебным курсом требуется следующее программное обеспечение и ресурсы.</b></p> |
| <table> |
| <tr> |
| <th class="tblheader" scope="col">Программное обеспечение или материал</th> |
| <th class="tblheader" scope="col">Требуемая версия</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">IDE NetBeans</a></td> |
| <td class="tbltd1">7.2, 7.3, 7.4, 8.0</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Комплект для разработчика на языке Java (JDK)</a></td> |
| <td class="tbltd1">версия 7 или 8</td> |
| </tr> |
| </table> |
| <p class="notes"><strong>Примечание о JUnit.</strong> Если библиотеки JUnit не были установлены во время установки IDE, то при попытке отладки приложения появится сообщение о отсутствующем ресурсе с предложением установить JUnit.</p> |
| |
| <!-- ===================================================================================== --> |
| <a name="Exercise_10"></a> |
| <h2>Создание снимка графического интерфейса пользователя</h2> |
| <p>В данном учебном курсе в качестве примера будет использована игра "Анаграммы", приложение Java для настольного компьютера, с простым графическим интерфейсом, входящим в набор примеров мастера создания проекта. После создания проекта вы начнете процесс отладки и сделаете снимок графического интерфейса приложения. |
| </p> |
| |
| <ol> |
| <li>Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.</li> |
| <li>В категории "Примеры" > Java выберите "Игра Анаграммы". Нажмите кнопку "Далее".</li> |
| <li>Укажите местоположение проекта. Нажмите 'Готово'. |
| <p>При нажатии на кнопку 'Готово' IDE создает проект, который открывается в окне 'Проекты'.</p> |
| </li> |
| <li>Нажмите кнопку 'Отладка' на панели инструментов (Ctrl-F5; ⌘-F5 в Mac) для запуска сеанса отладки. |
| <p>Также вы можете щелкнуть правой кнопкой мыши узел проекта в окне 'Проекты' и выбрав 'Отладка'.</p> |
| <p>Когда начнется сеанс, среда IDE запустит игру "Анаграммы" и откроет окно "Отладка".</p> |
| <p>Дополнительные сведения о работе с отладчиком см. в разделе <a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG798">Запуск и отладка проектов приложений Java</a> в документе <em>Разработка приложений в IDE NetBeans</em>.</p> |
| </li> |
| <li>В главном меню выберите "Отладка" > "Сделать снимок графического интерфейса пользователя". |
| <p>При выборе пункта "Сделать снимок графического интерфейса пользователя" среда IDE сделает моментальный снимок графического интерфейса пользователя и откроет снимок в главном окне.</p> |
| |
| </li> |
| </ol> |
| <a href="../../../images_www/articles/74/java/visualdebug/debug-fullscreen.png" rel="lytebox" title="Моментальный снимок графического интерфейса пользователя отображается в главном окне IDE"> <img alt="снимок моментального снимка графического интерфейса пользователя" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-fullscreen.png" style="width:600px" title="Щелкните для увеличения"></a> |
| |
| <p>В этом руководстве по использованию визуального отладчика окно "Отладка" использоваться не будет.</p> |
| |
| |
| |
| <a name="Exercise_20"></a> |
| <h2>Работа с визуальным отладчиком</h2> |
| |
| <p>Снимок графического интерфейса пользователя — это средство визуальной отладки, помогающее найти исходный код для компонентов графического интерфейса пользователя. Иногда исходный код для компонентов графического интерфейса пользователя бывает трудно найти, а снимок позволяет найти исходный код по графическому интерфейсу, вместо поиска во всём коде проекта. Можно выбирать компоненты из снимка и вызывать задачи из всплывающего меню, чтобы просматривать исходный код компонента, показывать прослушиватели и создавать точки останова в компонентах. |
| </p> |
| |
| <div class="indent"> |
| <a name="Exercise_21"></a> |
| <h3>Поиск исходного кода компонентов</h3> |
| <p>В этом упражнении будет продемонстрировано использование снимка графического интерфейса пользователя для поиска строк исходного кода, в которых объявляется и определяется компонент. При выборе компонента на моментальном снимке графического интерфейса пользователя можно использовать всплывающее меню для вызова различных команд. |
| </p> |
| <p class="tips">Команды также можно вызвать из окна 'Навигатор'. Для этого щелкните правой кнопкой мыши компонент и выберите команду во всплывающем меню.</p> |
| |
| <ol> |
| <li>На снимке графического интерфейса пользователя нажмите кнопку "Определить". |
| <p>При выборе компонента на снимке среда IDE отобразит подробные сведения о выбранном компоненте в окне "Свойства". Если окно 'Свойства' не отображается, выберите 'Окно > Свойства' в главном меню.</p> |
| <img alt="Снимок моментального снимка графического интерфейса пользователя" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-snapshot.png" title="Снимок графического интерфейса пользователя"> |
| <p>Среда IDE также отображает местоположение компонента в иерархии формы в окне навигатора.</p> |
| <img alt="Снимок моментального снимка графического интерфейса пользователя" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-navigator.png" title="Снимок графического интерфейса пользователя"> |
| </li> |
| <li>Щелкните кнопку "Определить" правой кнопкой мыши и во всплывающем меню выберите пункт "Перейти к объявлению компонента". |
| <p>При выборе команды "Перейти к объявлению компонента" среда IDE открывает файл исходного кода в редакторе и перемещает курсор на ту строку в коде, в которой объявляется <tt>guessButton</tt>.</p> |
| <img alt="Снимок исходного кода в редакторе" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-gotodeclaration.png" title="Строка кода, в которой объявлен компонент"> |
| </li> |
| <li>Щелкните кнопку "Определить" правой кнопкой мыши на моментальном снимке и выберите "Перейти к исходному коду компонента". |
| <p>При выборе команды "Перейти к исходному коду компонента" среда IDE открывает файл исходного кода в редакторе и перемещает курсор на строку исходного кода компонента JButton.</p> |
| <img alt="Снимок исходного кода в редакторе" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-gotosource.png" title="Строка исходного кода компонента" /> |
| </li> |
| |
| </ol> |
| |
| <p> |
| На снимке графического интерфейса можно воспользоваться командой 'Перейти к добавлению иерархии', чтобы найти строку исходного кода, где компонент добавляется в соответствующий контейнер. По умолчанию команда 'Перейти к добавлению иерархии' отключена. Включить эту команду можно в окне 'Параметры'. |
| </p> |
| |
| <ol> |
| <li>Откройте окно 'Параметры'.</li> |
| <li>В окне 'Параметры' перейдите на вкладку 'Отладчик Java' в категории Java. |
| <p class="notes"><strong>Примечание.</strong> В NetBeans IDE 7.1 вкладка 'Отладчик' находится в категории 'Разное' в том же окне 'Параметры'.</p></li> |
| <li>В списке категорий выберите "Визуальная отладка", а затем выберите <strong>Отслеживать местоположения изменений в иерархии компонентов</strong>. Нажмите кнопку "ОК".</li> |
| <li>Остановите сеанс отладки (если он запущен). |
| <p class="notes"><strong>Примечание.</strong> После включения команды 'Перейти к добавлению иерархии' в окне 'Параметры' потребуется начать сеанс отладки заново и сделать новый снимок графического интерфейса. После этого можно будет использовать команду.</p> |
| </li> |
| <li>Начните новый сеанс отладки и сделайте снимок графического интерфейса.</li> |
| <li>Щелкните компонент правой кнопкой мыши на моментальном снимке графического интерфейса пользователя и выберите "Перейти к добавлению иерархии". |
| <p>Среда IDE откроет исходный код в редакторе на строке, в которой добавляется компонент.</p> |
| <img alt="Снимок исходного кода в редакторе" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-hierarchy.png" title="Строка исходного кода, в которой компонент добавлен в контейнер" /> |
| </li> |
| </ol> |
| |
| <a name="Exercise_22"></a> |
| <h3>Экспорт событий компонента</h3> |
| |
| <p>В этом упражнении вы научитесь использовать снимок графического интерфейса пользователя и окно "События" для просмотра событий компонента, искать прослушиватели компонентов и события, запускаемые компонентами.</p> |
| |
| <ol> |
| <li>Щелкните правой кнопкой мыши кнопку "Определить" на моментальном снимке и во всплывающем меню выберите "Показать прослушиватели". |
| <p>При выборе команды "Показать прослушиватели" среда IDE открывает окно "События". Как видно, узел "Особые прослушиватели" развернут.</p> |
| <img alt="Снимок исходного кода в редакторе" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-customlisteners.png" title="Строка исходного кода, в которой компонент добавлен в контейнер" /> |
| </li> |
| <li>Правой кнопкой мыши щелкните <strong>com.toy.anagrams.ui.Anagrams$3</strong> в узле "Особые прослушиватели" и во всплывающем выберите команду "Перейти к исходному тексту компонента". |
| <p>Исходный код открывается в редакторе на той строке, в которой определяется прослушиватель.</p> |
| </li> |
| <li>Выберите пустое текстовое поле на снимке. |
| <p>Также можно выбрать текстовое поле <tt>guessedWord</tt> в окне "Навигатор".</p> |
| <p>При выборе текстового поля элементы в окне "События" автоматически изменятся, и в окне будут отображены прослушиватели выбранного компонента.</p></li> |
| <li>В окне "События" дважды щелкните узел "Журнал событий". При этом откроется окно "Выбор прослушивателя". |
| <p>Также можно щелкнуть правой кнопкой мыши узел Event Log и выбрать 'Задать события журналирования' во всплывающем меню.</p></li> |
| <li>В диалоге выберите прослушивающий процесс <tt>java.awt.event.KeyListener</tt>. Нажмите кнопку "ОК".<br /> <img alt="Снимок исходного кода в редакторе" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-select-listener.png" title="Строка исходного кода, в которой компонент добавлен в контейнер" /> |
| <p>Теперь прослушиватель прослушивает события клавиатуры в текстовом поле.</p> |
| </li> |
| <li>В приложении "Анаграммы" в текстовом поле введите несколько символов. |
| <p>При вводе вами символа это событие записывается в журнал. Развернув узел "Журнал событий", вы увидите, что каждое нажатие клавиши записано. Новые события появляются при каждом вводе символов в текстовое поле игры "Анаграммы". Развернув отдельное событие, например <tt>keyPressed</tt>, вы увидите свойства этого события в журнале.</p> |
| |
| <img alt="Снимок исходного кода в редакторе" class="margin-around b-all" src="../../../images_www/articles/74/java/visualdebug/debug-eventlog.png" title="Строка исходного кода, в которой компонент добавлен в контейнер" /> |
| <p>Развернув узел "Вызов из..." в каком-либо событии, вы увидите трассировку стека данного события.</p> |
| </li> |
| </ol> |
| |
| </div> |
| |
| |
| |
| <!-- ===================================================================================== --> |
| <p>Этот учебный курс познакомил вас с основами визуальной отладки в среде IDE. Визуальный отладчик позволяет найти исходный код и записывать в журнал события компонентов графического интерфейса пользователя. Это намного упрощает отладку приложений с графическим интерфейсом. |
| </p> |
| |
| |
| <!-- End Content Area --> |
| |
| <br> |
| <div class="feedback-box"><a href="https://netbeans.org/about/contact_form.html?to=3&subject=Feedback:%20Using%20the%20Visual%20Debugger">Отправить отзыв по этому учебному курсу</a></div> |
| <br style="clear:both;" /> |
| <!-- ======================================================================================= --> |
| <h2><a name="nextsteps"></a>Дополнительные сведения</h2> |
| <p>Дополнительные сведения о разработке и тестировании приложений в IDE NetBeans см. следующие ресурсы:</p> |
| <ul> |
| <li><a href="gui-functionality.html">Введение в создание графического интерфейса на языке Java</a></li> |
| <li>Демонстрация: <a href="debug-visual-screencast.html">Использование визуального отладчика</a></li> |
| <li>Демонстрация: <a href="debug-multithreaded-screencast.html">Отладка многопоточного приложения</a></li> |
| <li>Демонстрация: <a href="debug-stepinto-screencast.html"> визуальная операция Step Into в отладчике NetBeans</a></li> |
| <li>Демонстрация: <a href="debug-deadlock-screencast.html">обнаружение взаимоблокировки с помощью отладчика NetBeans</a></li> |
| <li>Демонстрация: <a href="debug-evaluator-screencast.html">использование блока оценки фрагмента кода в отладчике NetBeans</a></li> |
| <li><a href="../../trails/java-se.html">Учебная карта по основам среды IDE и программирования на языке Java</a></li> |
| </ul> |
| |
| </body> |
| </html> |
