| // |
| // 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, затем нажмите 'Закрыть', чтобы закрыть диалоговое окно 'Разрешение проблем ссылок'. |
| |
| 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`` отображается в первой ячейке. |
| |
| 3. Щелкните правой кнопкой мыши первую ячейку добавленной строки. |
| 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 может изменить размер нескольких компонентов одновременно, тем самым давая место для второго столбца текстовых полей. |
| |
| 4. Щелкните вне формы, чтобы отменить выбор текстовых полей, размер которых был изменен. |
| 5. Удерживая клавишу CTRL, щелкните компоненты ``Skype:`` , ``Home Phone:`` , ``JLabel`` и ``JTextField`` в разделе ``Phone`` , чтобы выбрать их. |
| 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`` ("Вставки"). |
| 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"] |
| -- |
| |
| 3. Щелкните правой кнопкой мыши второй заголовок столбца и выберите ``Insert Column After`` ("Вставить столбец после") из контекстного меню. |
| Отобразится пустая ячейка для новой кнопки. |
| |
| [.feature] |
| -- |
| image::images/emptycell-small.png[role="left", link="images/emptycell.png"] |
| -- |
| |
| 4. Щелкните созданную ячейку правой кнопкой мыши и выберите ``Add Component`` ("Добавить компонент") > ``Swing Controls`` ("Элементы управления Swing") > ``Button`` ("Кнопка") из контекстного меню. |
| Будет добавлена новая кнопка ``jButton1`` . |
| |
| [.feature] |
| -- |
| image::images/newbutton-small.png[role="left", link="images/newbutton.png"] |
| -- |
| |
| 5. Нажмите кнопку привязки, связанной с базовой линией, (image::images/baselineanchor.png[]) в 'Средстве настройки свойств' для выравнивания новой кнопки с двумя существующими в строке. |
| 6. Нажмите кнопку обзора (image::images/browsebutton.png[]) справа от текстового поля 'Вставки'. Отобразится диалоговое окно "Вставки". Введите 5 в текстовое поле 'Вверх' и нажмите OK. |
| 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,В начало>> |
| |
