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

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

Каждая из статей в этом курсе охватывает свой набор функций.

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

Содержание

Содержимое на этой странице применимо к IDE NetBeans 7.1 или более поздней версии

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

Программное обеспечение или материал Требуемая версия
IDE NetBeans Версия 7.1 или более поздние
Комплект для разработчика на языке Java (JDK) Версия 6, 7 или 8
gbcustomizer-advanced-tutorial.zip Архив с демонстрационным проектом, содержащим начальную и целевую компоновки учебного курса.

Примечания

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

Открытие примера проекта

До начала компоновки компонентов с помощью настройщика GridBag, загрузите gbcustomizer-advanced-tutorial.zip, разархивируйте проект GridBagCustomizerAdvancedTutorial на жесткий диск и откройте его в IDE NetBeans.

  1. Загрузите проект gbcustomizer-advanced-tutorial.zip в любое место на своем компьютере.
  2. На вкладке 'Проекты' в IDE NetBeans выберите 'Открыть проект' в меню 'Файл', перейдите в проект GridBagCustomizerAdvancedTutorial, распакованный на предыдущем этапе, и нажмите 'Открыть проект'. Папка проекта может находиться в содержащей его папке, также именуемой GridBagCustomizerAdvancedTutorial.

    Примечание. В проекте GridBagCustomizerAdvancedTutorial используются библиотеки классов JUnit и JUnit 4, которые можно найти в центре обновлений. Необходимо щелкнуть 'Решить проблемы' в диалоговом окне 'Открыть проект', затем щелкните 'Решить' в диалоговом окне 'решить проблемы ссылок' и установить подключаемый модуль в соответствии с инструкциями в установщике IDE NetBeans. После завершения установки нажмите 'Готово', чтобы закрыть диалоговое окно установщика IDE NetBeans, затем нажмите 'Закрыть', чтобы закрыть диалоговое окно 'Разрешение проблем ссылок'.

  3. Разверните Пакеты исходного кода > учебное руководство и дважды щелкните ContactsAdvancedInitial.java.
    В конструкторе графического интерфейса откроется образец формы в режиме конструктора.

Настройщик GridBag

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

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

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

Настройщик GridBag

Примечание. В этом учебном курсе GridBagLayout уже задан. При работе с другой формой, в шаге 2 выше, щелкните правой кнопкой мыши форму и выберите Настроить компоновку > Компоновка GridBag (при этом будет включен элемент меню Настройка компоновки) и завершите процедуру.

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

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

Компоновка целевого элемента

Примечание. Для просмотра целевой компоновки в используемой IDE NetBeans на вкладке 'Проекты' разверните учебный курс 'Исходные пакеты' > и дважды щелкните ContactsAdvancedFinal.java.
Форма ContactsAdvancedFinal, включающая целевую компоновку, откроется в представлении проектирования конструктора графического интерфейса.

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

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

  1. В диалоговом окне 'Настройка компоновки' щелкните правой кнопкой мыши заголовок строки, содержащей данные Домашний телефон.
  2. Выберите Insert Row Before ("Вставить строку перед").

    Контекстное меню - Вставить строку

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

    Контекстное меню - Строка вставлена

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

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

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

    Контекстное меню - Добавить метку

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

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

    Контекстное меню - Выделенный jTextField1

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

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

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

jTextField1 - Ограничения указаны

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

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

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

Ограничения указаны

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

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

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

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

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

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

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

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

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

    Текстовые поля занимают один столбец

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

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

    Текстовые поля перемещаются во второй столбец

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

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

    Дополнительные строки

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

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

    Текстовые поля перемещены во второй столбец

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

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

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

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

Если нажать кнопку 'Проверить макет' на панели инструментов (Кнопка 'Проверка компоновки' ) и проверить изменение размера по горизонтали для текущего макета, будет заметно, что вокруг кнопок 'Обзор', 'ОК' и 'Отмена' создаются нежелательные пустые места.

Ненужное пространство

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

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

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

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

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

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

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

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

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

    Кнопки во вложенном контейнере

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

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

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

    Кнопки, привязанные к концу строки

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

Вложенный контейнер с измененным размеров

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

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

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

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

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

    Разработка вложенного контейнера

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

    Пустая ячейка

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

    Добавлена новая кнопка

  5. Нажмите кнопку привязки, связанной с базовой линией, (Привязка, связанная с базовой линией) в 'Средстве настройки свойств' для выравнивания новой кнопки с двумя существующими в строке.
  6. Нажмите кнопку обзора (Кнопка обзора) справа от текстового поля 'Вставки'. Отобразится диалоговое окно "Вставки". Введите 5 в текстовое поле 'Вверх' и нажмите OK.
  7. Чтобы проверить, как основной макет контейнера выглядит сейчас, щелкните правой кнопкой мыши разработанный вложенный контейнер и выберите в контекстном меню Конструировать родительский контейнер.

    Редактировать родительский контейнер

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

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

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

    Окончательная компоновка

Заключение

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

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

В начало


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

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

В начало

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo