// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Создание расширенной формы Java с помощью настройщика GridBag
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Создание расширенной формы Java с помощью настройщика GridBag - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Создание расширенной формы Java с помощью настройщика GridBag

Авторы: Ян Стола (Jan Stola), Томас Павек (Tomas Pavek), Алена Сташкова (Alyona Stashkova)

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

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

* Часть 1. link:../java/gbcustomizer-basic.html[+Создание простой формы Java с помощью настройщика GridBag+]
* Часть 2. Создание расширенной формы Java с помощью настройщика GridBag

В link:../java/gbcustomizer-basic.html[+первом учебном курсе в этой серии+] описывается изменение простой формы Java с помощью базовых функций настройщика GridBag IDE NetBeans. Этот учебный курс позволяет изучить использование дополнительных функции настройщика GridBag для изменения компоновки существующей формы.


image::images/netbeans-stamp-80-74.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.1 или более поздней версии"]


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

|===
|Программное обеспечение или материал |Требуемая версия 

|link:http://netbeans.org/downloads/index.html[+IDE NetBeans+] |Версия 7.1 или более поздние 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Комплект для разработчика на языке Java (JDK)+] |Версия 6, 7 или 8 

|link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+] |Архив с демонстрационным проектом, содержащим начальную и целевую компоновки учебного курса. 
|===

*Примечания*

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


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

До начала компоновки компонентов с помощью настройщика GridBag, загрузите link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+], разархивируйте проект  ``GridBagCustomizerAdvancedTutorial``  на жесткий диск и откройте его в IDE NetBeans.

1. Загрузите проект link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+] в любое место на своем компьютере.
2. На вкладке 'Проекты' в IDE NetBeans выберите 'Открыть проект' в меню 'Файл', перейдите в проект  ``GridBagCustomizerAdvancedTutorial`` , распакованный на предыдущем этапе, и нажмите 'Открыть проект'. Папка проекта может находиться в содержащей его папке, также именуемой  ``GridBagCustomizerAdvancedTutorial`` .

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


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

[.feature]
--
image::images/sampleform-small.png[role="left", link="images/sampleform.png"]
--


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

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

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

[.feature]
--
image::images/customizerdialog-small.png[role="left", link="images/customizerdialog.png"]
--

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


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

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

image::images/targetlayout.png[]

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


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

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

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

image::images/insertrow.png[]

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

image::images/rowinserted.png[]


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

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

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

[.feature]
--
image::images/addcomponent-small.png[role="left", link="images/addcomponent.png"]
--

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


[start=3]
. Щелкните правой кнопкой мыши первую ячейку добавленной строки.

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

image::images/highlightedtextfield.png[]

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

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

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

image::images/textfieldconstraints.png[]

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

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

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

image::images/constraintsset.png[]

*Примечание.* Настройщик 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. Перетащите правый край текстовых полей влево в положение, при котором текстовые поля занимают только второй столбец сетки (и не занимают третий и четвертый столбцы сетки).

image::images/textfieldsonecolumn.png[]

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


[start=4]
. Щелкните вне формы, чтобы отменить выбор текстовых полей, размер которых был изменен.

[start=5]
. Удерживая клавишу CTRL, щелкните компоненты  ``Skype:`` ,  ``Home Phone:`` ,  ``JLabel``  и  ``JTextField``  в разделе  ``Phone`` , чтобы выбрать их.

[start=6]
. Наведите курсор на выбранные компоненты и перетащите их направо от двух верхних текстовых полей.

image::images/movesecondcolumn.png[]

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

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

image::images/extrarows.png[]

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

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

image::images/textfieldsmoved.png[]

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

1. Удерживая клавишу CTRL, щелкните метки  ``Skype:``  и  ``Home Phone:`` , чтобы выбрать их в области сетки.
2. Нажмите кнопку обзора (image::images/browsebutton.png[]) справа от текстового поля  ``Вставки`` .
Отобразится диалоговое окно  ``Insets``  ("Вставки").

[start=3]
. Введите  ``5``  в текстовое поле  ``Left:``  ("Лево:") и нажмите кнопку "OК".


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

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

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

[.feature]
--
image::images/unwantedspace-small.png[role="left", link="images/unwantedspace.png"]
--

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

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

[.feature]
--
image::images/enclose-small.png[role="left", link="images/enclose.png"]
--

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

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

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

image::images/enclosecity.png[]

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

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

image::images/subcontainerbuttons.png[]

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

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

1. Убедитесь, что выбран вложенный контейнер с кнопками  ``OK``  и  ``Отмена``  и щелкните кнопку со стрелкой (image::images/arrowbutton.png[]) справа от поля со списком  ``Привязка`` .
2. Прокрутите вниз и выберите  ``Line End``  ("Конец строки") из списка.

image::images/subcontainerlineend.png[]

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

image::images/subcontainerresized.png[]

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


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

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

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

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

[.feature]
--
image::images/designsubcontainer-small.png[role="left", link="images/designsubcontainer.png"]
--


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

[.feature]
--
image::images/emptycell-small.png[role="left", link="images/emptycell.png"]
--


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

[.feature]
--
image::images/newbutton-small.png[role="left", link="images/newbutton.png"]
--


[start=5]
. Нажмите кнопку привязки, связанной с базовой линией, (image::images/baselineanchor.png[]) в 'Средстве настройки свойств' для выравнивания новой кнопки с двумя существующими в строке.

[start=6]
. Нажмите кнопку обзора (image::images/browsebutton.png[]) справа от текстового поля 'Вставки'. Отобразится диалоговое окно "Вставки". Введите 5 в текстовое поле 'Вверх' и нажмите OK.

[start=7]
. Чтобы проверить, как основной макет контейнера выглядит сейчас, щелкните правой кнопкой мыши разработанный вложенный контейнер и выберите в контекстном меню  ``Конструировать родительский контейнер`` .

image::images/designparentcontainer.png[]

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

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

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

image::images/finallayout.png[]


== Заключение

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

Перейти к разделу link:../java/gbcustomizer-basic.html[+Создание простой формы Java с помощью настройщика GridBag+]

<<top,В начало>>

link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20an%20Advanced%20Java%20Form%20Using%20the%20GridBag%20Customizer[+Отправить отзыв по этому учебному курсу+]


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

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

* link:gui-functionality.html[+Введение в разработку графического интерфейса +]
* link:gui-image-display.html[+Обработка изображений в приложении с графическим интерфейсом+]
* link:http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29[+Часто задаваемые вопросы по GUI Builder+]
* link:../../trails/matisse.html[+Учебная карта по приложениям с графическим интерфейсом Java +]
* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+Реализация Java GUI+] в документе _Разработка приложений в IDE NetBeans_

<<top,В начало>>