Разработка графического интерфейса Swing в среде IDE NetBeans

Загрузите quickstart-gui.zip для изучения этого файла ZIP в режиме оффлайн.

В этом руководстве описывается процесс создания графического интерфейса пользователя (GUI) для приложения ContactEditor при помощи GUI Builder в среде IDE NetBeans. Целью является проектирование интерфейса пользователя для приложения, который позволит просматривать и изменять контактную информацию сотрудников, записи о которых имеются в базе данных.

В руководстве рассматриваются следующие темы:

• работа в интерфейсе GUI Builder;
• создание контейнера графического интерфейса;
• добавление элементов;
• изменение размера элементов;
• выравнивание элементов;
• корректировка точек привязки элементов;
• настройка автоматического изменения размеров элементов;
• изменение свойств элементов.

Изучение материала, представленного в этом руководстве, занимает приблизительно 30 минут.

Примечание: Везде, где имеется значок , можно щелкнуть этот значок для просмотра подробной интерактивной демонстрации функциональных возможностей GUI Builder.

Для работы с этим руководством требуется программное обеспечение и ресурсы, перечисленные ниже.

Программное обеспечение или ресурс	Требуемая версия
Среда IDE NetBeans	версия 6.1 или версия 6.0
Комплект для разработчика на языке Java (JDK)	версия 6 или версия 5

Введение

GUI Builder в среде IDE позволяет создать профессиональный графический интерфейс пользователя, не требуя глубоких знаний относительно законов и правил работы диспетчеров компоновки. Проектирование форм осуществляется путем простой вставки элементов в требуемых местах.

Для получения пояснений относительно визуальных средств поддержки в GUI Builder см. Визуальные средства поддержки в GUI Builder.

Создание проекта

Поскольку все действия по разработке Java в среде IDE выполняются в рамках проектов, сначала необходимо создать новый проект ContactEditor, в котором будут храниться исходные файлы и прочие файлы проекта. Проект IDE представляет собой набор исходных файлов Java и связанные с ними метаданные, в том числе файлы свойств проекта, сценарий сборки Ant, управляющий параметрами сборки и исполнения, а также файл project.xml, связывающий параметры Ant с командами IDE. Приложения на Java обычно состоят из нескольких проектов IDE, однако в этом руководстве мы создадим простое приложение, которое можно разместить всего в одном проекте.

Для создания нового проекта приложения ContactEditor: Выберите "File > New Project". Также можно щелкнуть значок "New Project" на панели инструментов среды IDE. В области "Categories" выберите узел "Java", затем выберите "Java Application" в области "Projects". Нажмите кнопку "Next". Введите "ContactEditor" в поле "Project Name" и укажите местоположение проекта. Не устанавливайте флажок "Use Dedicated Folder for Storing Libraries". (При использовании среды IDE NetBeans 6.0 эта возможность недоступна.) Проверьте, что установлен флажок "Set as Main Project", и снимите флажок "Create Main Class". Нажмите кнопку "Finish". Среда IDE создает папку ContactEditor в указанном местоположении в системе. Эта папка содержит все связанные файлы проекта, в том числе его сценарий Ant, папки для хранения исходных файлов и тестов, а также папку для метаданных проекта. Структуру проекта можно просмотреть в окне "Files" среды IDE.

Создание контейнера графического интерфейса

После создания нового приложения в окне "Projects" в папке "Source Packages" появится пустой узел <default package>. Для продолжения процесса создания интерфейса необходимо создать контейнер Java, в который будут помещены другие требуемые элементы графического интерфейса. В этом действии мы создадим контейнер с помощью элемента JFrame и разместим его в новом пакете.

Для создания контейнера "JFrame": В окне "Projects" щелкните правой кнопкой мыши узел "ContactEditor" и выберите "New > JFrame Form". Введите имя класса "ContactEditorUI" в поле "Class Name". Выберите пакет my.contacteditor. Нажмите кнопку "Finish". Среда IDE создает форму ContactEditorUI и класс ContactEditorUI в приложении ContactEditorUI.java и открывает форму ContactEditorUI в GUI Builder. Пакет my.contacteditor заменяет собой пакет по умолчанию.

наверх

Знакомство с GUI Builder

После создания нового проекта для приложения следует ознакомиться с интерфейсом GUI Builder. Для изучения интерфейса GUI Builder при помощи интерактивного демонстрационного примера щелкните значок "Демонстрация".

Демонстрация

После добавления контейнера "JFrame" новая созданная форма ContactEditorUI автоматически открывается на вкладке "Editor", где имеется панель инструментов с рядом кнопок, показанных на предыдущем рисунке. Режим проектирования GUI Builder, в котором открыта форма "ContactEditor", и три дополнительных окна, автоматически выводимые по краям экрана IDE, позволяет осуществлять переходы, упорядочивать и изменять формы графического интерфейса по мере их разработки.

Различные окна GUI Builder содержат следующее:

• Область проектирования. Основное окно GUI Builder для создания и изменения форм графического интерфейса Java. Кнопки переключения между режимами просмотра исходного кода (Source) и проектирования (Design) на панели инструментов позволяют просматривать исходный код класса или графическое представление элементов графического интерфейса. Дополнительные кнопки панели инструментов обеспечивают удобный доступ к часто используемым командам, например, для выбора режимов "Selection" (выбор) и "Connection" (соединение), выравнивания элементов, настройки автоматического изменения размера элементов и предварительного просмотра форм.
• Окно "Inspector". В этом окне все элементы (как визуальные, так и прочие) приложения представлены в виде дерева. В этом окне также обозначается элемент, который изменяется в настоящее время в GUI Builder. Кроме того, это окно позволяет удобно разместить элементы на доступных панелях.
• Окно "Palette". Настраиваемый список доступных элементов с вкладками для элементов JFC/Swing, AWT и JavaBeans и средствами вызова диспетчеров компоновки. Кроме того, это окно позволяет создавать, удалять и переупорядочивать отображаемые в нем категории при помощи специального средства настройки.
• Окно "Properties". В этом окне отображаются свойства элемента, выбранного в GUI Builder, окне "Inspector", окне "Projects" или окне "Files".

При нажатии кнопки "Source" на экране появляется исходный код приложения на Java, отображаемый в редакторе. Разделы кода, которые были автоматически созданы GUI Builder, обозначаются синим цветом и называются защищенными блоками (Guarded Blocks). Текст из защищенных блоков невозможно изменить в режиме просмотра исходного кода. Для изменения в этом режиме доступен только код, отображаемый в редакторе на белом фоне. При необходимости корректировки кода, находящегося в защищенном блоке, следует нажать кнопку "Design", после чего снова появится экран GUI Builder, на котором можно внести требуемые изменения. После сохранения изменений исходный код файла автоматически обновляется.

Примечание: Опытные разработчики могут воспользоваться служебной программой Palette Customizer, которая позволяет добавить к окну "Palette" дополнительные элементы из файлов JAR, библиотек или других проектов.

наверх

Ключевые понятия

GUI Builder решает основные проблемы, возникающие при разработке графического интерфейса Java, путем рационализации процесса создания графических интерфейсов, освобождая разработчиков от необходимости изучения особенностей диспетчеров компоновки Swing. Это достигается за счет добавления в GUI Builder среды IDE NetBeans поддержки прямой парадигмы "свободного проектирования" (Free Design) с простыми с точки зрения восприятия и реализации правилами размещения объектов. В процессе проектирования формы GUI Builder предоставляет визуальные средства поддержки, предлагая оптимальное расположение и выравнивание элементов. При этом GUI Builder трансформирует принимаемые разработчиком решения по позиционированию объектов в функциональный UI, реализуемый диспетчером компоновки GroupLayout и другими средствами Swing. Благодаря модели динамического размещения элементов поведение графического интерфейса в среде GUI Builder полностью аналогично таковому в продуктивной среде исполнения, что позволяет вносить корректировки без изменения уже установленных взаимосвязей между элементами. Каждый раз при изменении размеров форм, переключении региональных и языковых настроек или применении нового стиля графического интерфейса автоматически адаптируется согласно новым параметрам вставок и смещений.

Концепция свободного проектирования "Free Design"

Проектирование форм в GUI Builder осуществляется путем простой вставки элементов в требуемые места без определения абсолютной позиции каждого элемента. GUI Builder автоматически определяет требуемые атрибуты и создает соответствующий исходный код. Вручную настраивать вставки, привязки, заполнители и т.п. не требуется.

Автоматическое расположение элементов (привязки)

При добавлении элементов к форме GUI Builder предоставляет визуальные средства поддержки, упрощающие задачу по правильному размещению элементов на основе общего стиля операционной системы. Кроме того, в GUI Builder предусмотрен вывод полезных советов и рекомендаций относительно позиционирования элементов в форме, реализуемый посредством автоматической привязки элементов к различным направляющим. Такие советы основываются на расположении элементов, которые уже были помещены в форму, и обеспечивают резервное пространство для сохранения гибкости при выборе различных стилей на этапе выполнения.

Визуальные средства поддержки

В GUI Builder также предусмотрены визуальные средства поддержки при определении привязок и настроек размещения элементов. Эти средства позволяют быстро идентифицировать различные связи позиционных отношений и поведение привязок, влияющие на внешний вид и функционирование графического интерфейса во время выполнения. Это ускоряет процесс разработки графического интерфейса и позволяет быстро создать профессионально выполненные и функционирующие визуальные интерфейсы.

наверх

Первые действия

После ознакомления с интерфейсом GUI Builder можно приступить к разработке UI приложения ContactEditor. В этом разделе будет рассмотрено использование окна "Palette" для добавления различных элементов графического интерфейса, необходимых для формы.

Благодаря парадигме свободного проектирования разработчики избавлены от длительного изучения тонкостей работы с диспетчерами компоновки в целях управления их размером и позицией в контейнерах. Все, что требуется, – это разместить методом обычного перетаскивания необходимые для формы графического интерфейса элементы так, как показано на прилагаемых иллюстрациях.

Добавление элементов: основные функции

Несмотря на то, что GUI Builder в среде IDE упрощает процесс создания графического интерфейса Java, часто важно схематически изобразить требуемое расположение элементов интерфейса до начала фактической разработки. Многие разработчики интерфейсов считают этот метод наиболее эффективным, однако в настоящем руководстве такую схему можно получить просто путем перехода к разделу Предварительный просмотр графического интерфейса.

После добавления элемента "JFrame" как контейнера формы верхнего уровня следует добавить несколько панелей JPanel, которые позволят объединить элементы UI в кластеры, разделенные границами с заголовками. При изучении следующих иллюстраций обратите внимание на поведение IDE при выполнении этой операции путем перетаскивания.

Для добавления панели JPanel: В окне "Palette" выберите элемент "Panel" в категории "Swing" щелчком мыши. Переместите курсор в верхний левый угол формы в GUI Builder. При расположении элемента рядом с верхней или левой границей контейнера появляются горизонтальные и вертикальные направляющие, обозначающие предпочтительные поля. Щелкните внутри формы для размещения панели JPanel в этой позиции. Элемент JPanel появляется в форме ContactEditorUI с выделением оранжевым цветом, указывающим на то, что этот элемент выбран (см. рисунок ниже). После того как кнопка мыши будет отпущена, на экране отобразятся небольшие индикаторы, показывающие точки привязки элемента, а в окне "Inspector" появится соответствующий узел JPanel.

После этого следует изменить размеры панели JPanel для обеспечения пространства, в котором будут размещаться другие элементы. Однако сначала отметим еще одну функцию визуализации GUI Builder. Для этого отмените выбор добавленной панели JPanel. Элемент исчезает, поскольку для него еще не была добавлена граница с заголовком. Однако обратите внимание на то, что при наведении курсора на панель JPanel ее края отображаются светло-серым цветом, что позволяет сразу определить границы этой панели. Теперь осталось лишь щелкнуть в пределах этих границ для повторного выбора элемента, после чего снова появятся метки-манипуляторы для изменения размера и индикаторы привязки.

Для изменения размеров панели JPanel: Выберите только что добавленную панель JPanel. По периметру элемента появляются небольшие квадратные метки-манипуляторы. Щелкните метку-манипулятор на правой границе панели JPanel и, не отпуская кнопки мыши, перемещайте метку до тех пор, пока рядом с границей не появится пунктирная направляющая. Отпустите кнопку мыши. Размер элемента будет изменен. Теперь элемент JPanel расширен и охватывает пространства между левым и правым полем контейнера с учетом рекомендуемого смещения (см. рисунок ниже).

Теперь, после добавления панели, которая будет содержать информацию об имени, необходимо повторить этот процесс для добавления еще одного поля, предназначенного для электронного адреса. Второе поле будет размещено непосредственно под первым. В соответствии со следующими рисунками, повторите две предыдущих процедуры, обращая внимание на предлагаемое GUI Builder размещение элементов. Следует отметить, что предложенный вертикальный интервал между двумя панелями JPanel намного меньше, чем интервал между границами. После добавления второй панели JPanel следует изменить ее размеры так, чтобы она заполнила собой оставшееся пространство формы (по вертикали).

Поскольку функции в верхних и нижних разделах графического интерфейса должны быть визуально различимы, к каждой панели JPanel необходимо добавить границы и заголовок. Сначала попробуем это сделать при помощи окна "Properties", а затем – с использованием меню.

Для добавления границ панелей JPanel с заголовком: Выберите верхнюю панель JPanel в GUI Builder. В окне "Properties" нажмите кнопку с многоточием (...) рядом со свойством "Border". В появившемся редакторе границ JPanel Border выберите узел "TitledBorder" на панели "Available Borders". Ниже на панели "Properties" введите Name в качестве значения свойства "Title" (заголовок). Нажмите кнопку с многоточием (...) рядом со свойством "Font" (шрифт), выберите "Bold" в поле "Font Style" и введите "12" в поле "Size". Нажмите кнопку "OK" для закрытия диалоговых окон. Выберите нижнюю панель JPanel и повторите действия 2–5, но на этот раз щелкните правой кнопкой мыши панель JPanel и откройте окно "Properties" с помощью контекстного меню. Введите E-mail в поле свойства "Title". К обоим элементам JPanel теперь добавлены границы с заголовками.

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

Добавление отдельных элементов к форме

Теперь добавим элементы, которые будут представлять фактическую контактную информацию в списке контактов. Для этого необходимо добавить четыре текстовых поля "JTextField", в которых будет содержаться контактная информация, и четыре элемента "JLabel" для описания содержимого этих полей. При выполнении этой процедуры обратите внимание на горизонтальные и вертикальные направляющие, автоматически выводимые GUI Builder, которые отражают предпочтительное расстояние между элементами согласно стилю операционной системы. Таким образом обеспечивается соответствие между создаваемым графическим интерфейсом и общим стилем операционной системы во время выполнения.

Для добавления к форме элемента "JLabel": В окне "Palette" выберите элемент "Label" в категории "Swing". Наведите курсор на панель JPanel Name, которая была добавлена ранее. После появления направляющих, указывающих на размещение элемента "JLabel" в верхнем левом углу панели JPanel с небольшим полем в верхней и левой части, щелкните для подтверждения позиции нового элемента. Элемент "JLabel" добавляется к форме, а в окне "Inspector" появляется соответствующий узел.

Перед переходом к следующему действию необходимо изменить текст, который будет появляться в только что добавленном элементе "JLabel". Несмотря на то, что этот текст можно изменить в любое время, проще всего это сделать при добавлении элемента.

Для изменения текста элемента "JLabel": Дважды щелкните элемент "JLabel" для выбора текста. Введите First Name: и нажмите клавишу Enter. Отображается новое имя "JLabel", и ширина элемента корректируется согласно новому тексту.

Теперь следует добавить текстовое поле "JTextField", на примере которого мы рассмотрим функцию выравнивания по базовой линии в GUI Builder.

Для добавления поля "JTextField" к форме: В окне "Palette" выберите элемент "Text Field" в категории "Swing". Переместите курсор к правому краю добавленного элемента "JLabel" First Name:. При появлении горизонтальных направляющих, указывающих на то, что базовая линия поля "JTextField" выровнена с базовой линией "JLabel", и вертикальной направляющей, определяющей интервал между этими двумя элементами, щелкните для подтверждения позиции "JTextField". Элемент "JTextField" размещается в форме в позиции, соответствующей базовой линии "JLabel", как показано на следующем рисунке. Обратите внимание на то, что элемент "JLabel" был немного смещен вниз с целью его выравнивания с базовой линией текстового поля, расположенного чуть выше. Как и следовало ожидать, в окне "Inspector" появился новый узел, соответствующий добавленному элементу.

Перед следующим действием следует сразу вставить дополнительный элемент "JLabel" и "JTextField" справа от уже добавленных элементов (см. рисунок ниже). Теперь следует ввести Last Name: в качестве текста "JLabel"; при этом текст внутри элемента "JTextField" пока не изменяется.

Для изменения размеров элемента "JTextField": Выберите только что добавленный элемент "JTextField" справа от элемента "JLabel" Last Name:. Перетащите метку-манипулятор правого края элемента "JTextField" к правой границе панели JPanel. После появления вертикальных направляющих, отражающих расстояние между текстовым полем и правым краем панели JPanel, отпустите кнопку мыши для изменения размеров "JTextField". Правая граница элемента "JTextField" будет выровнена в соответствии с предложенным полем панели JPanel, как показано на следующем рисунке.

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

Добавление нескольких элементов к форме

Теперь следует добавить элементы "JLabel" Title: и Nickname:, описывающие два текстовых поля "JTextField", которые будут добавлены позже. При перетаскивании элементов будем удерживать нажатой клавишу Shift для быстрого их добавления к форме. При этом в GUI Builder снова появляются соответствующие горизонтальные и вертикальные направляющие, которые указывают на предпочтительное размещение элемента.

Для добавления нескольких "JLabel" к форме: В окне "Palette" выберите элемент "Label" в категории "Swing" щелчком мыши. Переместите курсор в форме непосредственно под элемент "JLabel" First Name:, который был добавлен ранее. При появлении направляющих, указывающих на выравнивание левой границы нового элемента "JLabel" с границей верхнего элемента "JLabel" и наличие небольшого промежутка между этими элементами, щелкните мышью при нажатой клавише Shift для подтверждения позиции первого элемента "JLabel". Нажмите клавишу Shift и щелкните мышью для размещения второго элемента "JLabel" справа от первого. Перед размещением второго элемента "JLabel" следует отпустить и снова нажать клавишу Shift. В противном случае перед размещением второго элемента необходимо нажать клавишу Escape. Элементы "JLabel" добавляются к форме и образуют в ней второй ряд, как показано на рисунке ниже. В окне "Inspector" появляются узлы, соответствующие добавленным элементам.

Перед следующим действием необходимо изменить имя элемента "JLabel", что позволит проверить результаты выравнивания, которое будет произведено чуть позже.

Для изменения текста, отображаемого в элементах "JLabel": Дважды щелкните первый элемент "JLabel" для выбора текста, который будет отображаться в этом элементе. Введите Title: и нажмите клавишу Enter. Повторите действия 1 и 2 путем ввода Nickname: в качестве значения свойства "Name" элемента "JLabel". Новые имена "JLabel" отображаются в форме и смещаются из-за изменения ширины текста в результате изменения (см. рисунок ниже).

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

Вставка элементов

Часто требуется добавить дополнительный элемент между другими элементами, уже помещенными в форму. Каждый раз при добавлении элемента между двумя существующими элементами GUI Builder автоматически сдвигает их для освобождения пространства под новый элемент. Рассмотрим это на примере вставки текстового поля "JTextField" между ранее добавленными элементами "JLabel" (см. следующие два рисунка).

Для вставки текстового поля "JTextField" между двумя элементами "JLabel": В окне "Palette" выберите элемент "Text Field" в категории "Swing". Наведите курсор на элемент "JLabel" Title: и Nickname: во втором ряду, что приведет к размещению поля "JTextField" поверх этих элементов и его выравниванию согласно их базовой линии. В случае возникновения трудностей при размещении нового текстового поля можно привязать его к левой направляющей элемента "JLabel" Nickname, как показано на первом нижеприведенном рисунке. Щелкните для размещения поля "JTextField" между элементами "JLabel" Title: и Nickname:. Поле "JTextField" размещается в указанной позиции между двумя элементами "JLabel". Правый элемент "JLabel" сдвигается к правому полю "JTextField" с целью соблюдения рекомендуемого смещения по горизонтали.

Остается добавить к форме еще один элемент "JTextField" для отображения имени контакта в правой части формы.

Для добавления элемента "JTextField": В окне "Palette" выберите элемент "Text Field" в категории "Swing". Переместите курсор вправо от подписи Nickname и щелкните для размещения текстового поля. Поле "JTextField" размещается в указанной позиции слева от элемента "JLabel".

Для изменения размеров элемента "JTextField": Перетащите метки-манипуляторы поля "JTextField", связанного с текстом Nickname:, которое было добавлено в предыдущей задаче в правую часть панели JPanel. После появления вертикальных направляющих, отражающих расстояние между текстовым полем и краями панели JPanel, отпустите кнопку мыши для изменения размеров элемента "JTextField". Правая граница элемента "JTextField" выравнивается согласно рекомендуемому размеру поля панели JPanel, и происходит соответствующая автоматическая корректировка размеров.

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

наверх

Дальнейшие действия

Выравнивание – это один из наиболее важных аспектов при создании профессионального графического интерфейса. В предыдущем разделе мы бегло ознакомились с функциями выравнивания, предусмотренными в среде IDE, в ходе добавления элементов "JLabel" и "JTextField" к форме "ContactEditorUI". Теперь обратимся к деталям функций выравнивания GUI Builder на примере работы с другими элементами, необходимыми для нашего приложения.

Выравнивание элементов

Каждый раз при добавлении элемента к форме GUI Builder позиция этого элемента корректируется согласно появляющимся на экране направляющим. Однако иногда требуется изменить связи между группами элементов. Ранее мы добавили к интерфейсу ContactEditor четыре элемента "JLabel", однако они не были выровнены. Поэтому следует выровнять два столбца таких элементов по правому краю.

Для выравнивания элементов: Выберите элементы "JLabel" First Name: и Title: слева от формы. Нажмите кнопку "Align Right in Column" () на панели инструментов. Также можно щелкнуть правой кнопкой мыши и выбрать "Align > Right" в появившемся меню. Повторите эти действия для элементов "JLabel" Last Name: и Nickname:. Элементы располагаются так, чтобы правые границы подписей были выровнены. Точки привязки обновляются и указывают на то, что элементы были сгруппированы.

Перед завершением позиционирования текстовых полей "JTextField", которые были ранее вставлены между элементами "JLabel", необходимо проверить, что для этих элементов правильно настроена корректировка размеров. В отличие от двух текстовых полей "JTextField", которые были выровнены по правому краю формы, для этих элементов возможность изменения размера автоматически не была установлена.

Для определения возможности изменения размеров элемента: Щелкните два вставленные элемента "JTextField" для их выбора в GUI Builder. После выбора обоих текстовых полей щелкните правой кнопкой мыши любой из них и выберите "Auto Resizing > Horizontal" в появившемся меню. Таким образом для элементов "JTextField" определяется возможность изменения размеров по горизонтали во время выполнения. При этом обновляются направляющие и точки привязки, что дает визуальную подсказку о свойствах позиции элементов.

Для настройки одинакового размера элементов: Щелкните все четыре элемента "JTextField" в форме для их выбора. После выбора элементов JTextField щелкните правой кнопкой мыши любой из них и выберите "Set Default Size" в появившемся меню. Это устанавливает одинаковую ширину всех текстовых полей; при этом к верхней границе каждого добавляются индикаторы, указывающие на это свойство элемента.

Теперь следует добавить еще один элемент "JLabel", который будет содержать подпись к полю со списком "JComboBox". Это поле будет использоваться для выбора формата данных, которые будут отображаться в приложении ContactEditor.

Для выравнивания "JLabel" в соответствии с позицией группы элементов: В окне "Palette" выберите элемент "Label" в категории "Swing". Переместите курсор под элементы "JLabel" First Name и Title слева от панели JPanel. После появления направляющей, указывающей на то, что правая граница нового элемента "JLabel" выровнена по правому краю расположенной выше группы элементов (из двух "JLabel"), щелкните для подтверждения позиции элемента. Элемент "JLabel" фиксируется в положении с выравниванием по правому краю столбца "JLabel" выше, как показано на следующем рисунке. GUI Builder обновляет линии выравнивания с учетом интервалов и привязок элемента.

Как и в предыдущих примерах, дважды щелкните элемент "JLabel" для выбора отображаемого в нем текста и затем введите Display Format: в качестве нового текста. Следует отметить, что при фиксации положения "JLabel" другие элементы смещаются так, чтобы увеличенный по размеру текст поместился в форме.

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

Выравнивание по базовой линии

Каждый раз при добавлении или перемещении элементов, которые содержат текст ("JLabel", "JTextField" и т.д.), среда IDE предлагает выровнять их согласно базовым линиям текста этих элементов. После вставки элемента "JTextField", например, его базовая линия автоматически выравнивается согласно смежным с ним полям "JLabel".

Теперь добавим поле списка, позволяющее пользователям выбрать формат информации, которая будет отображаться в приложении ContactEditor. При добавлении поля "JComboBox" его базовая линия будет выровнена по базовой линии текста "JLabel". Обратите внимание на появляющиеся на экране направляющие, упрощающие точное позиционирование элемента.

Для выравнивания базовых линий элементов: В окне "Palette" выберите элемент "Combo Box" в категории "Swing". Переместите курсор к правому краю добавленного элемента "JLabel". При появлении горизонтальных направляющих, указывающих на то, что базовая линия поля "JComboBox" выровнена с базовой линией текста "JLabel", и вертикальной направляющей, определяющей интервал между этими двумя элементами, щелкните для подтверждения позиции поля списка. Элемент фиксируется в положении с выравниванием по базовой линии текста в "JLabel" слева, как показано на следующем рисунке. GUI Builder отображает линии выравнивания с учетом интервалов и привязок элемента.

Для изменения размеров элемента "JComboBox": Выберите поле списка "ComboBox" в GUI Builder. Перемещайте манипулятор на правой границе элемента "JComboBox" вправо, пока на экране не появятся направляющие, которые обозначают рекомендуемый интервал между границами JPanel и "JComboBox". Как показано на следующем рисунке, правая граница "JComboBox" будет выровнена в соответствии с предложенным полем JPanel, а для ширины этого элемента будет установлено автоматическое изменение согласно структуре формы.

Описание способов изменения моделей элементов выходит за рамки данного руководства, поэтому список свойств "JComboBox" будет оставлен без изменений.

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

наверх

Резюме

Итак, мы уже создали значительную часть интерфейса пользователя для приложения ContactEditor, однако до перехода к добавлению следующих необходимых элементов было бы целесообразно закрепить изученный материал.

До сих пор акцент ставился на добавлении элементов к интерфейсу ContactEditor с помощью направляющих, которые позволили упростить процесс позиционирования элементов на экране. Еще одной важной функцией позиционирования являются точки привязки. Несмотря на то, что мы еще не касались этой темы, в одном из предыдущих примеров эта функция уже использовалась. Как было указано ранее, каждый раз при добавлении элемента к форме среда IDE предлагает предпочтительный вариант его расположения, обозначаемый при помощи направляющих. После размещения новые элементы также привязываются к ближайшей границе контейнера или элементу с целью сохранения правильных взаимосвязей между ними во время выполнения. В этом разделе будет рассмотрен более удобный способ выполнения подобных задач с кратким описанием внутреннего механизма работы GUI Builder.

Добавление, выравнивание и привязка

GUI Builder позволяет быстро установить расположение элементов формы за счет рационализации типичных операций. Каждый раз при добавлении элемента к форме GUI Builder автоматически фиксирует их в предпочтительных позициях и устанавливает необходимые связи, позволяя пользователю сконцентрироваться на проектировании форм вместо изучения сложных технических деталей.

Для добавления, выравнивания и изменения отображаемого текста "JLabel": В окне "Palette" выберите элемент "Label" в категории "Swing". Переместите курсор в форме под нижний заголовок "E-mail" на панели JPanel. После появления направляющих, указывающих на размещение элемента в верхнем левом углу панели JPanel с небольшим полем в верхней и левой части, щелкните для подтверждения позиции нового элемента. Дважды щелкните элемент "JLabel" для выбора текста. Затем введите E-mail Address: и нажмите клавишу Enter. Элемент "JLabel" фиксируется в предпочтительной позиции в форме с привязкой к верхнему и левому краю панели JPanel. Как и следовало ожидать, в окне "Inspector" появился новый узел, соответствующий добавленному элементу.

Для добавления элемента "JTextField": В окне "Palette" выберите элемент "Text Field" в категории "Swing". Переместите курсор к правому краю добавленного поля E-mail Address. При появлении направляющих, указывающих на то, что базовая линия поля "JTextField" выровнена с базовой линией текста "JLabel", и вертикальной направляющей, определяющей интервал между этими двумя элементами, щелкните для подтверждения позиции текстового поля. Элемент "JTextField" фиксируется в позиции справа от "JLabel" E-mail Address: и привязывается к этому элементу. В окне "Inspector" появляется связанный с ним узел. Перемещайте манипулятор элемента "JTextField" к правой границе панели JPanel, пока на экране не появятся направляющие, которые обозначают рекомендуемый интервал между границами "JTextField" и JPanel. Правая граница "JTextField" фиксируется по направляющей, которая обозначает предпочтительные поля.

Теперь необходимо добавить элемент "JList", в котором будет отображаться весь список контактов ContactEditor.

Для добавления и изменения размеров элемента "JList": В окне "Palette" выберите элемент "List" в категории "Swing". Переместите курсор прямо под элементом "JLabel" E-mail Address, который был добавлен ранее. После появления направляющей, указывающей на то, что верхняя и правая границы элемента "JList" выровнены согласно предпочтительным интервалам по левому краю панели JPanel и расположенному выше элементу "JLabel", щелкните для подтверждения позиции списка. Перемещайте манипулятор элемента "JList" к правой границе панели JPanel, пока на экране не появятся направляющие, указывающие на то, что ширина списка совпадает с шириной расположенного выше поля "JTextField". Элемент "JList" фиксируется в позиции, обозначенной направляющими, и в окне "Inspector" появляется соответствующий ему узел. Обратите также внимание на то, что форма расширяется для размещения нового элемента "JList".

Так как элементы "JList" используются для отображения относительно длинных списков, они обычно требуют добавления полосы прокрутки (JScrollPane). Каждый раз при добавлении элемента, требующего полосы прокрутки, GUI Builder автоматически добавляет к нему элемент "JScrollPane". Поскольку полосы прокрутки являются невизуальными элементами, для их просмотра и настройки должно использоваться окно "Inspector" в GUI Builder.

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

Определение размеров элемента

Часто ряд связанных элементов, например, кнопок в модальных диалогах, должны иметь один и тот же размер для обеспечения непротиворечивого визуального представления. Для демонстрации того, как это можно сделать, добавим к форме "ContactEditor" четыре кнопки "JButton", которые будут использоваться для добавления, изменения и удаления отдельных записей из нашего списка контактов, как показано на следующих рисунках. После этого кнопки будут настроены так, чтобы они имели одинаковый размер и отражали связанную с ними функциональность.

Для добавления, выравнивания и изменения отображаемого текста нескольких кнопок: В окне "Palette" выберите элемент "Button". Поместите кнопку "JButton" над правой границей поля "JTextField" E-mail Address на нижней панели JPanel. После появления направляющих, указывающих на то, что базовая линия кнопки "JButton" и правая граница выровнены с полем "JTextField", щелкните при нажатой клавише Shift для размещения первой кнопки по правому краю элемента "JFrame". После отпускания кнопки мыши ширина "JTextField" уменьшается так, чтобы рядом поместилась кнопка "JButton". Наведите курсор на верхний правый угол списка "JList" на нижней панели JPanel. После появления направляющих, указывающий на то, что верхняя и правая границы кнопки выровнены с полем "JList", щелкните при нажатой клавише Shift для размещения второй кнопки по правому краю элемента "JFrame". Добавьте две дополнительные кнопки "JButton" к кнопкам, которые уже вставлены в форму, так, чтобы они образовали столбец. Эти кнопки должны размещаться с учетом требуемых интервалов, которые должны иметь одинаковый размер. Если клавиша Shift не была отпущена до размещения последней кнопки "JButton", просто нажмите клавишу Escape. Настройте отображаемый текст для каждого элемента "JButton". (Для изменения текста кнопки щелкните кнопку правой клавишей мыши и выберите "Edit Text". В качестве альтернативы можно щелкнуть кнопку, выдержать паузу и щелкнуть еще раз.) Для первой сверху кнопки введите Add, для второй – Edit, для третьей – Remove, для четвертой – As Default. Элементы "JButton" фиксируются в позициях, обозначенных направляющими. Ширина кнопок корректируется так, чтобы поместился новый текст.

Теперь, после определения местоположения кнопок, следует установить для них поддержание одинакового размера, а также указать на их функциональные связи.

Для настройки одинакового размера элементов: Выделите все четыре кнопки с помощью мыши, удерживая нажатой клавишу Control. Щелкните правой кнопкой мыши одну из них и выберите "Same Size > Same Width" в появившемся меню. Размер кнопок "JButton" корректируется согласно размеру кнопки с самым длинным текстом.

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

Отступы

Часто ряд элементов целесообразно объединить в кластер, относящийся к какому-либо общему элементу, в целях указания на принадлежность этих элементов к группе связанных функций. Например, таким образом обычно размещаются флажки, сгруппированные в один раздел под общим названием. В GUI Builder отступ определяется при помощи особых направляющих, которые обозначают предпочтительное смещение, соответствующее общему стилю операционной системы.

В этом разделе мы добавим несколько переключателей (JRadioButton) под один элемент "JLabel". Эти переключатели предназначены для настройки пользователем способа отображения данных в приложении. При выполнении этой процедуры см. нижеприведенные рисунки, либо щелкните значок "Демонстрация" для просмотра интерактивной демонстрации.

Для добавления отступа с размещением переключателей "JRadioButton" под одним "JLabel": Добавьте к форме элемент "JLabel" с текстом Mail Format, расположив его под полем "JList". Проверьте, что этот элемент выровнен по левому краю списка. В окне "Palette" выберите элемент "Radio Button" в категории "Swing". Переместите курсор под только что добавленный элемент "JLabel". При появлении направляющих, указывающих на выравнивание левой границы переключателя с левой границей элемента "JLabel", перемещайте переключатель немного вправо до отображения второй направляющей отступа. Щелкните мышью при нажатой клавише Shift для подтверждения позиции первого переключателя. Переместите курсор вправо от первого элемента "JRadioButton". Щелкните мышью при нажатой клавише Shift для размещения второго и третьего переключателя, учитывая при этом предлагаемый интервал между этими элементами. Перед размещением последнего переключателя следует отпустить и снова нажать клавишу Shift. Настройте отображаемый текст для каждого элемента "JRadioButton". (Для изменения текста кнопки щелкните кнопку правой клавишей мыши и выберите "Edit Text". В качестве альтернативы можно щелкнуть кнопку, выдержать паузу и щелкнуть еще раз.) Для первого слева переключателя укажите HTML, для второго – Plain Text , для третьего – Custom. Итак, к форме добавлены три элемента "JRadioButton", которые расположены под элементом "JLabel" Mail Format с требуемым отступом.

Теперь необходимо добавить три переключателя "JRadioButton" к группе кнопок "ButtonGroup", что позволит установить требуемое поведение: в один момент времени может быть выбран только один переключатель. Это означает, что контактная информация из приложения ContactEditor будет отображаться в выбранном пользователем формате.

Для добавления переключателей к группе кнопок: В окне "Palette" выберите элемент "Button Group" в категории "Swing". Щелкните в любом месте в рамках области проектирования GUI Builder для добавления элемента "ButtonGroup" к форме. Следует отметить, что элемент "ButtonGroup" не появляется непосредственно в форме, однако отображается в области "Other Component" в окне "Inspector". Выберите в форме все три кнопки "JRadioButton". В окне "Properties" выберите "buttonGroup1" в поле списка свойства "buttonGroup". К группе кнопок добавляются три переключателя "JRadioButton".

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

наверх

Заключительная настройка

Итак, пользовательский интерфейс приложения ContactEditor практически готов, однако необходимо добавить к нему еще несколько деталей. В этом разделе описываются некоторые типичные задачи по формированию интерфейса, выполняемые при помощи GUI Builder.

Последние штрихи

Теперь необходимо добавить кнопки, позволяющие пользователям подтверждать информацию, вводимую для определенного контакта, и добавлять ее в список контактов или отменять операцию, отказываясь от внесения изменений в базу данных. Мы добавим две необходимые кнопки, после чего изменим их свойства так, чтобы они сохраняли одинаковый размер в форме даже несмотря на то, что отображаемый на них текст имеет разную длину.

Для добавления и изменения текста кнопок: Если нижняя панель JPanel расширена до нижней границы формы "JFrame", переместите нижний край элемента "JFrame" вниз. В результате между границей "JFrame" и краем панели JPanel появится пространство для кнопок "OK" и "Cancel". В окне "Palette" выберите элемент "Button" в категории "Swing". Переместите курсор в форме ниже панели JPanel с названием "E-mail". После появления направляющих, указывающих на то, что правая граница кнопки "JButton" выровнена по нижнему правому углу элемента "JFrame", щелкните для подтверждения позиции кнопки. Добавьте еще одну кнопку "JButton" слева от первой с учетом необходимого пространства до нижнего края элемента "JFrame". Настройте отображаемый текст для каждого элемента "JButton". Введите текст OK для левой кнопки и текст Cancel для правой. Обратите внимание, что ширина кнопок корректируется в соответствии с длиной нового текста. Настройте сохранение одинакового размера кнопок "JButton". Для этого выделите обе кнопки, щелкните правой кнопкой мыши одну из них и выберите "Same Size > Same Width" в появившемся меню. В форме появляются элементы JButton, а соответствующие им узлы отображаются в окне "Inspector". К исходному файлу формы, который можно просмотреть в режиме просмотра исходного кода, добавляется код элементов JButton. Размер кнопок "JButton" корректируется согласно размеру кнопки с самым длинным текстом.

Последней необходимой операцией является удаление текста контейнера из различных элементов. Несмотря на то, что удаление этих текстов только после получения требуемой структуры формы позволяет избежать проблем с выравниванием элементов и установкой их привязок, большинство разработчиков обычно удаляют этот текст еще в процессе размещения элементов в форме. Последовательно выделите и удалите текст контейнера для каждого поля "JTextField" в форме. Тексты элементов "JComboBox" и "JList" еще потребуются для работы со следующим руководством.

Для просмотра демонстрации предыдущей процедуры щелкните значок Демонстрация.

наверх

Предварительной просмотр интерфейса пользователя

Теперь, после успешного создания интерфейса пользователя для приложения ContactEditor, следует его протестировать. Форму можно просмотреть в режиме предварительного просмотра путем нажатия кнопки "Preview Form" () на панели инструментов GUI Builder. Форма открывается в собственном окне, что позволяет протестировать ее перед переходом к сборке и исполнению.

наверх

Развертывание приложений с графическим интерфейсом

Чтобы интерфейсы, созданные в GUI Builder, сохраняли свою работоспособность вне среды IDE, приложение должно компилироваться с использованием классов диспетчера компоновки GroupLayout; эти классы также должны быть доступны во время выполнения. Эти классы имеются в Java SE 6, но отсутствуют в Java SE 5. В случае разработки приложения для выполнения на платформе Java SE 5 необходима библиотека форматных расширений Swing Layout Extensions.

Если среда IDE работает на базе JDK 5, код приложения автоматически создается с учетом использования этой библиотеки. При развертывании приложения необходимо добавить библиотеку Swing Layout Extensions в пакет приложения. При сборке приложения ("Build > Build Main Project") среда IDE автоматически помещает копию архива JAR библиотеки в папку dist/lib приложения. Среда IDE также добавляет к записи Class-Path в файле manifest.mf архива JAR приложения все архивы JAR, находящиеся в папке dist/lib.

Если среда IDE работает на базе JDK 6, код приложения автоматически создается так, чтобы в нем использовались классы GroupLayout, имеющиеся в Java SE 6. Это означает, что приложение может развертываться для исполнения в системах с установленной средой Java SE 6 без добавления в пакет приложения библиотеки Swing Layout Extensions.

Подготовка дистрибутива и запуск отдельных приложений с графическим интерфейсом

Для подготовки дистрибутива приложения с графическим интерфейсом, который будет использоваться вне среды IDE:

• Поместите папку dist проекта в архив ZIP. (Папка dist может также содержать папку lib, которую тоже потребуется добавить в архив.)

Для запуска отдельного приложения с графическим интерфейсом из командной строки:

1. Перейдите к папке dist проекта.
2. Введите следующее:

   java -jar <jar_name>.jar

Примечание: При возникновении следующей ошибки:

Exception in thread "main" java.lang.NoClassDefFoundError: org/jdesktop/layout/GroupLayout$Group

Проверьте, что в файле manifest.mf прописана установленная версия библиотеки Swing Layout Extensions.

Для получения дополнительных сведений о библиотеке Swing Layout Extensions см. сайт проекта Swing Layout Extensions.

наверх

Дополнительная информация

Изучение руководства по проектированию графического интерфейса Swing в среде IDE завершено. Для получения сведений о добавлении функциональных возможностей к создаваемому графическому интерфейсу см.:

• Введение в разработку графического интерфейса
• Создание настольного приложения на Java для работы с базой данных
• Часто задаваемые вопросы по GUI Builder
• Учебная карта по приложениям на Java с графическим интерфейсом

наверх