| // |
| // 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. |
| // |
| |
| = Разработка Swing GUI в IDE NetBeans |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Разработка Swing GUI в IDE NetBeans - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Разработка Swing GUI в IDE NetBeans |
| |
| image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой страницы применимо к IDE NetBeans 6.9 и более поздним версиям"] |
| |
| В этом учебном курсе приведено пошаговое описание процесса создания графического интерфейса пользователя для приложения с именем ContactEditor с помощью конструктора графического интерфейса пользователя IDE NetBeans. Целью является проектирование программы интерфейса пользователя, позволяющей просматривать и редактировать записи базы данных, содержащие контактную информацию о сотрудниках. |
| |
| Данный курс обучает следующему: работать с интерфейсом средства GUI Builder, создавать GUI Container (контейнер GUI), добавлять компоненты,, выравнивать их положение, изменять размер, настраивать привязку компонентов, управлять поведением при автоматическом изменении размера, редактировать свойства компонентов. |
| |
| Изучение материала, представленного в этом учебном курсе, занимает около 30 минут. |
| |
| |
| |
| |
| *Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.* |
| |
| |
| Программное обеспечение или материалТребуемая версия |
| |
| link:http://netbeans.org/downloads/index.html[+IDE NetBeans+]версия 6.9 и более поздние |
| |
| link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Комплект для разработчика на языке Java (JDK)+]версия 6, 7 или 8 |
| |
| |
| |
| == Начало работы |
| |
| Средство GUI Builder в среде IDE позволяет создавать профессиональные графические интерфейсы без наличия знаний о работе с диспетчерами компоновки. Проектирование форм можно выполнять путем простого размещения компонентов формы в требуемых позициях. |
| |
| Подробные сведения о визуальных средствах поддержки GUI Builder приведены в разделе link:quickstart-gui-legend.html[+Визуальные средства поддержки в GUI Builder+]. |
| |
| === Создание проекта |
| |
| Поскольку разработка Java в среде IDE всегда выполняется в рамках проектов, сначала необходимо создать проект ``ContactEditor`` , в котором будут сохраняться исходные файлы и другие файлы проекта. Проект среды IDE представляет собой группу исходных файлов Java и связанные с ними метаданные, включая файлы свойств проекта, сценарий сборки Ant, управляющий параметрами сборки и выполнения, а также файл ``project.xml`` , отображающий целевые элементы Ant для команд среды IDE. Несмотря на то, что приложения на Java часто составляются из нескольких проектов среды IDE, в учебных целях предлагается собрать простое приложение, размещаемое в одном проекте. |
| |
| |
| Для создания проекта приложения ``ContactEditor`` выполните действия, описанные ниже. |
| |
| 1. Выберите команду "Файл" > "Новый проект". Также можно щелкнуть значок "Новый проект" на панели инструментов среды IDE. |
| 2. На панели "Категории" выберите узел Java и на панели "Проекты" выберите приложение Java. Нажмите кнопку "Далее". |
| 3. Введите ``ContactEditor`` в поле "Имя проекта" и укажите местоположение проекта. |
| 4. Не устанавливайте флажок "Использовать отдельную папку для хранения библиотек". |
| 5. Убедитесь, что флажок "Установить как главный проект" выбран и очистите поле "Создать главный класс". |
| 6. Нажмите кнопку "Завершить". |
| |
| Среда IDE создаст в системе папку ``ContactEditor`` по указанному пути. Эта папка содержит все файлы, связанные с проектом, включая сценарий Ant, папки для хранения исходных файлов и тестов, а также папку с метаданными проекта. Для просмотра структуры проекта используйте окно "Файлы" в среде IDE. |
| |
| |
| |
| |
| |
| === Создание контейнера JFrame |
| |
| По завершении создания приложения можно заметить, что папка с исходными файлами в окне "Проекты" содержит пустой узел ``<default package>`` . Для продолжения процесса создания интерфейса необходимо создать контейнер Java, в который будут помещены другие требуемые элементы графического интерфейса. В этом действии будет выполнено создание контейнера с использованием компонента ``JFrame`` и размещение контейнера в новом пакете. |
| |
| |
| Добавление контейнера ``JFrame`` |
| |
| 1. В окне 'Проекты' щелкните правой кнопкой мыши узел ``ContactEditor`` и выберите 'Создать' > 'Форма JFrame'. |
| Также форму JFrame можно найти, выбрав "Создать" > "Другое" > "Формы графического интерфейса Swing" > "Форма JFrame". |
| |
| [start=2] |
| . Введите ``ContactEditorUI`` в поле имени класса. |
| |
| [start=3] |
| . Введите ``my.numberaddition`` в поле пакета. |
| |
| [start=4] |
| . Нажмите кнопку "Завершить". |
| |
| Среда IDE создаст форму ``ContactEditorUI`` и класс ``ContactEditorUI`` в рамках приложения ``ContactEditorUI.java`` и открывает форму ``ContactEditorUI`` в средстве GUI Builder. Обратите внимание, что пакет ``my.contacteditor`` сохраняется вместо пакета по умолчанию. |
| |
| |
| |
| |
| == Знакомство со средством GUI Builder |
| |
| Теперь, по завершении настройки нового проекта для приложения, необходимо ознакомиться с интерфейсом GUI Builder. |
| |
| *Примечание.* Изучить интерфейс средства GUI Builder можно с помощью интерактивного демонстрационного ролика link:http://bits.netbeans.org/media/quickstart-gui-explore.swf[+Exploring GUI Builder (.swf)+](Исследуя GUI Builder). |
| |
| [.feature] |
| -- |
| image::images/01_gb_ui-small.png[role="left", link="images/01_gb_ui.png"] |
| -- |
| |
| При добавлении контейнера JFrame на вкладке редактора IDE открывается новая форма ``ContactEditorUI`` , чья панель инструментов содержит кнопки, как показано на рисунке. Форма ContactEditor, открытая в режиме проектирования GUI Builder, и три дополнительных окна, автоматически выводимые по краям экрана среды IDE, позволяют пользователю выполнять навигацию, а также упорядочивать и редактировать формы графического интерфейса при их построении. |
| |
| Различные окна GUI Builder содержат следующие элементы: |
| |
| * *Область конструирования. *Основное окно конструктора графического интерфейса пользователя для создания и редактирования форм графического интерфейса пользователя Java. Кнопка "Исходный код" панели инструментов позволяет увидеть исходный код класса, кнопка "Проектирование" демонстрирует графическое изображение компонентов GUI, кнопка "Журнал" предоставляет доступ к истории локальных изменений файла. Дополнительные кнопки панели инструментов предоставляют быстрый доступ к часто используемым командам, например переключение между режимами выбора и подключения, выравнивание компонентов, установка автоматического изменения размера для компонентов и предварительный просмотр форм. |
| * *Навигатор. *Обеспечивает представление всех компонентов, как визуальное, так и не визуальное, в приложении в виде дерева иерархии. Кроме того, окно "Навигатор" предоставляет информацию визуальных средств поддержки о том, какие деревья в текущий момент изменяются средством GUI Builder, и позволяет группировать компоненты на доступных панелях. |
| * *Палитра. *Настраиваемый список доступных компонентов с вкладками для компонентов JFC / Swing, AWT и JavaBeans, а также диспетчеров компоновки. Кроме того, существует возможность создания, удаления и изменения порядка следования категорий, отображаемых в окне "Палитра", при помощи средства настройки. |
| * *Окно 'Свойства'*Отображение свойств компонента, выбранного в конструкторе графического интерфейса пользователя, окне навигатора, окне 'Проекты' или окне 'Файлы'. |
| |
| При нажатии кнопки "Исходный код" среда IDE отображает в редакторе исходный код приложения на языке Java. Область кода, которая была автоматически создана средством GUI Builder будет выделена серыми областями (если их выбрать, их цвет поменяется на синий), которые называются "Защитными блоками". Код в защищенных областях невозможно изменить в представлении "Source". Функция редактирования доступна в этом представлении только для кода на белом фоне окна редактора. При необходимости изменения кода в защищенном блоке щелкните кнопку "Design" для возврата в окно GUI Builder редактора среды IDE, предоставляющее возможность изменения формы. При сохранении изменений среда IDE обновляет исходный код файла. |
| |
| *Примечание.* Для опытных разработчиков доступен диспетчер палитры, что позволяет добавлять нестандартные компоненты из файлов JAR, библиотек или других проектов к палитре. Для добавления пользовательских компонентов при помощи диспетчера палитры выберите "Сервис" > "Палитра" > "Компоненты Swing/AWT". |
| |
| |
| |
| |
| == Ключевые понятия |
| |
| GUI Builder в среде IDE разрешает основные проблемы, возникающие при создании графического интерфейса Java путем рационализации процесса создания графических интерфейсов, освобождая разработчиков от необходимости изучения особенностей диспетчеров компоновки Swing. Это выполняется путем расширения возможностей конструктора графического интерфейса пользователя IDE NetBeans для поддержки простой парадигмы "Произвольная структура" с простыми правилами компоновки, понятными и простыми в использовании. В процессе проектирования формы GUI Builder предоставляет визуальные средства поддержки, предлагая оптимальное расположение и выравнивание компонентов. GUI Builder способствует переносу пользовательских решений по разработке в функциональный пользовательский интерфейс, реализуемый при помощи диспетчера компоновки GroupLayout и других средств Swing. Благодаря динамической модели размещения компонентов поведение графического интерфейса в GUI Builder во время выполнения соответствует ожидаемому, что позволяет вносить корректировки без изменения установленных взаимосвязей между компонентами. При каждом изменении размеров форм, переключении локалей или применении нового общего стиля графический интерфейс автоматически изменяется в соответствии с новой настройкой вставок и смещений стиля. |
| |
| |
| === Свободное проектирование |
| |
| В GUI Builder среды IDE можно создавать формы путем простого размещения компонентов в требуемых позициях, как при использовании абсолютного позиционирования. GUI Builder автоматически определяет необходимые атрибуты и создает код. Отсутствует необходимость в настройке вставок, привязок, заполнителей и др. вручную. |
| |
| |
| === Автоматическое размещение компонентов (привязка) |
| |
| В процессе добавления компонентов в форму GUI Builder предоставляет визуальные средства поддержки, позволяющее размещать компоненты на основе общего стиля операционной системы. GUI Builder содержит встроенные подсказки и другие визуальные средства поддержки относительно требуемого расположения компонентов в форме, позволяющие выполнять автоматическую привязку компонентов к различным позициям направляющих. Подсказки выводятся на основе позиции компонента в форме, при этом обеспечивается гибкость при выравнивании компонентов, и соответствующий новый общий стиль отображается во время выполнения. |
| |
| |
| === Визуальные средства поддержки |
| |
| Средство GUI Builder предоставляет визуальные средства поддержки для обеспечения привязки компонентов и установки отношений между ними. Эти индикаторы способствуют быстрому определению различных отношений при позиционировании и поведения при привязке компонентов, влияющие на внешний вид и работу графического интерфейса. Это ускоряет процесс проектирования графического интерфейса и позволяет быстро создавать профессиональные функционирующие визуальные интерфейсы. |
| |
| |
| |
| |
| == Первые действия |
| |
| После ознакомления с интерфейсом GUI Builder можно приступить к разработке пользовательского интерфейса приложения ContactEditor. В этом разделе будет рассмотрено использование окна "Палитра" среды для добавления различных компонентов графического интерфейса, необходимых для формы. |
| |
| Благодаря парадигме свободного проектирования в среде IDE разработчики избавлены от длительного изучения тонкостей работы с диспетчерами компоновки для управления размером и позицией компонентов в контейнерах. Все, что им надо делать — это перетаскивать нужные компоненты в формы GUI, как показано на следующем рисунке. |
| |
| *Примечание.* Демо-ролик link:http://bits.netbeans.org/media/quickstart-gui-add.swf[+Adding individual and multiple components (.swf)+](Добавление отдельных компонентов и их множества) иллюстрирует информацию, описанную в разделе ниже. |
| |
| |
| === Добавление компонентов. Основы |
| |
| Несмотря на то, что GUI Builder в среде IDE упрощает процесс создания графического интерфейса Java, часто важно схематически изобразить требуемое расположение элементов интерфейса до их размещения в форме. Многие разработчики интерфейсов считают этот метод наиболее эффективным, однако в учебных целях рекомендуется просмотреть результат построения формы, перейдя к разделу <<previewing_form,Предварительный просмотр графического интерфейса>>. |
| |
| После добавления компонента JFrame как контейнера формы верхнего уровня следует добавить несколько панелей JPanel, которые позволят объединить компоненты пользовательского интерфейса в кластеры с использованием границ с заголовками. Закончив изучение данного раздела, можно для иллюстрации процесса "перетаскивания" в среде IDE рассмотреть следующий рисунок. |
| |
| |
| Добавление панели JPanel |
| |
| 1. В окне "Палитра" выберите компонент "Панель" из категории "Контейнеры Swing", нажав и отпустив кнопку мыши. |
| 2. Переместите курсор в левый верхний угол формы GUI Builder. При расположении компонента рядом с верхней или левой границами контейнера появляются горизонтальные и вертикальные направляющие, обозначающие предпочтительные поля. Щелкните в пространстве формы для расположения панели JPanel в позиции курсора мыши. |
| |
| Компонент ``JPanel`` , который появляется в форме ``ContactEditorUI`` , подсвечен оранжевым, чтобы показать, что он выбран. После того, как кнопка мыши будет отпущена, появятся маленькие индикаторы, которые показывают привязки компонентов. А соответствующий узел JPanel отобразит окно "Навигатор", как изображено на следующем рисунке. |
| |
| |
| |
| |
| [.feature] |
| -- |
| image::images/02_add_panels_1-small.png[role="left", link="images/02_add_panels_1.png"] |
| -- |
| |
| Теперь следует изменить размеры панели JPanel, чтобы подготовить пространство для размещения других компонентов. Однако сначала обратим внимание на еще одну функцию визуализации GUI Builder. Отмените выбор добавленной панели JPanel. Поскольку граница с заголовком еще не добавлена, панель исчезнет. Однако обратите внимание на то, что при наведении курсора на панель JPanel ее края становятся светло-серыми, что позволяет четко определить позицию этого компонента. Теперь щелкните в пределах границ панели для ее повторного выбора, в результате появятся метки-манипуляторы и индикаторы привязки. |
| |
| |
| Изменение размера панели JPanel |
| |
| 1. Выберите только что добавленную панель JPanel. По периметру компонента появятся небольшие квадратные метки-манипуляторы. |
| 2. Щелкните метку-манипулятор на правой границе панели JPanel и, не отпуская кнопки мыши, перемещайте метку до тех пор, пока рядом с границей не появится пунктирная направляющая. |
| 3. Отпустите кнопку мыши для фиксации измененного размера компонента. |
| |
| Теперь компонент ``JPanel`` расширен и охватывает пространство между левым и правым полем контейнера с учетом рекомендуемого смещения, как изображено на рисунке ниже. |
| |
| |
| |
| |
| [.feature] |
| -- |
| image::images/02_add_panels_2-small.png[role="left", link="images/02_add_panels_2.png"] |
| -- |
| |
| Теперь, после добавления панели, содержащей сведений об имени пользовательского интерфейса, необходимо повторить этот процесс для добавления еще одного компонента с данными об адресе электронной почты непосредственно под первым компонентом. Повторите две предыдущих процедуры, как изображено на следующих рисунках, при этом обратите внимание на предлагаемое размещение компонентов в GUI Builder. Следует отметить, что предложенный вертикальный интервал между двумя панелями JPanel намного меньше, чем пространство до границ формы. После добавления второй панели JPanel следует изменить ее размеры так, чтобы она заполнила оставшееся пространство формы (по вертикали). |
| |
| |
| [.feature] |
| -- |
| image::images/02_add_panels_3-small.png[role="left", link="images/02_add_panels_3.png"] |
| -- |
| |
| |
| |
| [.feature] |
| -- |
| image::images/02_add_panels_4-small.png[role="left", link="images/02_add_panels_4.png"] |
| -- |
| |
| |
| |
| [.feature] |
| -- |
| image::images/02_add_panels_5-small.png[role="left", link="images/02_add_panels_5.png"] |
| -- |
| |
| |
| |
| |
| Поскольку функции в верхних и нижних разделах графического интерфейса должны быть визуально различимы, в каждую панель JPanel необходимо добавить границу и заголовок. Это действие можно выполнить при помощи окна "Свойства" или с использованием всплывающего меню. |
| |
| |
| Для добавления границ с заголовком в панель JPanels выполните действия, описываемые ниже. |
| |
| 1. Выберите верхнюю панель JPanel в GUI Builder. |
| 2. В окне "Свойства" нажмите кнопку с многоточием (...) рядом со свойством "Граница". |
| 3. В появившемся редакторе границ JPanel выберите узел "Граница с заголовком" на панели "Доступные границы". |
| 4. На панели "Свойства", расположенной ниже, введите ``Name`` как значение свойства "Заголовок". |
| 5. Нажмите кнопку с многоточием (...) рядом со свойством "Шрифт", выберите "Жирный" в поле "Стиль шрифта" и введите "12" в поле "Размер". Нажмите кнопку "ОК" для выхода из диалоговых окон. |
| 6. Выберите нижнюю панель "JPanel" и повторите действия 2–5, но на этот раз щелкните правой кнопкой мыши панель "JPanel" и откройте окно "Properties" из контекстного меню. Введите значение ``E-mail`` в поле свойства "Заголовок". |
| |
| К обоим компонентами ``JPanel`` будут добавлены границы с заголовками. |
| |
| |
| |
| |
| [.feature] |
| -- |
| image::images/02_add_borders-small.png[role="left", link="images/02_add_borders.png"] |
| -- |
| |
| |
| === Добавление отдельных компонентов к форме |
| |
| Теперь добавим компоненты, которые будут представлять фактическую контактную информацию списка контактов. Для этого необходимо добавить четыре текстовых поля "JTextField", в которых будет содержаться контактная информация, и четыре компонента "JLabel" для описания содержимого этих полей. При выполнении этого действия обратите внимание на горизонтальные и вертикальные направляющие, выводимые GUI Builder, которые отображают предпочтительное расстояние между компонентами согласно общему стилю операционной системы. Таким образом обеспечивается соответствие между создаваемым графическим интерфейсом и общим стилем операционной системы во время выполнения. |
| |
| |
| Добавление компонента JLabel в форму: |
| |
| 1. В окне "Палитра" выберите компонент "Label" (Метка) из категории "Элементы управления Swing". |
| 2. Переместите курсор на панель "JPanel" ``Name`` , созданную ранее. После появления направляющих, указывающих на размещение компонента "JLabel" в верхнем левом углу панели "JPanel" с небольшим полем у верхней и левой границ, щелкните кнопкой мыши для подтверждения расположения нового компонента. |
| |
| К форме будет добавлен компонент "JLabel", а в окне "Инспектор" появится соответствующий узел. |
| |
| |
| |
| |
| Перед переходом к следующему действию необходимо отредактировать отображаемый текст в только что добавленном компоненте "JLabel". Несмотря на то, что этот текст можно изменить в любое время, проще всего это сделать при добавлении компонента. |
| |
| |
| Редактирование отображаемого текста компонента "JLabel" |
| |
| 1. Дважды щелкните компонент "JLabel" для выбора отображаемого текста. |
| 2. Введите ``First Name:`` и нажмите ENTER. |
| |
| Будет выведено новое имя "JLabel", и ширина компонента будет изменена в соответствии с новым текстом. |
| |
| |
| |
| |
| Теперь следует добавить текстовое поле "JTextField", на примере которого можно рассмотреть функцию выравнивания по базовой линии в GUI Builder. |
| |
| |
| Добавление компонента "JLabel" в форму |
| |
| 1. В окне "Палитра" выберите компонент "Text field" (Текстовое поле) из категории "Элементы управления Swing". |
| 2. Переместите курсор непосредственно к правому краю только что добавленного компонента "JLabel" ``First Name:`` . При появлении горизонтальной направляющей, указывающей на выравнивание базовой линии поля "JTextField" по базовой линии компонента "JLabel", и вертикальной направляющей, определяющей интервал между этими двумя компонентами, щелкните кнопкой мыши для подтверждения позиции "JTextField". |
| |
| Компонент "JTextField" размещается в форме в позиции, выровненной по базовой линии "JLabel", как изображено на следующем рисунке. Обратите внимание на то, что компонент "JLabel" был немного смещен вниз с целью его выравнивания по базовой линии текстового поля, расположенной чуть выше. Узел, который представляет компонент, добавлен в окно "Навигатор", как обычно. |
| |
| |
| |
| |
| image::images/03_indy_add_1.png[] |
| |
| Прежде чем продолжить, необходимо немедленно добавить дополнительный компонент "JLabel" и "JTextField" справа от уже добавленных компонентов, как изображено на рисунке ниже. Введите ``Last Name:`` в качестве отображаемого текста в компоненте "JLabel", но пока не изменяйте текст заполнителя поля "JTextFields". |
| |
| image::images/03_indy_add_2.png[] |
| |
| |
| Изменение размера компонента "JTextField" |
| |
| 1. Выберите только что добавленный компонент "JTextField" справа от компонента "JLabel" ``Last Name:`` . |
| 2. Перетащите метку-манипулятор правого края компонента "JTextField" к правой границе панели JPanel. |
| 3. При появлении вертикальных направляющих, отображающих расстояние между текстовым полем и правым краем панели "JPanel", отпустите кнопку мыши для фиксации изменения размеров поля "JTextField". |
| |
| Правая граница компонента "JTextField" будет выровнена по предложенной границе поля панели "JPanel", как показано на следующем рисунке. |
| |
| |
| |
| |
| image::images/03_indy_add_3.png[] |
| |
| |
| === Добавление нескольких компонентов в форму |
| |
| Теперь добавьте в форму компоненты "JLabel" ``Title:`` и ``Nickname:`` , описывающие два текстовых поля "JTextField", которые также будут добавлены. Перетащите компоненты, удерживая нажатой клавишу SHIFT, чтобы быстрее добавить их на форму. При этом в GUI Builder снова появятся соответствующие горизонтальные и вертикальные направляющие, указывающие на предпочтительное размещение компонента. |
| |
| |
| Для добавления нескольких компонентов "JLabel" в форму выполните действия, описываемые ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Label" (Метка) из категории "Элементы управления Swing", нажав и отпустив кнопку мыши. |
| 2. Переместите курсор в форме непосредственно под ранее добавленным компонентом "JLabel" ``First Name:`` . При появлении направляющих, указывающих на выравнивание левой границы нового компонента "JLabel" по границе компонента "JLabel", расположенного выше, и при наличии небольшого пространства между этими компонентами, щелкните кнопкой мыши при нажатой клавише SHIFT для фиксации расположения первого компонента "JLabel". |
| 3. Не отпуская клавишу SHIFT, поместите другой компонент "JLabel" непосредственно справа от первого. Перед размещением второго компонента "JLabel" отпустите клавишу SHIFT. В случае удерживания клавиши SHIFT во время размещения второго компонента можно нажать клавишу ESC для отмены действия. |
| |
| Компоненты "JLabel" будут добавлены к форме и образуют второй ряд, как показано на рисунке ниже. Узлы, представляющие каждый компонент, добавлены в окно "Навигатор". |
| |
| |
| |
| |
| image::images/04_multi-add_1.png[] |
| |
| Перед следующим действием необходимо изменить имя компонента "JLabel", что позволит проверить результаты выравнивания, которое будет произведено чуть позже. |
| |
| |
| Для редактирования отображаемого текста компонента "JLabel" выполните действия, описываемые ниже. |
| |
| 1. Дважды щелкните компонент "JLabel" для выбора отображаемого текста. |
| 2. Введите ``Title:`` и нажмите ENTER. |
| 3. Повторите шаги 1 и 2, введя ``Nickname:`` в качестве имени второго свойства "Name" компонента "JLabel". |
| |
| Новые имена компонентов "JLabel" будут выведены в форме и смещены в результате изменения ширины текста, как изображено на рисунке ниже. |
| |
| |
| |
| |
| image::images/04_multi-add_2.png[] |
| |
| |
| === Вставка компонентов |
| |
| *Примечание.* Демо-ролик link:http://bits.netbeans.org/media/quickstart-gui-insert.swf[+Inserting components (.swf)+] (Добавление компонентов) иллюстрирует информацию, описанную в разделе ниже. |
| |
| Часто требуется вставить компонент между двумя уже размещенными в форме компонентами. При каждом добавлении компонента между двумя существующими компонентами GUI Builder автоматически смещает их для освобождения пространства для нового компонента. Для наглядности вставим компонент "JTextField" между уже добавленными компонентами "JLabel", как изображено на двух следующих рисунках. |
| |
| |
| Для вставки компонента "JTextField" между компонентами "JLabel" выполните действия, описываемые ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Text field" (Текстовое поле) из категории "Элементы управления Swing". |
| 2. Наведите курсор на компоненты JLabel ``Title:`` и ``Nickname:`` во втором ряду, что приведет к наложению поля "JTextField" на эти компоненты и выравниванию согласно их базовым линиям. В случае возникновения трудностей с размещением нового текстового поля можно привязать его к левой направляющей компонента "JLabel" ``Nickname`` , как показано на первом рисунке ниже. |
| 3. Щелкните кнопкой мыши для размещения компонента "JTextField" между компонентами "JLabel" ``Title:`` и ``Nickname:`` . |
| |
| Поле "JTextField" будет привязано к позиции между двумя компонентами "JLabel". Крайний правый компонент "JLabel" сдвигается к правой границе "JTextField" для соответствия рекомендуемому смещению по горизонтали. |
| |
| |
| |
| |
| |
| image::images/05_insert_1.png[] |
| |
| |
| |
| image::images/05_insert_2.png[] |
| |
| |
| |
| |
| Теперь необходимо добавить к форме еще один компонент "JTextField", отображающий имя контакта в правой части формы. |
| |
| |
| Для добавления компонента "JTextField" выполните действия, описываемые ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Text field" (Текстовое поле) в категории "Swing". |
| 2. Переместите курсор вправо от метки ``Nickname`` и щелкните кнопкой мыши для размещения текстового поля. |
| |
| Поле "JTextField" будет привязано к позиции слева от компонента JLabel. |
| |
| |
| |
| |
| |
| Изменение размера компонента "JTextField" |
| |
| 1. Перетащите метки-манипуляторы поля "JTextField" метки ``Nickname:`` , добавленного в предыдущей задаче, к правой границе панели "JPanel". |
| 2. При появлении вертикальных направляющих, отображающих расстояние между текстовым полем и краями панели "JPanel", отпустите кнопку мыши для изменения размеров поля "JTextField". |
| |
| Правая граница компонента "JTextField" выравнивается согласно рекомендуемому размеру поля панели JPanel, и в GUI Builder выполняется соответствующая корректировка размеров. |
| |
| |
| [start=3] |
| . Для сохранения файла нажмите сочетание клавиш CTRL+S. |
| |
| |
| |
| |
| |
| |
| == Дальнейшие действия |
| |
| Выравнивание – это один из наиболее важных аспектов создания профессионального графического интерфейса. В предыдущем разделе было приведено общее описание работы с функциями выравнивания в среде IDE при добавлении компонентов "JLabel" и "JTextField" к форме "ContactEditorUI". Далее будут представлены более подробные сведения о функциях выравнивания GUI Builder на примере использования других компонентов, необходимых для приложения. |
| |
| |
| === Выравнивание компонентов |
| |
| *Примечание.* Демо-ролик link:http://bits.netbeans.org/media/quickstart-gui-align.swf[+Aligning and anchoring components (.swf)+] (Выравнивание и привязка компонентов) иллюстрирует информацию, описанную в разделе ниже. |
| |
| При каждом добавлении компонента в форму позиция этого компонента корректируется в GUI Builder согласно появляющимся на экране направляющим. Однако иногда требуется изменить отношения между группами компонентов. В предыдущих действиях мы добавили к графическому интерфейсу ContactEditor четыре компонента "JLabel", однако для них не было выполнено выравнивание. Выровняйте два столбца этих компонентов по правому краю. |
| |
| |
| Для выравнивания компонентов выполните действия, описываемые ниже. |
| |
| 1. Нажмите клавишу ``CTRL`` и щелкните кнопкой мыши для выбора компонентов "JLabel" ``First Name:`` и ``Title:`` левой части формы. |
| 2. Нажмите кнопку "Выравнивание направо в столбце" (image::images/align_r.png[]) на панели инструментов. Также можно щелкнуть правой кнопкой мыши и выбрать команды "Выровнять" > "Направо" во всплывающем меню. |
| 3. Повторите эти действия для компонентов "JLabel" ``Last Name:`` и ``Nickname:`` . |
| |
| Позиции компонентов "JLabel" будут выровнены по правой границе отображаемого текста. Точки привязки будут обновлены, указывая на объединение компонентов в группу. |
| |
| |
| |
| |
| Перед завершением позиционирования текстовых полей "JTextField", ранее вставленных между компонентами "JLabel", убедитесь, что для этих компонентов правильно настроена корректировка размеров. В отличие от двух полей "JTextField", которые были выровнены по правому краю формы, функция изменения размера для вставляемых компонентов не установлена автоматически. |
| |
| |
| Для установки функции изменения размера компонента выполните действия, описываемые ниже. |
| |
| 1. Нажмите клавишу CTRL и щелкните кнопкой мыши два вставленных компонента "JTextField" для их выбора в GUI Builder. |
| 2. После выбора обоих полей "JTextField" щелкните правой кнопкой мыши любой из них и выберите команды "Автоматическое изменение размера" > "Горизонтально" во всплывающем меню. |
| |
| Для компонентов "JTextField" будет установлена функция автоматического изменения размера по горизонтали во время выполнения. Направляющие и точки привязки будут обновлены, предоставляя визуальное средство поддержки для отношений компонентов. |
| |
| |
| |
| |
| |
| Для настройки одинакового размера компонентов выполните действия, перечисленные ниже. |
| |
| 1. Нажмите клавишу CTRL и выберите каждый из четырех компонентов "JTextField" в форме. |
| 2. Щелкните любой из отмеченных компонентов "JTextField" правой кнопкой мыши и выберите элементы "Установить одинаковый размер" > "Одинаковая ширина" из всплывающего меню. |
| |
| Для всех компонентов "JTextField" будет установлена одинаковая ширина и к верхней границе каждого компонента будет добавлен индикатор, визуально поддерживающий отношения между компонентами. |
| |
| |
| |
| |
| Теперь необходимо добавить еще один компонент "JLabel", содержащий описание компонента "JComboBox", который позволит пользователям выбирать формат вывода данных в приложении ContactEditor. |
| |
| |
| Для выравнивания "JLabel" в соответствии с позицией группы компонентов выполните действия, описываемые ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Label" (Метка) из категории "Swing". |
| 2. Переместите курсор под компонентами "JLabel" ``First Name`` и ``Title`` в левой части панели "JPanel". После отображения направляющей, указывающей на выравнивание правой границы нового компонента "JLabel" по правому краю расположенной выше группы компонентов (два компонента "JLabel"), щелкните для подтверждения позиции компонента. |
| |
| Компонент "JLabel" выравнивается по правому краю относительно столбца "JLabel", расположенного выше, как показано на следующем рисунке. GUI Builder обновляет линии выравнивания, указывающие на отношения интервалов и привязок компонента. |
| |
| |
| |
| |
| [.feature] |
| -- |
| image::images/06_align_1-small.png[role="left", link="images/06_align_1.png"] |
| -- |
| |
| Как и в предыдущих примерах, дважды щелкните компонент "JLabel" для выбора отображаемого в нем текста и затем введите ``Display Format:`` в качестве отображаемого имени. Следует отметить, что при фиксации расположения "JLabel" другие компоненты смещаются в соответствии с увеличившимся размером отображаемого текста. |
| |
| |
| === Выравнивание по базовой линии |
| |
| При каждом добавлении или перемещении компонентов, содержащих текст ("JLabel", "JTextField" и т.д.), среда IDE предлагает выровнять их согласно базовым линиям текста этих компонентов. Например, после вставки компонента "JTextField" его базовая линия автоматически была автоматически выровнена по смежным с ним компонентам "JLabel". |
| |
| Теперь необходимо добавить поле со списком, позволяющее пользователям выбирать формат данных, отображаемых в приложении ContactEditor. При добавлении поля "JComboBox" его базовая линия будет выровнена по базовой линии текста в "JLabel". Обратите внимание на появляющиеся на экране направляющие, упрощающие позиционирование компонента. |
| |
| |
| Для выравнивания базовых линий компонентов выполните действия, перечисленные ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Combo Box" (Поле со списком) из категории "Элементы управления Swing". |
| 2. Переместите курсор непосредственно к правому краю только что добавленного компонента "JLabel". При появлении горизонтальной направляющей, указывающей на выравнивание базовой линии поля "JComboBox" по базовой линии текста в компоненте "JLabel", и вертикальной направляющей, определяющей интервал между этими двумя компонентами, щелкните кнопкой мыши для подтверждения позиции поля со списком. |
| |
| Компонент фиксируется в положении с выравниванием по базовой линии текста в "JLabel" слева, как показано на следующем рисунке. GUI Builder отображает линии выравнивания, указывающие на отношения интервалов и привязок компонента. |
| |
| |
| |
| |
| [.feature] |
| -- |
| image::images/06_align_2-small.png[role="left", link="images/06_align_2.png"] |
| -- |
| |
| |
| Для изменения размера поля со списком "JComboBox" выполните следующие действия. |
| |
| 1. Выберите компонент "ComboBox" в GUI Builder. |
| 2. Перетащите метку-манипулятор на правой границе компонента "JComboBox" вправо, пока на экране не появятся направляющие, которые обозначают рекомендуемый интервал между границами "JPanel" и "JComboBox". |
| |
| Как показано на следующем рисунке, правая граница "JComboBox" будет выровнена в соответствии с предложенным полем "JPanel", а для ширины этого компонента будет установлено автоматическое изменение согласно структуре формы. |
| |
| [.feature] |
| -- |
| image::images/06_align_3-small.png[role="left", link="images/06_align_3.png"] |
| -- |
| |
| |
| [start=3] |
| . Для сохранения файла нажмите сочетание клавиш CTRL+S. |
| |
| |
| |
| Описание способов изменения моделей компонентов выходит за рамки задач данного учебного курса, поэтому список компонентов "JComboBox" будет оставлен без изменений. |
| |
| |
| |
| |
| |
| == Обзор полученных навыков |
| |
| Создание GUI ContactEditor оказалось прекрасным началом обучения, однако стоит потратить минуту на повторение изученного, добавляя в это время новые компоненты, необходимые в интерфейсе. |
| |
| До сих пор акцент ставился на добавлении компонентов к интерфейсу ContactEditor при помощи направляющих, позволяющих оптимизировать процесс позиционирования компонентов. Еще одним важным средством поддержки для расположения компонентов является функция точек привязки. Несмотря на то, что эта тема не была затронута, в одном из предыдущих примеров эта функция уже использовалась. Как было указано ранее, при каждом добавлении компонента к форме среда IDE предлагает предпочтительный вариант его расположения, обозначаемый при помощи направляющих. После размещения новые компоненты также привязываются к ближайшей границе контейнера или компоненту с целью сохранения корректных отношений между ними во время выполнения. В этом разделе будет рассмотрен более удобный способ выполнения подобных задач с кратким описанием внутреннего механизма работы GUI Builder. |
| |
| |
| === Добавление, выравнивание и привязка |
| |
| GUI Builder позволяет быстро и удобно установить расположение компонентов формы за счет рационализации типичных операций. При каждом добавлении компонента к форме GUI Builder автоматически фиксирует его в предпочтительной позиции и устанавливает необходимые связи, позволяя пользователю сконцентрироваться на проектировании форм вместо изучения сложных деталей реализации. |
| |
| |
| Для добавления, выравнивания и редактирования отображаемого текста "JLabel" выполните действия, описываемые ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Label" (Метка) из категории "Элементы управления Swing". |
| 2. Переместите курсор в форме непосредственно под нижний заголовок "E-mail" на панели "JPanel". После появления направляющих, указывающих на размещение компонента "JLabel" в верхнем левом углу панели "JPanel" с небольшим полем у верхней и левой границ, щелкните кнопкой мыши для подтверждения расположения нового компонента. |
| 3. Дважды щелкните компонент "JLabel" для выбора отображаемого текста. Введите ``E-mail Address: `` и нажмите ENTER. |
| |
| Компонент "JLabel" будет зафиксирован в предпочтительной позиции в форме с привязкой к верхнему и левому краям панели "JPanel". Как обычно, соответствующий узел показывает, что компонент был добавлен в окно "Навигатор". |
| |
| |
| |
| |
| |
| Для добавления компонента "JTextField" выполните действия, описываемые ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Text field" (Текстовое поле) из категории "Элементы управления Swing". |
| 2. Переместите курсор непосредственно к правому краю только что добавленной метки ``E-mail Address`` . При появлении направляющих, указывающих на выравнивание базовой линии поля "JTextField" по базовой линии текста в компоненте "JLabel", и вертикальной направляющей, определяющей поле между этими двумя компонентами, щелкните кнопкой мыши для подтверждения позиции текстового поля. |
| |
| Поле "JTextField" будет зафиксировано в позиции справа от компонента "JLabel" ``E-mail Address:`` и привязано к этому компоненту. В окне "Inspector" появится соответствующий узел. |
| |
| |
| [start=3] |
| . Перетащите метку-манипулятор компонента "JTextField" к правой границе панели "JPanel" до появления на экране направляющих, обозначающих рекомендуемый интервал между границами "JTextField" и "JPanel". |
| |
| Правая граница "JTextField" привязывается к направляющей, отображающей предпочтительные поля. |
| |
| |
| |
| |
| Теперь необходимо добавить компонент "JList", в котором будет отображаться весь список контактов ContactEditor. |
| |
| |
| Для добавления и изменения размеров компонента "JList" выполните действия, описываемые ниже. |
| |
| 1. В окне "Палитра" выберите компонент "List" (Список) из категории "Элементы управления Swing". |
| 2. Наведите курсор в позицию непосредственно под ранее добавленным компонентом "JLabel" ``E-mail Address`` . При появлении направляющих, указывающей на то, что верхняя и правая границы компонента "JList" выровнены согласно предпочтительным полям по левому краю панели "JPanel" и расположенному выше компоненту "JLabel", щелкните для подтверждения позиции списка. |
| 3. Перетащите метку-манипулятор компонента "JList" к правой границе панели JPanel, до появления на экране направляющих, указывающих на то, что ширина списка совпадает с шириной расположенного выше поля "JTextField". |
| |
| Компонент "JList" будет зафиксирован в позиции, обозначенной направляющими, и в окне "Инспектор" появится соответствующий узел. Обратите также внимание на то, что форма расширяется для размещения нового компонента "JList". |
| |
| |
| |
| |
| [.feature] |
| -- |
| image::images/06_align_4-small.png[role="left", link="images/06_align_4.png"] |
| -- |
| |
| Так как компоненты "JList" используются для вывода длинных списков с данными, они обычно требуют добавления полосы прокрутки "JScrollPane". При каждом добавлении компонента, требующего полосы прокрутки, GUI Builder автоматически добавляет к нему компонент "JScrollPane". Поскольку полосы прокрутки не являются визуальными компонентами, для их просмотра и настройки необходимо использовать окно "Инспектор" в GUI Builder. |
| |
| |
| === Установка размеров компонента |
| |
| *Примечание.* Демо-ролик link:http://bits.netbeans.org/media/quickstart-gui-resize.swf[+Resizing and indenting components (.swf)+] (Изменение размеров и отступа компонентов) иллюстрирует информацию, описанную в разделе ниже. |
| |
| Часто ряд связанных компонентов, например, кнопок в модальных диалогах, должен иметь один и тот же размер для обеспечения непротиворечивого визуального представления. Для наглядности добавим в форму "ContactEditor" четыре кнопки "JButton", которые будут использоваться для добавления, изменения и удаления отдельных записей из нашего списка контактов, как показано на рисунках ниже. По завершении кнопки будут настроены таким образом, чтобы они имели одинаковый размер и отражали связанную с ними функциональную возможность. |
| |
| |
| Для добавления, выравнивания и редактирования отображаемого текста нескольких кнопок выполните действия, описываемые ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Button" (Кнопка) из категории "Элементы управления Swing". |
| 2. Разместите кнопку "JButton" над правой границей поля "JTextField" ``E-mail Address`` на нижней панели "JPanel". При появлении направляющих, указывающих на выравнивание базовой линии и правой границы кнопки "JButton" по полю "JTextField", щелкните кнопкой мыши при нажатой клавише SHIFT для позиционирования первой кнопки у правого края компонента "JFrame". После того как кнопка мыши будет отпущена, ширина "JTextField" будет уменьшена для размещения кнопки "JButton". |
| |
| |
| [.feature] |
| -- |
| image::images/buttons_1-small.png[role="left", link="images/buttons_1.png"] |
| -- |
| |
| |
| |
| [.feature] |
| -- |
| image::images/buttons_2-small.png[role="left", link="images/buttons_2.png"] |
| -- |
| |
| |
| [start=3] |
| . Наведите курсор на верхний правый угол списка "JList" на нижней панели "JPanel". При появлении направляющих, указывающих на выравнивание верхней и правой границ кнопки "JButton" по верхней и правой границам поля "JTextField", щелкните кнопкой мыши при нажатой клавише SHIFT для размещения второй кнопки у правого края компонента "JFrame". |
| |
| [.feature] |
| -- |
| image::images/buttons_3-small.png[role="left", link="images/buttons_3.png"] |
| -- |
| |
| |
| [start=4] |
| . Добавьте еще две кнопки "JButton" в позицию под ранее добавленными кнопками так, чтобы они образовали столбец. Эти кнопки должны размещаться с учетом требуемых интервалов, которые должны иметь одинаковый размер. В случае удерживания клавиши SHIFT во время размещения последней кнопки "JButton" можно нажать клавишу Escape для отмены действия. |
| |
| [.feature] |
| -- |
| image::images/buttons_4-small.png[role="left", link="images/buttons_4.png"] |
| -- |
| |
| |
| [start=5] |
| . Установите отображаемый текст для каждой кнопки "JButton". (Для изменения текста кнопки щелкните кнопку правой кнопкой мыши и выберите "Edit Text". В качестве альтернативы можно щелкнуть кнопку, выдержать паузу и щелкнуть еще раз.) Введите значение `Add` для верхней кнопки, `Edit` для второй, `Remove` для третьей и `As Default` для четвертой. |
| |
| Компоненты "JButton" будут привязаны к позициям, обозначенным направляющими. Ширина кнопок будет изменена для размещения новых имен. |
| |
| [.feature] |
| -- |
| image::images/buttons_5-small.png[role="left", link="images/buttons_5.png"] |
| -- |
| |
| |
| |
| |
| Теперь, после установки местоположения кнопок, следует установить для них поддержание одинакового размера для обеспечения непротиворечивого визуального представления, а также указать на их функциональные связи. |
| |
| |
| Для настройки одинакового размера компонентов выполните действия, перечисленные ниже. |
| |
| 1. Выделите все четыре кнопки с помощью мыши, удерживая нажатой клавишу CTRL. |
| 2. Щелкните правой кнопкой мыши одну из них и выберите "Одинаковый размер" > "Одинаковая ширина" во всплывающем меню. |
| |
| Размер кнопок "JButton" будет скорректирован по размеру кнопки с самым длинным именем. |
| |
| [.feature] |
| -- |
| image::images/buttons_6-small.png[role="left", link="images/buttons_6.png"] |
| -- |
| |
| |
| |
| |
| |
| === Отступ |
| |
| Часто ряд компонентов целесообразно объединить в кластер, относящийся к какому-либо компоненту, в целях указания на принадлежность этих компонентов к группе связанных функций. Например, таким образом обычно размещаются флажки, сгруппированные в один раздел под общим именем. В GUI Builder отступ определяется при помощи особых направляющих, которые обозначают предпочтительное смещение, соответствующее общему стилю операционной системы. |
| |
| В этом разделе будет рассмотрено добавление нескольких переключателей "JRadioButton" под компонентом "JLabel". Эти переключатели предназначены для настройки пользователем способа отображения данных в приложении. При выполнении этой процедуры обратитесь к рисункам, расположенным ниже, или щелкните ссылку "Демонстрация" для просмотра интерактивной демонстрации. |
| |
| |
| Для добавления отступа под компонентом "JLabel" для размещения переключателей "JRadioButton" выполните действия, описываемые ниже. |
| |
| 1. Добавьте в форму компонент "JLabel" с именем ``Mail Format`` под списком "JList". Убедитесь, что этот компонент выровнен по левому краю списка. |
| 2. В окне "Палитра" выберите компонент "Список" в категории "Swing". |
| 3. Переместите курсор под только что добавленный компонент "JLabel". При появлении направляющих, указывающих на выравнивание левой границы переключателя по левой границе компонента "JLabel", плавно перемещайте переключатель вправо до отображения второй направляющей отступа. Щелкните кнопкой мыши при нажатой клавише SHIFT для подтверждения позиции первого переключателя. |
| |
| [.feature] |
| -- |
| image::images/07_indent_1-small.png[role="left", link="images/07_indent_1.png"] |
| -- |
| |
| |
| [start=4] |
| . Переместите курсор вправо от первого компонента "JRadioButton". Щелкните мышью при нажатой клавише SHIFT для размещения второго и третьего переключателей, учитывая при этом рекомендуемый интервал между этими компонентами. Перед размещением последнего компонента "JRadioButton" отпустите клавишу SHIFT. |
| |
| [start=5] |
| . Установите отображаемый текст для каждого переключателя "JRadioButton". (Для изменения текста кнопки щелкните кнопку правой кнопкой мыши и выберите "Edit Text". В качестве альтернативы можно щелкнуть кнопку, выдержать паузу и щелкнуть еще раз.) Введите значение `HTML` для крайнего переключателя слева, `Plain Text ` для второго переключателя и `Custom` для третьего. |
| |
| Итак, в форму добавлены три компонента "JRadioButton", которые расположены под компонентом "JLabel" ``Mail Format`` с требуемым отступом. |
| |
| [.feature] |
| -- |
| image::images/07_indent_3-small.png[role="left", link="images/07_indent_3.png"] |
| -- |
| |
| |
| |
| |
| Теперь необходимо добавить три переключателя "JRadioButton" к группе кнопок "ButtonGroup", что позволит установить требуемое поведение, согласно которому в один момент времени может быть выбран только один переключатель. Это обеспечит отображение контактной информация приложения ContactEditor в выбранном пользователем формате. |
| |
| |
| Для добавления переключателей "JRadioButtons" к группе "ButtonGroup" выполните действия, перечисленные ниже. |
| |
| 1. В окне "Палитра" выберите компонент "Группа кнопок" из категории "Элементы управления Swing". |
| 2. Щелкните в любом месте в рамках области проектирования GUI Builder для добавления компонента "ButtonGroup" к форме. Заметим, что компонент "ButtonGroup" не появляется на форме сам по себе, однако, он отображается в области "Другие компоненты навигатора". |
| 3. Выберите в форме все три переключателя "JRadioButton". |
| 4. В окне "Свойства" выберите "buttonGroup1" из поля со списком свойств "buttonGroup". |
| |
| К группе кнопок будут добавлены три переключателя "JRadioButton". |
| |
| [.feature] |
| -- |
| image::images/07_group-small.png[role="left", link="images/07_group.png"] |
| -- |
| |
| |
| [start=5] |
| . Для сохранения файла нажмите сочетание клавиш CTRL+S. |
| |
| |
| |
| == Заключительная настройка |
| |
| Итак, пользовательский интерфейс приложения ContactEditor практически готов, однако необходимо добавить к нему еще несколько компонентов. В этом разделе описываются некоторые типичные задачи по компоновке интерфейса, выполняемые при помощи GUI Builder. |
| |
| |
| === Последние штрихи |
| |
| Теперь необходимо добавить кнопки, позволяющие пользователям подтверждать информацию, вводимую для определенного контакта, и добавлять ее в список контактов или отменять операцию без внесения изменений в базу данных. В этом действии будут добавлены две необходимые кнопки, а также рассмотрена настройка для них одинакового размера в форме даже при различной длине отображаемого текста. |
| |
| |
| Для добавления и редактирования отображаемого на кнопках текста выполните действия, описываемые ниже. |
| |
| 1. Если нижняя панель "JPanel" расширена до нижней границы формы "JFrame", перетащите нижний край компонента "JFrame" вниз. В результате между границей "JFrame" и краем панели "JPanel" появится пространство для кнопок "ОК" и "Cancel". |
| 2. В окне "Палитра" выберите компонент "Button" (Кнопка) из категории "Элементы управления Swing". |
| 3. Наведите курсор в форме в пространство ниже панели "JPanel" с именем "E-mail". При появлении направляющих, указывающих на выравнивание правой границы кнопки "JButton" по нижнему правому углу компонента "JFrame", щелкните кнопкой мыши для подтверждения расположения кнопки. |
| |
| [.feature] |
| -- |
| image::images/08_cancel-small.png[role="left", link="images/08_cancel.png"] |
| -- |
| |
| |
| [start=4] |
| . Добавьте еще одну кнопку "JButton" слева от первой с учетом необходимого пространства до нижнего края компонента "JFrame". |
| |
| [start=5] |
| . Установите отображаемый текст для каждой кнопки "JButton". Введите значение ``ОК`` для левой кнопки и ``Cancel`` для правой. Обратите внимание, что ширина кнопок изменяется для размещения новых имен. |
| |
| [start=6] |
| . Настройте сохранение одинакового размера для кнопок "JButton". Для этого выделите обе кнопки, щелкните правой кнопкой мыши одну из них и выберите "Одинаковый размер" > "Одинаковая ширина" во всплывающем меню. |
| |
| [.feature] |
| -- |
| image::images/08_same_size-small.png[role="left", link="images/08_same_size.png"] |
| -- |
| |
| Компоненты ``JButton`` появляются в форме, и соответствующие им узлы отображаются в окне "Навигатор". К исходному файлу формы также будет добавлен код компонентов ``JButton`` , что отображается в представлении "Source" редактора. Размер кнопок "JButton" будет скорректирован по размеру кнопки с самым длинным именем. |
| |
| |
| [start=7] |
| . Для сохранения файла нажмите сочетание клавиш CTRL+S. |
| |
| |
| |
| Последней необходимой операцией является удаление текста заполнителя из различных компонентов. Несмотря на то, что удаление этих текстов только после построения общей структуры формы позволяет избежать проблем с выравниванием компонентов и установкой их привязок, большинство разработчиков обычно удаляют этот текст еще в процессе размещения компонентов в форме. Последовательно выделите и удалите текст заполнителя для каждого поля "JTextField" в форме. Тексты компонентов "JComboBox" и "JList" еще потребуются для работы со следующим учебным курсом. |
| |
| |
| |
| |
| == Предварительной просмотр графического интерфейса |
| |
| Теперь, после успешного создания графического интерфейса для приложения ContactEditor, можно его протестировать. Форму можно просмотреть в режиме предварительного просмотра путем нажатия кнопки "Предварительный просмотр" (image::images/test_form.png[]) на панели инструментов GUI Builder. Форма откроется в отдельном окне, позволяющим выполнить тестирование перед переходом к сборке и исполнению. |
| |
| [.feature] |
| -- |
| image::images/08_preview_gui-small.png[role="left", link="images/08_preview_gui.png"] |
| -- |
| |
| |
| |
| |
| == Развертывание приложений с графическим интерфейсом |
| |
| Для сохранения работоспособности интерфейсов, созданных в GUI Builder, вне среды IDE, компиляция приложения должна быть выполнена с учетом классов диспетчера компоновки GroupLayout, которые также должны быть доступны во время выполнения. Эти классы существуют в Java SE 6, но отсутствуют в Java SE 5. При разработке приложения для выполнения на платформе Java SE 5 необходима библиотека Swing Layout Extensions. |
| |
| При выполнении среды IDE на базе пакета JDK 5 автоматически создается код приложения для использования этой библиотеки. При развертывании приложения необходимо включить библиотеку Swing Layout Extensions в пакет приложения. При сборке приложения ("Построить" > "Построить главный проект") среда IDE автоматически помещает копию архива JAR библиотеки в папку ``dist/lib`` приложения. Кроме того, среда IDE добавляет каждый из файлов JAR, которые содержатся в папке ``dist`` , к элементу ``Class-Path`` в JAR-файле ``manifest.mf`` приложения . |
| |
| При выполнении среды IDE на базе пакета JDK 6 автоматически создается код приложения с возможностью использования классов GroupLayout, существующих в Java SE 6. То есть отсутствует необходимость добавления в пакет приложения библиотеки Swing Layout Extensions для развертывания приложения в системах с установленной средой Java SE 6. |
| |
| *Примечание.* При создании приложения с помощью JDK 6 и необходимости поддержки запуска приложения в Java SE 5, можно настроить в IDE создание кода для использования библиотеки Swing Layout Extensions вместо классов в Java SE 6. Откройте класс ContactEditorUI в редакторе графического интерфейса. В окне "Навигатор" щелкните правой кнопкой мыши по узлу "Форма ContactEditorUI" и выберите "Свойства" во всплывающем меню. В диалоговом окне "Свойства" измените значение свойства "Layout Generation Style" (Стиль создания размещения) на "Swing Layout Extensions Library" (Библиотека расширений размещения Swing). |
| |
| |
| === Подготовка дистрибутива и запуск отдельных приложений с графическим интерфейсом. |
| |
| Для подготовки дистрибутива приложения с графическим интерфейсом для использования вне среды IDE выполните действия, описываемые ниже. |
| |
| * Поместите папку ``dist`` проекта в архив ZIP. (Папка ``dist`` может содержать папку ``lib`` , которую также следует включить в архив.) |
| |
| Чтобы запустить приложение, нажмите по проекту правой кнопкой мыши и выберите "Выполнить" из контекстного меню. В диалоговом окне "Выполнить проект" выберите имя главного класса ( ``my.contacteditor.ContactEditorUI`` , если речь идет о только что созданном проекте), затем нажмите "OK". Приложение исправлено и запущено. |
| |
| Для запуска отдельного приложения с графическим интерфейсом из командной строки выполните действия, описываемые ниже. |
| |
| 1. Перейдите к папке ``dist`` проекта. |
| 2. Введите следующее значение: |
| |
| [source,java] |
| ---- |
| java -jar <jar_name>.jar |
| ---- |
| |
| *Примечание.* При возникновении следующей ошибки: |
| |
| |
| [source,bash] |
| ---- |
| Exception in thread "main" java.lang.NoClassDefFoundError: org/jdesktop/layout/GroupLayout$Group |
| ---- |
| |
| Убедитесь, что в файле ``manifest.mf`` существует ссылка на текущую установленную версию библиотеки Swing Layout Extensions. |
| |
| |
| |
| link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20a%20Swing%20GUI%20in%20NetBeans%20IDE[+Отправить отзыв по этому учебному курсу+] |
| |
| |
| |
| == Дополнительные сведения |
| |
| Изучение учебного курса по проектированию графического интерфейса Swing в среде IDE завершено. Сведения о добавлении функциональных возможностей к создаваемому графическому интерфейсу приведены в разделах: |
| |
| * link:gui-functionality.html[+Введение в разработку графического интерфейса +] |
| * link:gui-image-display.html[+Обработка изображений в приложении с графическим интерфейсом+] |
| * link:http://wiki.netbeans.org/wiki/view/NetBeansUserFAQ#section-NetBeansUserFAQ-GUIEditorMatisse[+Часто задаваемые вопросы по GUI Builder+] |
| * link:../../trails/matisse.html[+Учебная карта по приложениям с графическим интерфейсом Java +] |
| * link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+Реализация Java GUI+] в документе _Разработка приложений в IDE NetBeans_ |
| |
| |
| |
