Вызов настройщика GridBag

Для отображения настройщика GridBag выполните следующие действия:

1. В режиме конструктора выберите форму JFrame.
2. Щелкните форму правой кнопкой мыши и выберите Customize Layout ("Настроить компоновку").
   Откроется диалоговое окно настройки компоновки, как показано ниже.

Примечание. В этом руководстве GridBagLayout уже задан. При работе с другой формой в действии 2 выше щелкните форму правой кнопкой мыши и выберите Set Layout ("Установить компоновку") > Grid Bag Layout ("Структура Grid Bag") (в результате активируется элемент меню Customize Layout ("Настроить компоновку")) и завершите процедуру.

Расширенные функции

В данном разделе мы используем расширенные функции настройщика GridBag для реорганизации компонентов формы ContactsAdvancedInitial в соответствии с целевой компоновкой, показанной ниже.

Примечание. Для просмотра целевой компоновки в среде IDE NetBeans разверните на вкладке Projects ("Проекты") Source Packages ("Пакеты исходного кода") > tutorial и дважды щелкните ContactsAdvancedFinal.java.
Форма ContactsAdvancedFinal, включающая целевую компоновку, откроется в представлении проектирования конструктора графического интерфейса.

Вставка новой строки

Раздел Phone ("Телефон") существующей компоновки включает три записи телефонов. Чтобы дополнить его добавлением новой метки и тестового поля (например, имени пользователя Skype между Cell Phone: ("Мобильный телефон:") и Home Phone: ("Домашний телефон")), создайте там новую строку:

1. В диалоговом окне Customize Layout ("Настройка компоновки") щелкните заголовок строки, содержащий Home Phone:.
2. Выберите Insert Row Before ("Вставить строку перед").

   

   Добавляется новая строка, как показано на следующем рисунке.

   

Добавление новых компонентов

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

1. Щелкните правой кнопкой мыши первую ячейку добавленной строки.
2. Выберите в контекстном меню Add Components ("Добавление компонентов") > Swing Controls ("Элементы управления Swing") > Label ("Метка"), как показано ниже.

   

   Выделенное JLabel1 отображается в первой ячейке.

3. Щелкните правой кнопкой мыши первую ячейку добавленной строки.
4. В контекстном меню выберите Add Components ("Добавление компонентов") > Swing Controls ("Элементы управления Swing") > Text Field ("Текстовое поле").
   Выделенное полеJTextField1 отображается во второй ячейке.

   

После добавления компонентов необходимо указать их ограничения gridbag, чтобы выровнять их с другими компонентами.

Выберите поле JTextField1 в области сетки и выполните следующие действия в Property Sheet ("Таблица свойств"):

1. В поле со списком Grid Width ("Ширина сетки") введите 3 и нажмите клавишу ВВОД.
2. В поле со списком Fill ("Заполнение") выберите horizontal.
3. В поле со списком Anchor ("Привязка") прокрутите вниз и выберите Baseline.
4. В текстовом поле Weight X ("Вес по Х") введите 1.0 и нажмите клавишу ВВОД.

В области сетки выберите компонент JLabel1 и укажите его ограничение Anchor ("Привязка"), прокрутив вниз и выбрав Baseline Leading в Property Sheet ("Таблица свойств").

Выберите компоненты JLabel1 и JTextField1 в области сетки, затем нажмите кнопку обзора () справа от текстового поля Insets. Отобразится диалоговое окно Insets ("Вставки"). Введите 5 в текстовое поле Top: ("Верх:") и нажмите кнопку "OК".

Форма должна выглядеть, как показано ниже.

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

Чтобы установить отображаемый текст для JLabel1, выполните следующие действия:

1. Нажмите кнопку Close ("Закрыть"), чтобы закрыть диалоговое окно Customize Layout ("Настройка компоновки").
2. В представлении Design ("Проект") выберите JLabel1 и нажмите клавишу F2 (либо выберите Edit Text ("Изменить текст") из контекстного меню).
3. Удалите выбранный текст и введите Skype:.
4. Нажмите клавишу ВВОД.

Чтобы удалить текст компонента JTextField1, выполните следующие действия:

1. В представлении Design ("Проект") выберите JTextField1 и нажмите клавишу F2 (либо выберите Edit Text ("Изменить текст") из контекстного меню).
2. Удалите выбранный текст и нажмите клавишу ВВОД.

Реорганизация компоновки

Настройщик GridBag позволяет сэкономить время и усилия, быстро меняя положение компонентов формы на нужное.

Чтобы сменить компоновку раздела Phone ("Телефон") и положение четырех существующих текстовых полей с одного столбца на два столбца с двумя текстовыми полями каждый, выполните следующие действия:

1. Щелкните форму правой кнопкой мыши и выберите Customize Layout ("Настроить структуру") из контекстного меню.
2. В диалоговом окне настройки структуры щелкните четыре компонента JTextField, удерживая клавишу CTRL, чтобы выбрать их все.
3. Перетащите правый край текстовых полей влево в положение, при котором текстовые поля занимают только второй столбец сетки (и не занимают третий и четвертый столбцы сетки).

   

   Настройщик GridBag может изменить размер нескольких компонентов одновременно, тем самым давая место для второго столбца текстовых полей.

4. Щелкните вне формы, чтобы отменить выбор текстовых полей, размер которых был изменен.
5. Удерживая клавишу CTRL, щелкните компоненты Skype:, Home Phone:, JLabel и JTextField в разделе Phone, чтобы выбрать их.
6. Наведите курсор на выбранные компоненты и перетащите их направо от двух верхних текстовых полей.

   

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

   После перемещения компонентов форма должна выглядеть как показано ниже.

   

   Чтобы избавиться от лишних строк 10 и 11, щелкните правой кнопкой мыши заголовки строк и выберите Delete Row ("Удалить строку") из контекстного меню.

   Раздел Phone станет более компактным.

   

Чтобы исправить интервал второй строки здесь, выполните следующие действия:

1. Удерживая клавишу CTRL, щелкните метки Skype: и Home Phone:, чтобы выбрать их в области сетки.
2. Нажмите кнопку просмотра () справа от текстового поля Insets.
   Отобразится диалоговое окно Insets ("Вставки").
3. Введите 5 в текстовое поле Left: ("Лево:") и нажмите кнопку "OК".

Введение подконтейнеров

Компоновка на основе сетки порой создает ненужные зависимости, которые необходимо решать посредством подконтейнеров.

Если нажать кнопку тестирования компоновки на панели инструментов ( ) и проверить, насколько можно изменить горизонтальный размер текущей компоновки, то можно заметить, что вокруг кнопок Browse, OК и Cancel создается нежелательное пустое пространство.

Это происходит потому, что четвертый столбец состоит как из текстовых полей, так и из кнопок (первые должны вырасти, вторые же нет). Необходимо изменить компоновку, чтобы дополнительное пространство вокруг кнопок Browse ("Просмотр") было занято текстовыми полями Street и City:. Текущая компоновка гарантирует, что правый край текстовых полей Street: и City: будет на том же уровне по вертикали, что и левый край текстового поля Home Phone:. Чтобы сделать эти позиции независимыми, выполните следующие действия:

1. Удерживая клавишу CTRL, щелкните текстовое полеStreet: и кнопку Browse справа от него, чтобы выбрать их.
2. Щелкните выбранное правой кнопкой мыши и выберите Enclose in Container ("Заключить в контейнер") из контекстного меню.

   

   После заключения компонентов в подконтейнер граница между меткой Home Phone: и текстовым полем становится независимой от границы между текстовым полем Street и кнопкой.

   Примечание. При действии Enclose in Container ("Заключить в контейнер") создается новый подконтейнер, ячейки в котором занимаются выбранными компонентами. Выбранные компоненты перемещаются в новый контейнер, но их относительное расположение и другие ограничения компоновки сохраняются.

Повторите два действия, приведенных выше, для текстового поля City: и кнопки Browse справа от него, чтобы заключить их в подконтейнер, как показано ниже.

Теперь нужно устранить нежелательное пустое пространство вокруг кнопок OК и Cancel. Это делается следующим образом:

1. Нажмите кнопку Close ("Закрыть"), чтобы отменить выбор компонентов, заключенных в подконтейнер, щелкните форму правой кнопкой мыши и выберите Customize Layout ("Настройка компоновки") из контекстного меню.
2. Удерживая клавишу CTRL, щелкните кнопкиOК и Cancel внизу формы, чтобы выбрать их.
3. Щелкните выбранное правой кнопкой мыши и выберите Enclose in Container ("Заключить в контейнер") из контекстного меню.
   Для кнопок будет создан новый подконтейнер.

   

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

Чтобы изменить привязку для всего подконтейнера, выполните следующие действия:

1. Убедитесь, что выбран подконтейнер с кнопками OК и Cancel, после чего щелкните кнопку со стрелкой () справа от поля со списком Anchor ("Привязка").
2. Прокрутите вниз и выберите Line End ("Конец строки") из списка.

   

Теперь компоновка выглядит нормально, но подконтейнер с кнопками OК и Cancel занимает только последние две ячейки последней строки.
Если кнопки OК и Cancel станут шире (например при переводе на другой язык), они отодвинут правые края текстовых полей Work Phone: и Cell Phone:.
Чтобы избежать этой потенциальной проблемы и позволить подконтейнеру занять все ячейки в нижней строке, выберите подконтейнер и перетащите его левую границу в начало строки.

Теперь подконтейнер занимает все ячейки в нижней строке.

Переходы между контейнерами

Для добавления к подконтейнеру новых компонентов (например, кнопки Help к имеющимся кнопкам OК и Cancel) необходимо переключиться с основного контейнера на подконтейнер перед редактированием компоновки последнего.

Выполните описанные ниже действия для добавления кнопки к существующему подконтейнеру.

1. Щелкните подконтейнер с кнопками OК и Cancel, чтобы выбрать его.
2. Щелкните контейнер правой кнопкой мыши, чтобы вывести контекстное меню, и выберите из меню Design This Container ("Редактировать данный контейнер").

   

3. Щелкните правой кнопкой мыши второй заголовок столбца и выберите Insert Column After ("Вставить столбец после") из контекстного меню.
   Отобразится пустая ячейка для новой кнопки.

   

4. Щелкните созданную ячейку правой кнопкой мыши и выберите Add Component ("Добавить компонент") > Swing Controls ("Элементы управления Swing") > Button ("Кнопка") из контекстного меню.
   Будет добавлена новая кнопка jButton1.

   

5. Нажмите кнопку привязки к базовой линии () в настройщике свойств, чтобы выровнять новую кнопку с двумя существующими в строке.
6. Чтобы увидеть, как основной контейнер выглядит сейчас, щелкните созданный подконтейнер правой кнопкой мыши и выберите Design Parent Container ("Проектировать родительский контейнер") из контекстного меню.

   

   Примечание. Контекстное меню не отображается, если щелкать кнопки правой клавишей мыши.

Создание компоновки завершено.
Осталось последнее изменение, не относящееся к компоновке контейнера.
Для переименования кнопки выполните следующие действия:

1. Нажмите кнопку Close ("Закрыть"), чтобы закрыть диалоговое окно Customize Layout ("Настройка компоновки").
2. В представлении Design ("Проект") выберите компонент jButton1 и нажмите клавишу F2 (либо выберите Edit Text ("Изменить текст") из контекстного меню).
3. Удалите выбранный текст и введите Help.
4. Нажмите клавишу ВВОД.

   

Заключение

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

Перейти к разделу Создание простой формы Java с помощью настройщика GridBag

В начало

Дополнительные сведения

Вы закончили учебный курс по созданию расширенной формы Java с помощью настройщика GridBag. Сведения о добавлении функциональных возможностей к создаваемому графическому интерфейсу приведены в разделах:

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

В начало