| // |
| // 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[] |
| |
| |
| [start=2] |
| . Измените ограничение компоновки ``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,В начало>> |
| |
