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

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

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

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

Для выравнивания элементов:

1. Выберите элементы "JLabel" First Name: и Title: слева от формы.

2. Нажмите кнопку "Align Right in Column" ( ) на панели инструментов. Также можно щелкнуть правой кнопкой мыши и выбрать "Align > Right" в появившемся меню.

3. Повторите эти действия для элементов "JLabel" Last Name: и Nickname:.

Элементы располагаются так, чтобы правые границы подписей были выровнены. Точки привязки обновляются и указывают на то, что элементы были сгруппированы.

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

Для определения возможности изменения размеров элемента:

1. Щелкните два вставленные элемента "JTextField" для их выбора в GUI Builder.

2. После выбора обоих текстовых полей щелкните правой кнопкой мыши любой из них и выберите "Auto Resizing > Horizontal" в появившемся меню.

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

Для настройки одинакового размера элементов:

1. Щелкните все четыре элемента "JTextField" в форме для их выбора.

2. После выбора элементов JTextField щелкните правой кнопкой мыши любой из них и выберите "Set Default Size" в появившемся меню.

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

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

Для выравнивания "JLabel" в соответствии с позицией группы элементов:

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

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

Элемент "JLabel" фиксируется в положении с выравниванием по правому краю столбца "JLabel" выше. GUI Builder обновляет линии выравнивания с учетом интервалов и привязок элемента.

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

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

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

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

Для выравнивания базовых линий элементов:

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

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

Элемент фиксируется в положении с выравниванием по базовой линии текста в "JLabel" слева. GUI Builder отображает линии выравнивания с учетом интервалов и привязок элемента.

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

1. Выберите поле списка "ComboBox" в GUI Builder.

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

Правая граница "JComboBox" будет выровнена в соответствии с предложенным полем JPanel, а для ширины этого элемента будет установлено автоматическое изменение согласно структуре формы.

Резюме

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

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

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

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

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

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

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

3. Дважды щелкните элемент "JLabel" для выбора текста. Затем введите E-mail Address: и нажмите клавишу Enter.

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

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

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

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

Элемент "JTextField" фиксируется в позиции справа от "JLabel" E-mail Address: и привязывается к этому элементу. В окне "Inspector" появляется связанный с ним узел.

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

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

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

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

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

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

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

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

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

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

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

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

1. В окне "Palette" выберите элемент "Button".

2. Поместите кнопку "JButton" над правой границей поля "JTextField" E-mail Address на нижней панели JPanel. После появления направляющих, указывающих на то, что базовая линия кнопки "JButton" и правая граница выровнены с полем "JTextField", щелкните при нажатой клавише Shift для размещения первой кнопки по правому краю элемента "JFrame". После отпускания кнопки мыши ширина "JTextField" уменьшается так, чтобы рядом поместилась кнопка "JButton".

3. Наведите курсор на верхний правый угол списка "JList" на нижней панели JPanel. После появления направляющих, указывающий на то, что верхняя и правая границы кнопки выровнены с полем "JList", щелкните при нажатой клавише Shift для размещения второй кнопки по правому краю элемента "JFrame".

4. Добавьте две дополнительные кнопки "JButton" к кнопкам, которые уже вставлены в форму, так, чтобы они образовали столбец. Эти кнопки должны размещаться с учетом требуемых интервалов, которые должны иметь одинаковый размер. Если клавиша Shift не была отпущена до размещения последней кнопки "JButton", просто нажмите клавишу Escape.

5. Настройте отображаемый текст для каждого элемента "JButton". (Для изменения текста кнопки щелкните кнопку правой клавишей мыши и выберите "Edit Text". В качестве альтернативы можно щелкнуть кнопку, выдержать паузу и щелкнуть еще раз.) Для первой сверху кнопки введите Add, для второй – Edit, для третьей – Remove, для четвертой – As Default.

Элементы "JButton" фиксируются в позициях, обозначенных направляющими. Ширина кнопок корректируется так, чтобы поместился новый текст.

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

Для настройки одинакового размера элементов:

1. Выделите все четыре кнопки с помощью мыши, удерживая нажатой клавишу Control.

2. Щелкните правой кнопкой мыши одну из них и выберите "Same Size > Same Width" в появившемся меню.

Размер кнопок "JButton" корректируется согласно размеру кнопки с самым длинным текстом.

Отступы

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

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

Для добавления отступа с размещением переключателей "JRadioButton" под одним "JLabel":

1. Добавьте к форме элемент "JLabel" с текстом Mail Format, расположив его под полем "JList". Проверьте, что этот элемент выровнен по левому краю списка.

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

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

4. Переместите курсор вправо от первого элемента "JRadioButton". Щелкните мышью при нажатой клавише Shift для размещения второго и третьего переключателя, учитывая при этом предлагаемый интервал между этими элементами. Перед размещением последнего переключателя следует отпустить и снова нажать клавишу Shift.

5. Настройте отображаемый текст для каждого элемента "JRadioButton". (Для изменения текста кнопки щелкните кнопку правой клавишей мыши и выберите "Edit Text". В качестве альтернативы можно щелкнуть кнопку, выдержать паузу и щелкнуть еще раз.) Для первого слева переключателя укажите HTML, для второго – Plain Text , для третьего – Custom.

Итак, к форме добавлены три элемента "JRadioButton", которые расположены под элементом "JLabel" Mail Format с требуемым отступом.

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

Для добавления переключателей к группе кнопок:

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

2. Щелкните в любом месте в рамках области проектирования GUI Builder для добавления элемента "ButtonGroup" к форме. Следует отметить, что элемент "ButtonGroup" не появляется непосредственно в форме, однако отображается в области "Other Component" в окне "Inspector".

3. Выберите в форме все три кнопки "JRadioButton".

4. В окне "Properties" выберите "buttonGroup1" в поле списка свойства "buttonGroup".

К группе кнопок добавляются три переключателя "JRadioButton".