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

= 使用 GridBag 定制器设计基本 Java 窗体
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: 使用 GridBag 定制器设计基本 Java 窗体 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, 使用 GridBag 定制器设计基本 Java 窗体

作者：Jan Stola、Tomas Pavek 和 Alyona Stashkova

本教程是一个系列教程的第一部分（共两个部分），介绍了如何使用 NetBeans IDE GridBag 定制器的基本功能设计简单的 Java 窗体。
该系列教程可作为一个指南，介绍了如何设置 GUI 组件布局而无需手动编写布局代码，然后在现有窗体中进行其他更改，以实现项目所需的特定目标布局。

该系列教程中的每个文档都介绍了一组特定的功能。

* 第 1 部分：使用 GridBag 定制器设计基本 Java 窗体
* 第 2 部分：link:../java/gbcustomizer-advanced.html[+使用 GridBag 定制器设计高级 Java 窗体+]


image::images/netbeans-stamp-80-74.png[title="此页上的内容适用于 NetBeans IDE 7.1 和更高版本"]


*要学习本教程，您需要具备下列软件和资源。*

|===
|软件或资源 |要求的版本 

|link:http://netbeans.org/downloads/index.html[+NetBeans IDE+] |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``  档案文件进行下载。
* 本教程仅重点介绍如何设计容器的布局。在 GUI 中添加功能超出了本教程的范围。


== 打开示例项目

1. 下载 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip[+gbcustomizer-basic-tutorial.zip+] 项目，并将其解压缩到您的计算机上的任意位置。
2. 在 "Projects"（项目）标签中，选择  ``File`` （文件）>  ``Open Project`` （打开项目），导航至在上一步中解压缩的  ``gbcustomizer-basic-tutorial``  项目，然后单击 "Open Project"（打开项目）。项目文件夹可能包含在也称为  ``gbcustomizer-basic-tutorial``  的文件夹中。
3. 在 "Reference Problem"（引用问题）对话框中，单击 "Resolve"（解决）。IDE 将自动下载 JUnit 和 JUnit 4 库。按照 NetBeans IDE 安装程序中的说明安装所需的插件。安装完成后，单击 "Finish"（完成）。
4. 展开 ``源包``  >  ``Tutorial`` ，然后双击  ``ContactsBasicInitial.java`` 。
此时将在 GUI 构建器的 "Design"（设计）视图中打开样例窗体。

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


== GridBag 定制器概述

GridBag 布局定制器是 Java 平台提供的最灵活且最复杂的布局管理器之一。定制器将组件放在行和列网格中，使指定的组件可以占据多个行或列。所有行的高度并不一定相同。同样，所有列的宽度也并不一定相同。实际上，GridBagLayout 将组件放在网格的矩形（单元格）中，然后使用组件的首选大小确定所需的单元格大小。

要显示 GridBag 定制器，请完成以下步骤：

1. 在 "Design"（设计）视图中，选择 "JFrame Form"（JFrame 窗体）。
2. 右键单击该窗体，然后从上下文菜单中选择  ``Customize Layout`` （定制布局）。
此时将打开 "Customize Layout"（定制布局）对话框，如下所示。

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

*注：*在本教程中，已设置了 GridBagLayout。如果使用其他窗体，请在上面的步骤 2 中右键单击该窗体，从上下文菜单中选择 ``设置布局``  >  ``网格包布局`` （这将启用 ``定制布局`` 菜单项）。然后完成该步骤。


=== 网格区域

网格区域位于 "Customize Layout"（定制布局）对话框的右侧。它显示组件的网格式布局。
已添加样例窗体中的组件，但没有正确设置这些组件的布局。


=== 工具栏

包含五个按钮的工具栏位于网格区域的上方。通过该工具栏，可方便地访问常用的命令，例如撤消、重做、启用相同间隙、隐藏空行和列以及测试布局。

image::images/toolbar.png[]


=== 属性定制器

属性定制器位于 "Customize Layout"（定制布局）对话框的左上角。它便于您修改常用的布局约束，例如  ``Anchor`` （锚点）、 ``Insets`` （插入量）等。

image::images/propcustomizer.png[]


=== 属性表单

属性表单位于属性定制器的下方。它显示选定组件的布局约束。

image::images/propsheet.png[]


== 设置组件布局

 ``ContactsBasicInitial``  窗体的组件在添加后设置为单行布局。在未指定布局约束时，GridBagLayout 将按这种方式设置组件布局。


=== 移动

您可以根据需要使用简单的拖放功能移动组件。如果选定，将使用绿色突出显示组件。拖动组件时，组件的  ``Grid X`` （网格 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. 按住 Ctrl 键单击两个 JTextField 组件将其选中。
2. 在选定两个 JTextField 的情况下，将光标放在单元格的右边缘上，单击并拖动，直到突出显示的橙色基准线包含右侧第 2 列中的相邻单元格。
3. 松开光标以调整组件大小。

此时将扩展  ``First Name:``  和  ``Surname:``  文本字段以占据两个单元格（如下图所示）。同时，将突出显示占据的单元格。

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


=== 指定“填充”布局约束

虽然  ``First Name:``  和  ``Surname:``  文本字段占据两个单元格，但它们具有首选大小并位于显示区域的中间位置。在继续操作之前，我们需要使用 ``填充`` 布局约束填充单元格的整个区域。

要设置足够宽的文本字段以水平填充其显示区域而不更改其高度，请在属性表单区域的 ``填充`` 组合框中选择 ``水平`` 。

[.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 组件外观造成很大影响。粗细用于确定如何在列（X 粗细）和行（Y 粗细）之间分配空间；这对指定调整大小行为非常重要。
通常，粗细是将 0.0 和 1.0 作为最小和最大值指定的：根据需要，使用两者之间的数字。较大的数字表示组件的行或列具有较大的空间。

如果您尝试水平调整预览的容器大小，则可以看到布局组件保持相同的大小并位于容器的中间位置。甚至将“填充”约束设置为“水平”的  ``First Name:``  和  ``Surname:``  字段也不会增大，因为“填充”约束指的是单元格内部区域，而不是单元格大小。换句话说，如果将组件的“填充”属性设置为 ``无`` 以外的值，则表明它*可以*增大，但并不表明它*需要*增大。
“X 粗细”和“Y 粗细”布局约束决定了组件是否*需要*在水平和垂直方向增大。
如果一行（或列）中的两个组件具有非零 X 粗细（或 Y 粗细）约束值，则这些值决定了各个组件的增大幅度。例如，如果值为 0.6 和 0.4，则第一个组件获取 60% 可用额外空间，而第二组件获取 40% 空间。

要使设计的容器在水平方向上正确调整大小，请执行以下操作：

1. 在 GridBag 定制器的网格区域中，选择  ``First Name:``  标签右侧的文本字段。
2. 在  ``X 粗细`` 布局约束值字段中键入  ``1.0`` ，然后按 Enter 键。
3. 在 GridBag 定制器的网格区域中，选择  ``Surname:``  标签右侧的文本字段。
4. 在  ``X 粗细`` 布局约束值字段中键入  ``1.0`` ，然后按 Enter 键。
5. 在 GridBag 定制器的网格区域中，选择  ``Street``  标签右侧的文本字段。
6. 在 ``填充`` 组合框中选择 ``水平`` ，然后按 Enter 键。
7. 在  ``X 粗细`` 布局约束值字段中键入  ``1.0`` ，然后按 Enter 键。
8. 在 GridBag 定制器的网格区域中，选择  ``City``  标签右侧的文本字段。
9. 在 ``填充`` 组合框中选择 ``水平`` ，然后按 Enter 键。
10. 在  ``X 粗细`` 布局约束值字段中键入  ``1.0`` ，然后按 Enter 键。

要验证设计的容器是否在水平方向上正确调整大小，请单击定制器工具栏中的 "Test Layout"（测试布局）按钮 (image::images/testbutton.png[])，然后拖动  ``ContactsBasicInitial``  窗体的边框。

image::images/resizedpreview.png[]


=== 锚定

如果组件大小比其显示区域小，则可以使用锚定功能确定组件的放置位置（在该区域内）。

在上一部分中水平调整  ``ContactsBasicInitial``  窗体大小期间，您可能已注意到  ``State``  组合框移到离  ``State``  标签很远的位置。由于该组合框的首选大小比相应单元格小，因此，GridBagLayout 默认将该组件放在单元格的中心位置。

要更改此行为，请按如下方式指定 ``锚点`` 布局约束：

1. 选择  ``State`` （状态）标签右侧的组合框，然后单击定制器<<01d,属性表单>>中  ``Anchor`` （锚点）组合框右侧的箭头按钮 (image::images/arrowbutton.png[])。
2. 从下拉列表中选择 ``行首`` 。

现在，在水平调整窗体大小时， ``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]
. 将标签的 ``锚点`` 布局约束更改为 ``行首`` 。
标签将锚定到左侧。

image::images/linestartanchor.png[]


=== 间距

默认情况下，每个组件都没有外部填充。 ``Inset`` （插入量）约束用于指定组件的外部填充，即组件与其显示区域边缘之间的最小间隙。

在当前布局中，组件彼此放置得太近。要分隔这些组件，请执行以下操作：

1. 按住 Ctrl 键单击以选择所有组件。
2. 按 "Inset"（插入量）约束文本字段右侧的按钮。
3. 在显示的对话框中，将  ``Top:`` （上：）和  ``Left:`` （左：）值更改为  ``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[+使用 GridBag 定制器设计高级 Java 窗体+]

<<top,返回页首>>

link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20a%20Basic%20Java%20Form%20Using%20the%20GridBag%20Customizer[+发送有关此教程的反馈意见+]


== 另请参见

现在，您已完成了“使用 GridBag 定制器设计基本 Java 窗体”教程。有关向所创建的 GUI 中添加功能的信息，请参见：

* link:gui-functionality.html[+构建 GUI 应用程序简介+]
* link:gui-image-display.html[+在 GUI 应用程序中处理图像+]
* link:http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29[+GUI 构建器常见问题解答+]
* link:../../trails/matisse.html[+Java GUI 应用程序学习资源+]
* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+使用 NetBeans IDE 开发应用程序+]中的_实现 Java GUI_

<<top,返回页首>>