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

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

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

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

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

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

Для добавления панели JPanel:

1. В окне "Palette" выберите элемент "Panel" в категории "Swing" щелчком мыши.

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

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

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

Для изменения размеров панели JPanel:

1. Выберите только что добавленную панель JPanel. По периметру элемента появляются небольшие квадратные метки-манипуляторы.

2. Щелкните метку-манипулятор на правой границе панели JPanel и, не отпуская кнопки мыши, перемещайте метку до тех пор, пока рядом с границей не появится пунктирная направляющая.

3. Отпустите кнопку мыши. Размер элемента будет изменен.

Теперь элемент JPanel расширен и охватывает пространства между левым и правым полем контейнера с учетом рекомендуемого смещения (см. рисунок ниже).

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

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

Для добавления границ панелей JPanel с заголовком:

1. Выберите верхнюю панель JPanel в GUI Builder.

2. В окне "Properties" нажмите кнопку с многоточием (...) рядом со свойством "Border".

3. В появившемся редакторе границ JPanel Border выберите узел "TitledBorder" на панели "Available Borders".

4. Ниже на панели "Properties" введите Name в качестве значения свойства "Title" (заголовок).

5. Нажмите кнопку с многоточием (...) рядом со свойством "Font" (шрифт), выберите "Bold" в поле "Font Style" и введите "12" в поле "Size". Нажмите кнопку "OK" для закрытия диалоговых окон.

6. Выберите нижнюю панель JPanel и повторите действия 2–5, но на этот раз щелкните правой кнопкой мыши панель JPanel и откройте окно "Properties" с помощью контекстного меню. Введите E-mail в поле свойства "Title".

К обоим элементам JPanel теперь добавлены границы с заголовками.

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

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

Для добавления к форме элемента "JLabel":

1. В окне "Palette" выберите элемент "Label" в категории "Swing".

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

Элемент "JLabel" добавляется к форме, а в окне "Inspector" появляется соответствующий узел.

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

Для изменения текста элемента "JLabel":

1. Дважды щелкните элемент "JLabel" для выбора текста.

2. Введите First Name: и нажмите клавишу Enter.

Отображается новое имя "JLabel", и ширина элемента корректируется согласно новому тексту.

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

Для добавления поля "JTextField" к форме:

1. В окне "Palette" выберите элемент "Text Field" в категории "Swing".

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

Элемент "JTextField" размещается в форме в позиции, соответствующей базовой линии "JLabel", как показано на следующем рисунке. Обратите внимание на то, что элемент "JLabel" был немного смещен вниз с целью его выравнивания с базовой линией текстового поля, расположенного чуть выше. Как и следовало ожидать, в окне "Inspector" появился новый узел, соответствующий добавленному элементу.

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

Для изменения размеров элемента "JTextField":

1. Выберите только что добавленный элемент "JTextField" справа от элемента "JLabel" Last Name:.

2. Перетащите метку-манипулятор правого края элемента "JTextField" к правой границе панели JPanel.

3. После появления вертикальных направляющих, отражающих расстояние между текстовым полем и правым краем панели JPanel, отпустите кнопку мыши для изменения размеров "JTextField".

Правая граница элемента "JTextField" будет выровнена в соответствии с предложенным полем панели JPanel.

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

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

Для добавления нескольких "JLabel" к форме:

1. В окне "Palette" выберите элемент "Label" в категории "Swing" щелчком мыши.

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

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

Элементы "JLabel" добавляются к форме и образуют в ней второй ряд. В окне "Inspector" появляются узлы, соответствующие добавленным элементам.

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

Для изменения текста, отображаемого в элементах "JLabel":

1. Дважды щелкните первый элемент "JLabel" для выбора текста, который будет отображаться в этом элементе.

2. Введите Title: и нажмите клавишу Enter.

3. Повторите действия 1 и 2 путем ввода Nickname: в качестве значения свойства "Name" элемента "JLabel".

Новые имена "JLabel" отображаются в форме и смещаются из-за изменения ширины текста в результате изменения.

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

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

Для вставки текстового поля "JTextField" между двумя элементами "JLabel":

1. В окне "Palette" выберите элемент "Text Field" в категории "Swing".

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

3. Щелкните для размещения поля "JTextField" между элементами "JLabel" Title: и Nickname:.

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

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

Для добавления элемента "JTextField":

1. В окне "Palette" выберите элемент "Text Field" в категории "Swing".

2. Переместите курсор вправо от подписи Nickname и щелкните для размещения текстового поля.

Поле "JTextField" размещается в указанной позиции слева от элемента "JLabel".

Для изменения размеров элемента "JTextField":

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

2. После появления вертикальных направляющих, отражающих расстояние между текстовым полем и краями панели JPanel, отпустите кнопку мыши для изменения размеров элемента "JTextField".

Правая граница элемента "JTextField" выравнивается согласно рекомендуемому размеру поля панели JPanel, и происходит соответствующая автоматическая корректировка размеров.