| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <!-- |
| Copyright (c) 2009, 2014, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <html> |
| |
| <head> |
| <title>Введение в разработку графического интерфейса пользователя - учебный курс по IDE NetBeans</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > |
| <meta name="KEYWORDS" content="NETBEANS, TUTORIAL, GUIDE, USER, DOCUMENTATION"> |
| <meta name="description" content="Adding Functionality to Buttons with the NetBeans GUI Builder: This tutorial teaches you how to build a simple GUI with back-end functionality. This tutorial is geared to the beginner and introduces the basic construction of a GUI with functionality. We will work through the layout and design of a GUI and add a few Buttons and Text Boxes. The Text Boxes will be used for receiving user input and also for displaying the program output. The Button will initiate the functionality built into the front end."> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| <meta name="author" content="Saleem Gul, Tomas Pavek"> |
| </head> |
| |
| <body> |
| <h1>Введение в разработку графического интерфейса </h1> |
| |
| |
| <div class="articledate" style="margin-left: 0px;">Предоставлено Салимом Гулом (Saleem Gul) и Томасом Павеком (Tomas Pavek)</div> |
| |
| <p>В данном учебном курсе рассматривается создание простого графического интерфейса пользователя и добавление к нему несложной серверной функциональности. В частности, будет рассмотрен код, определяющий поведение кнопок и полей в форме Swing. |
| </p> |
| |
| <p>Мы разберем компоновку и структуру графического интерфейса, после чего добавим несколько кнопок и текстовых полей. Текстовые поля предназначены для получения вводимой пользователем информации и вывода результата работы программы. Кнопка будет инициировать работу функций, встроенных в клиентскую часть программы. Создаваемое приложение представляет собой простой, но полнофункциональный калькулятор. |
| </p> |
| |
| <p>Более детальное руководство по функциям разработки конструктора графического интерфейса пользователя, включая видеодемонстрации различных функций разработки см. в разделе <a href="quickstart-gui.html">Разработка графического пользовательского интерфейса Swing в IDE NetBeans</a>.</p> |
| |
| <p align="center"><b>Предполагаемая продолжительность: 20 минут</b></p> |
| |
| <div class="indent"> |
| <h3>Содержание</h3> |
| <img alt="Содержимое этой страницы применимо к IDE NetBeans 6.9 и более поздним версиям" class="stamp" src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" title="Содержимое этой страницы применимо к IDE NetBeans 6.9 и более поздним версиям"> |
| <ul class="toc"> |
| <li><a HREF="#Exercise_1">Упражнение 1: Создание проекта</a></li> |
| <li><a HREF="#Exercise_2">Упражнение 2: Создание внешнего интерфейса</a></li> |
| <li><a HREF="#Exercise_3">Упражнение 3: Добавление функциональности</a></li> |
| <li><a HREF="#Exercise_4">Упражнение 4: Выполнение программы</a></li> |
| <li><a HREF="#how">Механизм обработки событий</a></li> |
| <li><a HREF="#seealso">Дополнительные сведения</a></li> |
| </ul> |
| <p><b>Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Программное обеспечение или материал</th> |
| <th class="tblheader" scope="col">Требуемая версия</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://netbeans.org/downloads/">IDE NetBeans с Java SE</a></td> |
| <td class="tbltd1">версия 6.9 или более поздняя</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">версия 6, 7 или 8 </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| |
| <h2><a name="Exercise_1"></a>Упражнение 1: Создание проекта</h2> |
| |
| <p>Первым действием является создание проекта среды IDE для разрабатываемого приложения. Дадим проекту имя <tt>NumberAddition</tt>.</p> |
| <ol> |
| <li>Выберите <tt>"Файл"</tt> > <tt>"Создать проект"</tt>. Также можно щелкнуть значок "New Project" на панели инструментов среды IDE.</li> |
| <li>В области "Categories" выберите узел "Java". В области "Projects" выберите "Java Application". Нажмите кнопку "Далее". </li> |
| <li>Введите <code>NumberAddition</code> в поле Project Name ("Имя проекта") и укажите путь, например, в вашем основном каталоге, как местоположение проекта. </li> |
| <li>Установите флажок "Использовать отдельную папку для хранения библиотек" и укажите местоположение папки библиотек (необязательно). Дополнительная информация приведена в статье <a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG455">Предоставление доступа к библиотеке другим пользователям</a> в документе <i>Разработка приложений с помощью NetBeans IDE</i>.</li> |
| <li>Удалите флажок "Create Main Class", если он установлен. </li> |
| <li>Нажмите кнопку 'Готово'.</li> |
| </ol> |
| |
| |
| <!-- ===================================================================================== --> |
| |
| <h2><a name="Exercise_2"></a>Упражнение 2: Создание внешнего интерфейса</h2> |
| |
| <p>Для продолжения процесса создания интерфейса необходимо создать контейнер Java, в который будут помещены другие требуемые элементы графического интерфейса. В этом действии контейнер будет создан с помощью элемента <code>JFrame</code>. Контейнер будет помещен в новый пакет, который будет отображаться в узле "Source Packages".</p> |
| |
| <div class="indent"> |
| <h3 class="tutorial">Создание контейнера JFrame</h3> |
| <ol> |
| <li>В окне 'Проекты' щелкните правой кнопкой мыши узел <tt>NumberAddition</tt> и выберите <tt>Создать</tt> > <tt>Другие</tt>. </li> |
| <li>В диалоговом окне создания файла выберите категорию <tt>Swing GUI Forms</tt> и тип файла <tt>JFrame Form</tt>. Нажмите кнопку "Далее".</li> |
| <li>Введите <tt>NumberAdditionUI</tt> в качестве имени класса.</li> |
| <li>Выберите пакет <code>my.numberaddition</code>. </li> |
| <li>Нажмите кнопку 'Готово'.</li> |
| </ol> |
| |
| <p>Среда IDE создает форму <code>NumberAdditionUI</code> и класс <code>NumberAdditionUI</code> в приложении <code>NumberAddition</code> и открывает форму <code>NumberAdditionUI</code> в GUI Builder. Пакет <code>my.NumberAddition</code> заменяет собой пакет по умолчанию.</p> |
| |
| <h3 class="tutorial">Добавление элементов: создание внешнего интерфейса</h3> |
| <p>Далее с помощью окна "Palette" внешний интерфейс приложения заполняется панелью JPanel. После этого добавляются три элемента JLabel (текстовые подписи), три элемента JTextField (текстовые поля) и три элемента JButton (кнопки). Если до этого работа с конструктором графического интерфейса пользователя не выполнялась сведения о размещения компонентов см. в разделе <a href="quickstart-gui.html">Разработка графического пользовательского интерфейса Swing в IDE NetBeans</a>.</p> |
| <p>После перетаскивания и размещения указанных выше элементов элемент JFrame должен выглядеть так, как показано на рисунке ниже. </p> |
| |
| <p class="align-center"><img alt="JFrame с 3 JLabels, 3 JButtons и 3 JTextFields" class="margin-around" src="../../../images_www/articles/72/java/gui-functionality/Figure1.png"></p> |
| |
| <p>Если в правом верхнем углу среды IDE отсутствует окно Palette ("Палитра"), выберите Window ("Окно") > Palette ("Палитра").</p> |
| <ol> |
| <li>Для начала выберите панель из категории Swing Containers ("Контейнеры Swing") в палитре и перетащите ее на JFrame.</li> |
| <li>Панель JPanel будет выделена. Перейдите к окну "Properties" и нажмите кнопку с многоточием (...) рядом с полем "Border" для выбора стиля границы.</li> |
| <li>В диалоговом окне "Border" выберите "TitledBorder" из списка и введите <code>Number Addition</code> в поле "Title". Для сохранения изменений и закрытия диалогового окна нажмите кнопку "OK".</li> |
| <li>Теперь на экране должен отображаться пустой элемент "JFrame" с заголовком "Number Addition", как показано на рисунке. Согласно рисунку добавьте к нему три метки JLabel, три текстовых поля JTextField и три кнопки JButton.</li> |
| </ol> |
| |
| <h3 class="tutorial">Переименование элементов</h3> |
| <p>На этом этапе будет выполнено переименование элементов, которые были добавлены к элементу JFrame.</p> |
| <ol> |
| <li>Дважды щелкните <code>jLabel1</code> и измените ntrcn (свойство "text") на <code>First Number</code>.</li> |
| <li>Дважды щелкните <code>jLabel2</code> и измените текст на <code>Second Number</code>.</li> |
| <li>Дважды щелкните <code>jLabel3</code> и измените текст на <code>Result</code>. </li> |
| <li>Удалите стандартный текст из <code>jTextField1</code>. Отображаемый текст можно преобразовать в редактируемый. Для этого щелкните правой кнопкой мыши текстовое поле и выберите 'Редактировать текст' во всплывающем меню. При этом может потребоваться восстановить первоначальный размер поля <code>jTextField1</code>. Повторите это действие для полей <code>jTextField2</code> и <code>jTextField3</code>. </li> |
| <li> Измените отображаемый текст <code>jButton1</code> на <code>Clear</code>. (Для изменения текста кнопки щелкните кнопку правой кнопкой мыши и выберите "Edit Text". В качестве альтернативы можно щелкнуть кнопку, выдержать паузу и щелкнуть еще раз.) </li> |
| <li> Измените отображаемый текст <code>jButton2</code> на <code>Add</code>.</li> |
| <li> Измените отображаемый текст <code>jButton3</code> на <code>Exit</code>.</li> |
| </ol> |
| <p>Теперь готовый графический интерфейс должен выглядеть так, как показано на рисунке ниже:</p> |
| <p class="align-center"><img alt="готовое приложение" class="margin-around" src="../../../images_www/articles/72/java/gui-functionality/Figure2.png"></p> |
| |
| |
| </div> |
| |
| |
| <!-- ======================================================================================= --> |
| |
| <h2><a name="Exercise_3"></a>Упражнение 3: Добавление функциональности</h2> |
| |
| <p>В этом упражнении будет добавлена необходимая функциональность к кнопкам "Add", "Clear" и "Exit". Поля <code>jTextField1</code> и <code>jTextField2</code> будут использоваться для ввода значений пользователем, а <code>jTextField3</code> – для вывода результата работы программы. Создаваемая программа представляет собой простейший калькулятор. Итак, приступим!</p> |
| |
| <div class="indent"> |
| <h3 class="tutorial">Добавление функциональности к кнопке "Exit"</h3> |
| |
| <p>Для того чтобы кнопки стали функциональными, каждой из них необходимо присвоить обработчик событий, который будет отвечать за реагирование на события. В нашем случае требуется идентифицировать событие нажатия кнопки – путем щелчка мышью или с помощью клавиатуры. Поэтому будет использоваться интерфейс "ActionListener", предназначенный для обработки событий "ActionEvent". <!--TODO clarify here--></p> |
| |
| <ol> |
| <li>Щелкните правой кнопкой мыши кнопку "Exit". Во всплывающем меню выберите Events ("События") > Action ("Действие") > actionPerformed. Учтите, что меню содержит множество других событий, на которые может реагировать программа! При выборе события <tt>actionPerformed</tt> среда IDE автоматически добавит прослушиватель ActionListener к кнопке Exit ("Выход") и создаст метод обработчика для обработки метода прослушивателя actionPerformed. </li> |
| <li>В среде IDE автоматически открывается окно "Source Code", где отображается место вставки действия, которое должно выполняться кнопкой при ее нажатии (с помощью мыши или клавиатуры). Окно "Source Code" должно содержать следующие строки: |
| <pre class="examplecode">private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) { |
| //TODO add your handling code here: |
| }</pre></li> |
| <li>Теперь добавим код действия, которое должна выполнять кнопка "Exit". Замените строку TODO на <code>System.exit(0);</code>. Готовый код кнопки "Exit" должен выглядеть следующим образом: |
| |
| <pre class="examplecode">private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) { |
| System.exit(0); |
| } </pre> |
| </li> |
| </ol> |
| |
| <h3 class="tutorial">Добавление функциональности к кнопке "Clear"</h3> |
| <ol> |
| <li>Щелкните вкладку "Design" в верхней части рабочей области для возврата к экрану "Form Design".</li> |
| <li>Щелкните правой кнопкой мыши кнопку "Clear" (<code>jButton1</code>). В появившемся меню выберите "Events > Action > actionPerformed".</li> |
| |
| <li>Нажатие кнопки "Clear" должно приводить к удалению всего текста из всех текстовых полей "jTextField". Для этого следует добавить код, аналогичный приведенному выше. Готовый исходный код должен выглядеть следующим образом: |
| <pre class="examplecode">private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){ |
| jTextField1.setText(""); |
| jTextField2.setText(""); |
| jTextField3.setText(""); |
| }</pre> |
| </li> |
| </ol> |
| |
| <p>Этот код удаляет текст из всех трех полей JTextField, оставляя их пустыми.</p> |
| |
| <h3 class="tutorial">Добавление функциональности к кнопке "Add"</h3> |
| <p>Кнопка "Add" должна выполнять три действия. </p> |
| <ol><li>Сначала она принимает данные, введенные пользователем в полях <code>jTextField1</code> и <code>jTextField2</code>, и преобразовывает их из типа "String" в тип "Float". </li> |
| <li>Затем она выполнит сложение двух чисел.</li> |
| <li>И, наконец, она преобразует сумму в тип String и поместит ее в <code>jTextField3</code>.</li> |
| </ol> |
| Начнем! |
| |
| <ol> |
| <li>Щелкните вкладку "Design" в верхней части рабочей области для возврата к экрану "Form Design".</li> |
| <li>Щелкните правой кнопкой мыши кнопку "Add" (<code>jButton2</code>). Во всплывающем меню выберите Events ("События") > Action ("Действие") > actionPerformed.</li> |
| <li>Добавьте код действий, которые должна выполнять кнопка "Add". Готовый исходный код должен выглядеть следующим образом: |
| <pre class="examplecode">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)); |
| }</pre> |
| </li> |
| </ol> |
| |
| <p>Теперь программа полностью готова, и можно приступить к ее сборке и выполнению. </p> |
| </div> |
| |
| |
| <h2><a name="Exercise_4"></a>Упражнение 4: Выполнение программы</h2> |
| |
| <p><b>Для выполнения программы в среде IDE выполните следующие действия:</b></p> |
| |
| <ol> |
| <li>Выберите Run ("Запуск") > Run Main Project ("Запуск главного проекта") (как вариант, нажмите F6). |
| <p class="notes"><b>Примечание.</b> При открытии окна с указанием того, что для Project NumberAddition не задан основной класс, следует выбрать <tt>my.NumberAddition.NumberAdditionUI</tt> в качестве основного класса в том же окне и нажать кнопку ОК.</p></li> |
| |
| </ol> |
| |
| <p><b>Для запуска программы вне среды IDE выполните следующие действия:</b></p> |
| <ol> |
| <li>Для сборки архива JAR приложения выберите "Run > Clean and Build Main Project" (Shift-F11).</li> |
| <li>При помощи проводника по файловой системе или диспетчера файлов перейдите в каталог <code> NumberAddition/dist</code>. |
| <p class="notes"><b>Примечание.</b> Местоположение каталога проекта <tt>NumberAddition</tt> зависит от пути, указанного при создании проекта в шаге 3 в разделе <a href="#Exercise_1">Упражнение 1. Создание проекта</a>.</p> |
| </li> |
| <li>Дважды щелкните файл <code>NumberAddition.jar</code>.</li> |
| </ol> |
| <p>Через несколько секунд приложение запустится.</p> |
| <p class="notes"><b>Примечание.</b> Если при двойном щелчке файла JAR не выполняется запуск приложения, дополнительные сведения о настройке связей файлов JAR в используемой операционной системе см <a href="../../articles/javase-deploy.html#troubleshooting">эту статью</a>.</p> |
| |
| <p>Можно также запустить приложение из командной строки.</p> |
| <p><b>Для запуска приложения из командной строки выполните следующие действия:</b></p> |
| <ol> |
| <li>Вызовите командную строку или окно терминала.</li> |
| <li>В командной строке измените текущий каталог на каталог <code>NumberAddition/dist</code>.</li> |
| <li>В командной строке введите следующий оператор: |
| <pre class="examplecode">java -jar NumberAddition.jar</pre> |
| <p class="notes"><b>Примечание.</b> Убедитесь, что <tt>my.NumberAddition.NumberAdditionUI</tt> задан как основной класс до запуска приложения. Для провери этого, щелкните правой кнопкой узел мыши узел проекта NumberAddition на панели 'Проекты', выберите 'Свойства' во всплывающем меню и выберите категорию 'Выполнить' в диалоговом окне 'Свойства проекта'. В поле 'Основной класс' должно отображаться <tt>my.numberaddition.NumberAdditionUI</tt>. </p> |
| </li> |
| </ol> |
| |
| <h2><a name="how"></a>Механизм обработки событий</h2> |
| |
| <p>В этом руководстве было рассмотрено реагирование на простое событие нажатия кнопки. Существует множество событий, на которые может реагировать приложение. Просмотреть в среде IDE список доступных событий, которые могут обрабатываться элементами графического интерфейса, можно следующим образом:</p> |
| <ol> |
| <li>Вернитесь к файлу <code>NumberAdditionUI.java</code> в редакторе. Щелкните вкладку "Design" для просмотра структуры графического интерфейса в GUI Builder.</li> |
| <li>Щелкните правой кнопкой мыши любой элемент графического интерфейса и выберите "Events" в появившемся меню. Теперь можно просто изучить содержимое меню, не выбирая каких-либо пунктов.</li> |
| <li>В качестве альтернативы можно выбрать "Properties" в меню "Window". В окне "Properties" щелкните вкладку "Events". Вкладка "Events" позволяет просмотреть и изменить обработчики событий, связанные с текущим активным элементом графического интерфейса.</li> |
| <li>Приложение также может реагировать на нажатие клавиш, одинарный, двойной или тройной щелчок мышью, перемещение указателя мыши, изменение размера окна и перемещение фокуса ввода. Меню "Events" позволяет автоматически создать обработчики событий для всех этих событий. Наиболее распространенным из них является событие "Action". (Для получения дополнительных сведений см. <a href="http://java.sun.com/docs/books/tutorial/uiswing/events/generalrules.html#twokinds">практические рекомендации по обработке событий</a> в руководстве <a href="http://java.sun.com/docs/books/tutorial/uiswing/events/index.html">Sun Java Events Tutorial</a>.)</li> |
| </ol> |
| |
| <p>Как выполняется обработка событий? При каждом выборе события из меню событий среда IDE автоматически создает так называемый прослушиватель событий и связывает его с компонентом разработчика. Для более подробного ознакомления с процессом обработки событий выполните следующие действия.</p> |
| |
| <ol> |
| <li>Вернитесь к файлу <code>NumberAdditionUI.java</code> в редакторе. Щелкните вкладку "Source" для просмотра исходного кода графического интерфейса.</li> |
| <li>Выполните прокрутку вниз и просмотрите реализованные методы <code>jButton1ActionPerformed()</code>, <code>jButton2ActionPerformed()</code> и <code>jButton3ActionPerformed()</code>. Эти методы называются обработчиками событий.</li> |
| <li>Теперь перейдите к методу <code>initComponents()</code>. Если этот метод отсутствует, найдите строку <code>Generated Code</code> и щелкните знак + рядом с этой строкой для отображения скрытого метода <code>initComponents()</code>.</li> |
| <li>Обратите внимание на синий блок, окружающий метод <code>initComponents()</code>. Этот код был автоматически создан средой IDE и не может быть изменен пользователем.</li> |
| <li>Теперь посмотрите на сам метод <code>initComponents()</code>. Помимо прочего, он содержит код, инициализирующий элементы графического интерфейса и помещающий их в форму. Этот код создается и обновляется автоматически при размещении и изменении элементов в режиме проектирования.</li> |
| <li>В методе <code>initComponents()</code> найдите следующий фрагмент: |
| <pre class="examplecode">jButton3.setText("Exit"); |
| jButton3.addActionListener(new java.awt.event.ActionListener() { |
| public void actionPerformed(java.awt.event.ActionEvent evt) { |
| jButton3ActionPerformed(evt); |
| } |
| });</pre> |
| |
| <p>В этом месте к элементу графического интерфейса, в данном случае к <code>jButton3</code>, добавляется объект прослушивания событий "ActionListener". Интерфейс "ActionListener" имеет метод "actionPerformed" объекта "ActionEvent", который реализуется путем простого вызова обработчика событий <code>jButton3ActionPerformed</code>. Теперь эта кнопка реагирует на события действий. Каждый раз при нажатии кнопки создается событие "ActionEvent", которое передается в метод "actionPerformed" интерфейса прослушивания событий, исполняющий код, предусмотренный разработчиком для этого события в обработчике событий.</p></li> |
| </ol> |
| <p> |
| Как правило, для получения возможности реагирования каждый интерактивный элемент графического интерфейса должен быть зарегистрирован в каком-либо интерфейсе прослушивания событий и иметь связанный обработчик событий. Как наглядно показано, IDE NetBeans автоматически обрабатывает подключение прослушивателя событий, что обеспечивает для пользователей возможность сосредоточиться на реализации фактической бизнес-логики, которая должна инициироваться событием. |
| </p> |
| <!--TODO: Add Swing App framework info, links--> |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20GUI%20Building">Отправить отзыв по этому учебному курсу</a> |
| </div> |
| <br style="clear:both;"> |
| <h2><a name="seealso"></a>Дополнительные сведения</h2> |
| <ul> |
| <li><a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920">Реализация графических интерфейсов Java</a> в документе <i>Разработка приложений в IDE NetBeans</i></li> |
| <li><a href="quickstart-gui.html">Разработка Swing GUI в IDE NetBeans</a></li> |
| <li><a href="gui-image-display.html">Обработка изображений в приложении GUI</a></li> |
| <li><a href="hibernate-java-se.html">Использование библиотеки Hibernate в приложении Java на базе Swing</a></li> |
| <li><a href="../../trails/matisse.html">Учебная карта по приложениям с графическим интерфейсом Java </a></li> |
| <li><a href="../../trails/java-se.html">Учебная карта по общим сведениям о разработке на Java</a></li> |
| <li><a href="http://wiki.netbeans.org/wiki/view/NetBeansUserFAQ#section-NetBeansUserFAQ-GUIEditorMatisse" target="_blank">GUI Builder – часто задаваемые вопросы</a></li> |
| <li><a href="http://download.oracle.com/javase/tutorial/uiswing/events/index.html" target="_blank">Занятие. Создание прослушивателей событий </a> с помощью <a href="http://download.oracle.com/javase/tutorial/index.html" target="_blank">учебных курсов по Java(tm)</a>.</li> |
| |
| </ul> |
| |
| </body> |
| |
| </html> |
