// 
//     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.
//

= Поддержка редактирования промежутков в конструкторе графического интерфейса пользователя NetBeans
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Поддержка редактирования промежутков в конструкторе графического интерфейса пользователя NetBeans - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Поддержка редактирования промежутков в конструкторе графического интерфейса пользователя NetBeans

Ян Лагода (Jan Lahoda), Алена Сташкова (Alyona Stashkova)

Компоновка контейнера в режиме 'Свободное проектирование' состоит из компонентов и промежутков между этими компонентами. И компоненты, и промежутки визуализированы в представлении 'Проектирование' конструктора графического интерфейса пользователя. IDE NetBeans позволяет редактировать промежутки напрямую в конструкторе графического интерфейса пользователя.

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


image::images/netbeans-stamp-80-74-73.png[title="Содержимое на этой странице применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"]


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

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

|link:https://netbeans.org/downloads/index.html[+IDE NetBeans+] |7.2, 7.3, 7.4 или 8.0 

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

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

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

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


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

1. Загрузите и разарвируйте архив link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip[+GapSupport.zip+] в любую папку на своем компьютере.
2. В главном меню IDE NetBeans выберите  ``Файл``  >  ``Открыть проект`` , перейдите к папке, содержащей разархивированные файлы с проектом  ``GapSupport`` , разархивированном в предыдущем шаге.
3. Нажмите кнопку "Открыть проект".
Окно "Projects" (Проекты) должно выглядеть следующим образом:

image::images/prj.png[]

4. Дважды щелкните файл  ``Initial.java`` .
В конструкторе графического интерфейса откроется образец формы в режиме конструктора.

image::images/initialform.png[]

*Примечание.* Можно просмотреть иерархию компонентов формы в окне навигатора, выбрав в основной панели инструментов Window > 'Навигатор'.

image::images/navigator.png[]

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


== Изменение размера промежутка путем перетаскивания его краев

Рассмотрим способы редактирования промежутка путем перетаскивания его краев в представлении 'Проектирование' в среде IDE.

Чтобы добавить строку  ``Отчество``  между строками  ``Имя``  и  ``Фамилия``  необходимо выполнить следующие шаги:

1. Щелкните промежуток между метками  ``Имя``  и  ``Фамилия`` .
Промежуток выделяется зеленым.

image::images/gap-highlighted.png[]

2. Наведите курсор мыши на нижнюю часть выделенного промежутка.
Указатель будет преобразован в вертикальный указатель с поддержкой изменения размера.

image::images/gap-resizable.png[]

3. Увеличить выбранный промежуток до 50 нажатием левой кнопки мыши, перетаскиванием указателя вниз, после чего следует отжать левую кнопку мыши.
Новый размер промежутка отображается в подсказке.

image::images/resizing.png[]

4. Добавить новую метку в созданный промежуток, перетащив его из раздела 'Элементы управления Swing' палитры и отпустив его таким образом, чтобы левая граница была выровнена с левой границей метки  ``Имя``  а ее верхняя граница содержала указанный предпочитаемый промежуток из строки  ``Имя`` .

image::images/jlabel.png[]

5. Дважды щелкните метку и измените текст метки на  ``Отчество:`` .

image::images/middle-name.png[]

6. Добавьте новое текстовое поле к правой стороне метки  ``Отчество:``  перетащив его из раздела 'Элементы управления Swing' палитры и отпустив его, таким образом, чтобы его базовая линия была выровнена с меткой  ``Отчество`` , а левая граница была выровнена с другими текстовыми полями.

image::images/textfield.png[]

7. Перетащите правую границу текстового поля для выравнивания его с правой границей других текстовых полей.

image::images/textfield-resized.png[]

8. Щелкните правой кнопкой мыши текст внутри текстового поля и выбрав 'Редактировать текст' во всплывающем меню. Удалите текст.

Строка  ``Отчество``  вставлена между компонентами формы.

image::images/middle-inserted-gap.png[]

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


== Изменение промежутка с помощью колесика мыши

Среда IDE позволяет изменить промежуток щелчком мыши и последующей прокруткой колесиком мыши для задания точного размера промежутка.

Для удаление оставшегося пространства между строками  ``Отчество``  и  ``Фаилия``  щелкните промежуток ниже и уменьшите высоту промежутка путем прокрутки колесика мыши вниз и задания нового размера равным  ``малому по умолчанию`` .

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

image::images/default-small.png[]

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

image::images/middle-inserted.png[]

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


== Изменение промежутков рядом с компонентами

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

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

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

1. Выберите в форме все четыре кнопки.
2. Щелкните правой кнопкой мыши выборку и выберите  ``Заключить в``  >  ``Панель``  во всплывающем меню.

image::images/enclose-panel.png[]

Кнопки будут добавлены в контейнер.

image::images/buttons-enclosed.png[]

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

1. Щелкните правой кнопкой мыши одну из кнопок и выберите 'Изменить пространство компоновки' во всплывающем меню.
Отображается диалоговое окно 'Изменить пространство компоновки'.

image::images/edit-layout-space.png[]

2. Задайте размер левого и правого промежутка равным 0 и нажмите OK.
Промежутки справа и слева от кнопок удаляются с помощью диалогового окна 'Изменить пространство компоновки'.

image::images/gaps-removed.png[]

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

1. Дважды щелкните промежуток в нижней части последней кнопки.
Отображается диалоговое окно 'Изменить пространство компоновки'.
2. В диалоговом окне выберите 'Изменить пространство компоновки' выберите параметр  ``С поддержкой изменения размера``  и нажмите ОК.

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

3. Повторите шаги 1 и 2 для промежутка над самой верхней кнопкой.
Для промежутков выше и ниже контейнера с кнопками включена поддержка изменения размера.

*Центрирование кнопок в образце формы*:

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

image::images/align.png[]

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

image::images/buttons-centered.png[]

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


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

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

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

link:/about/contact_form.html?to=3&subject=Feedback:%20Gap%20Support[+Отправить отзыв по этому учебному курсу+]


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

Изучение учебного курса 'Поддержка редактирования промежутков в конструкторе графического интерфейса пользователя NetBeans' завершено. Сведения о добавлении функциональных возможностей к создаваемому графическому интерфейсу приведены в разделах:

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

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