// 
//     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. Создание простой формы Java с помощью настройщика GridBag
* Часть 2. Создание расширенной формы Java с помощью настройщика 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-basic-tutorial.zip[+gbcustomizer-basic-tutorial.zip+] |Архив с демонстрационным проектом, содержащим начальную и целевую компоновки учебного курса. 
|===

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

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


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

1. Загрузите проект link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip[+gbcustomizer-basic-tutorial.zip+] в любую папку на своем компьютере и разархивируйте его.
2. На вкладке 'Проекты' выберите  ``Файл``  >  ``Открыть проект`` , перейдите в проект  ``gbcustomizer-basic-tutorial`` , распакованный на предыдущем этапе, и нажмите 'Открыть проект'. Папка проекта может находиться в содержащей папке, также именуемой  ``gbcustomizer-basic-tutorial`` .
3. В диалоговом окне 'Разрешение проблем ссылок' нажмите 'Разрешить'. IDE автоматически загружает библиотеки JUnit и JUnit 4. Установите требуемые подключаемые модули, следуя инструкциям установщика IDE NetBeans. По завершении установки нажмите кнопку "Готово".
4. Разверните  ``Source Packages``  ("Пакеты исходного кода") >  ``Tutorial``  ("Руководство") и дважды щелкните  ``ContactsBasicInitial.java`` . 
В конструкторе графического интерфейса откроется образец формы в режиме конструктора.

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


== Обзор настройщика GridBag

Настройщик разметки GridBag является одним из наиболее гибких и сложных средств управления компоновкой, предоставляемых платформой Java. Этот настройщик помещает компоненты в сетку столбцов и строк, позволяя указанным компонентам охватывать несколько строк или столбцов. Различные строки могут иметь разную высоту. Аналогично, различные столбцы могут иметь разную ширину. По сути, GridBagLayout помещает компоненты в прямоугольники (ячейки) сетки и использует предпочтительные размеры компонентов для определения размера ячеек.

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

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

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

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


=== Область сетки

Область Grid ("Сетка") находится на правой стороне диалогового окна Customize Layout ("Настроить компоновку"). Она показывает компоновку сетки компонентов.
Компоненты в этом образце формы уже добавлены, но не скомпонованы правильно.


=== Панель инструментов

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

image::images/toolbar.png[]


=== Настройщик свойств

Property Customizer ("Настройщик свойств") расположен в верхнем левом углу диалогового окна Customize Layout ("Настроить компоновку"). Это позволяет с легкостью вносить изменения в наиболее распространенные ограничения компоновки, такие как привязки ( ``anchor`` ), вставки ( ``inset`` ) и др.

image::images/propcustomizer.png[]


=== Таблица свойств

Property Sheet ("Таблица свойств") расположена под Property Customizer ("Настройщик свойств"). Она показывает ограничения компоновки выбранных компонентов.

image::images/propsheet.png[]


== Формирование компоновки

Компоненты для формы  ``ContactsBasicInitial``  добавляются в виде одной строки. GridBagLayout формирует такую структуру компонентов, если не указано ограничений компоновки.


=== Перемещение

Компоненты можно перемещать по желанию, используя простое перетаскивание. Выбранные компоненты выделяются зеленым. При перетаскивании компонента его свойства  ``Grid X``  ("Положение на оси Х сетки") и  ``Grid Y``  ("Положение на оси Y сетки") меняются, отражая его новое положение. Новые столбцы и строки автоматически создаются по мере надобности.

Для создания компоновки, подобной показанной на рисунке ниже, переместите компоненты из столбцов с 2 по 11 следующим образом:

1. Перетащите метку  ``Surname:``  и соседнее текстовое поле в первые две ячейки второй строки.
2. Перетащите метку  ``Street:``  и соседнее текстовое поле, а также соседнюю кнопку  ``Browse`` , в первые три ячейки третьей строки.
3. Перетащите метку  ``City:``  и соседнее текстовое поле, а также соседнюю кнопку  ``Browse`` , в первые три ячейки четвертой строки.
4. Перетащите метку  ``State:``  и соседнее поле со списком в первые две ячейки пятой строки.

Теперь размещение компонентов соответствует целевой структуре.

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

*Примечание.* При перемещении компонента целевые ячейки выделяются зеленым цветом.


=== Изменение размера

Размер компонента можно изменить перетаскиванием маленьких квадратных маркеров изменения размера, появляющихся по периметру компонента, когда он выбран.

Для изменения размера текстовых полей  ``First Name:``  и  ``Surname:`` , так чтобы они занимали две соседние ячейки, выполните описанные ниже действия:

1. Удерживая клавишу Control, щелкните два компонента JTextField, чтобы выбрать их.
2. Когда оба JTextField выбраны, наведите курсор на правый край ячейки, щелкните и перетащите, пока оранжевая выделенная вспомогательная линия не охватит соседние ячейки в столбце 2 справа.
3. Отпустите курсор, чтобы изменить размер компонентов.

Текстовые поля  ``First Name:``  и  ``Surname:``  расширяются, чтобы охватить две ячейки, как показано на следующей иллюстрации. Занятые ячейки здесь выделены.

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


=== Указание ограничения компоновки Fill ("Заполнить")

Хотя текстовые поля  ``First Name:``  и  ``Surname:``  занимают по две ячейки, для них указан предпочтительный размер, поэтому они размещаются в середине области отображения. Так что сейчас нам нужно заполнить всю область двух ячеек, используя ограничение компоновки  ``Fill``  ("Заполнить").

Чтобы текстовые поля стали достаточно широкими для заполнения их областей отображения по горизонтали без изменения своей высоты, в поле со списком  ``Fill``  ("Заполнить") области Property Sheet ("Таблица свойств") выберите  ``Horizontal``  ("По горизонтали").

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


=== Предварительный просмотр

Теперь, когда компоновка формы  ``ContactsBasicInitial``  успешно создана, можно опробовать в деле интерфейс, чтобы увидеть результаты. Предварительный просмотр формы во время работы осуществляется нажатием кнопки Test Layout ("Протестировать компоновку") (image::images/testbutton.png[]) на панели инструментов настройщика. Форма откроется в отдельном окне, позволяющим выполнить тестирование перед переходом к сборке и исполнению.

image::images/designpreview.png[]

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


=== Указания ограничений весов X и Y

Указание ограничений весов существенно влияет на внешний вид компонентов GridBagLayout. Вес используется для определения того, как распределять пространство между столбцами (Weight X (Вес X)) и строками (Weight Y (Вес Y)); это важно при указании поведения в случае изменения размеров.
Как правило, веса находятся в промежутке между крайними членами пропорции 0.0 и 1.0. Значения между ними используются по мере необходимости. Большее число указывает, что строке или столбцу компонента следует выделить больше пространства.

Если попытаться изменить горизонтальный размер просмотренного контейнера, то можно будет увидеть, что размер компонентов остался прежним, и они сосредоточены в центре контейнера. Даже поля  ``First Name:``  и  ``Surname:`` , у которых ограничение Fill ("Заполнение") установлено на Horizontal ("Горизонтальное"), не выросли в размере, поскольку ограничение Fill относится ко внутренней области ячейки, а не к ее размеру. Другими словами, значение атрибута Fill, отличное от  ``none`` , означает, что компонент *"может"* вырасти, а не что он *"хочет"* вырасти. 
Ограничения компоновки Weight X ("Вес Х") и Weight Y ("Вес Y") определяют, *"хочет"* ли компонент вырасти по горизонтали и вертикали. 
Когда два компонента в строке (или столбце) имеют ненулевые значения Weight X (или Weight Y), соотношение значений определяет, насколько вырастут отдельные компоненты. Например, если значения равны 0.6 и 0.4, первый компонент получит 60% доступного дополнительного пространства, а второй 40%.

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

1. Выберите текстовое поле справа от метки  ``First Name:``  в области сетки настройщика GridBag.
2. Введите  ``1.0``  в поле значения ограничения компоновки  ``Weight X``  и нажмите ENTER.
3. Выберите текстовое поле справа от надписи  ``Фамилия:``  в области сетки настройщика GridBag.
4. Введите  ``1.0``  в поле значения ограничения компоновки  ``Weight X``  и нажмите ENTER.
5. Выберите текстовое поле справа от подписи  ``Street``  в области сетки настройщика GridBag.
6. Выберите  ``Horizontal``  в поле со списком  ``Fil`` l и нажмите ENTER.
7. Введите  ``1.0``  в поле значения ограничения компоновки  ``Weight X``  и нажмите ENTER.
8. Выберите текстовое поле справа от подписи  ``City``  в области сетки настройщика GridBag.
9. Выберите  ``Horizontal``  в поле со списком  ``Fil`` l и нажмите ENTER.
10. Введите  ``1.0``  в поле значения ограничения компоновки  ``Weight X``  и нажмите ENTER.

Чтобы проверить правильность изменения размеров контейнера по горизонтали, нажмите кнопку Test Layout ("Протестировать компоновку") (image::images/testbutton.png[]) на панели инструментов настройщика и перетащите границы формы  ``ContactsBasicInitial`` .

image::images/resizedpreview.png[]


=== Привязка

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

При изменении горизонтальных размеров формы  ``ContactsBasicInitial``  в предыдущем разделе можно было заметить, что поле со списком  ``State``  смещается в сторону от метки  ``State`` . Поскольку предпочитаемый размер поля со списком меньше размера соответствующей ячейки, GridBagLayout по умолчанию помещает компонент в центр ячейки.

Чтобы изменить это поведение, укажите ограничение компоновки  ``Anchor``  ("Привязка"), выполнив приведенные ниже действия:

1. Выберите поле со списком справа от надписи  ``Состояние``  и нажмите кнопку со стрелкой (image::images/arrowbutton.png[]) справа от поля со списком  ``Привязка``  в <<01d,окне свойств>> настройщика.
2. Выберите  ``Line Start``  ("Начало строки") из раскрывающегося списка.

Поле со списком  ``State``  теперь прикрепляется к левой стороне формы при изменении горизонтальных размеров последней.

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

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

1. Выберите метки  ``First name:`` ,  ``Surname:`` ,  ``Street`` ,  ``City``  и  ``State`` .

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

image::images/multiselect.png[]


. Измените ограничение компоновки  ``Anchor``  ("Привязка") меток на  ``Line Start``  ("Начало строки").
Метки выровняются по левой стороне.

image::images/linestartanchor.png[]


=== Интервал

По умолчанию между компонентами нет внешних полей. Ограничение  ``Inset``  ("Вставка") указывает внешние поля компонента – минимальное расстояние между компонентом и краями его области отображения.

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

1. Щелчком с удерживаемой клавишей Ctrl выберите все компоненты.
2. Нажмите кнопку справа от текстового поля ограничений Insets ("Вставки").
3. В отобразившемся диалоговом окне измените значения параметров  ``Верх:``  и  ``Слева:``  на  ``5``  и нажмите OK.

image::images/insets.png[]

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

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


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

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

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

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

link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20a%20Basic%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,В начало>>