| // |
| // 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 部分：link:../java/gbcustomizer-basic.html[+使用 GridBag 定制器设计基本 Java 窗体+] |
| * 第 2 部分：使用 GridBag 定制器设计高级 Java 窗体 |
| |
| link:../java/gbcustomizer-basic.html[+该系列中的第一个教程+]介绍了如何使用 NetBeans IDE GridBag 定制器的基本功能修改简单的 Java 窗体。在本教程中，将了解如何使用 GridBag 定制器的高级功能更改现有的窗体布局。 |
| |
| |
| 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-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+] |一个具有演示项目的档案文件，其中包含初始和目标教程布局。 |
| |=== |
| |
| *注：* |
| |
| * 您可以将用作该系列教程起点的项目作为 ``.zip`` 档案文件进行下载。 |
| * 本教程仅重点介绍如何设计容器的布局。在 GUI 中添加功能超出了本教程的范围。 |
| |
| |
| == 打开示例项目 |
| |
| 在开始借助 GridBag 定制器设置组件布局之前，请下载 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+]，将 ``GridBagCustomizerAdvancedTutorial`` 项目解压缩到您的硬盘驱动器上，然后在 NetBeans IDE 中打开该项目。 |
| |
| 1. 下载 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip[+gbcustomizer-advanced-tutorial.zip+] 项目，并将其解压缩到您计算机上的任何位置。 |
| 2. 在 NetBeans IDE 的 "Projects"（项目）标签中，单击 "File"（文件）菜单上的 "Open Project"（打开项目），导航至在上一步中解压缩的 ``GridBagCustomizerAdvancedTutorial`` 项目，然后单击 "Open Project"（打开项目）。项目文件夹可能包含在也称为 ``GridBagCustomizerAdvancedTutorial`` 的文件夹中。 |
| |
| *注：* ``GridBagCustomizerAdvancedTutorial`` 项目使用 ``JUnit`` 和 ``JUnit 4`` 类库，这些库位于更新中心内。需要在 "Open project"（打开项目）对话框中单击 "Resolve Problems"（解决问题），然后在 "Resolve Reference Problems"（解决引用问题）对话框中单击 "Resolve"（解决），并按照 NetBeans IDE 安装程序中的说明安装 JUnit 插件。安装完成后，单击 "Finish"（完成）以关闭 "NetBeans IDE Installer"（NetBeans IDE 安装程序）对话框，然后单击 "Close"（关闭）以关闭 "Resolve Reference Problems"（解决引用问题）对话框。 |
| |
| |
| [start=3] |
| . 展开 ``源包 > tutorial`` ，然后双击 ``ContactsAdvancedInitial.java`` 。 |
| 此时将在 GUI 构建器的 "Design"（设计）视图中打开样例窗体。 |
| |
| [.feature] |
| -- |
| image::images/sampleform-small.png[role="left", link="images/sampleform.png"] |
| -- |
| |
| |
| == 调用 GridBag 定制器 |
| |
| 要显示 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 中右键单击该窗体，选择 ``Set Layout`` （设置布局）> ``Grid Bag Layout`` （网格包布局）（这将启用 ``Customize Layout`` （定制布局）菜单项），然后完成该步骤。 |
| |
| |
| == 高级功能 |
| |
| 在本部分中，将使用 GridBag 定制器的高级功能，按照下面显示的目标布局重新组织 ``ContactsAdvancedInitial`` 窗体组件。 |
| |
| image::images/targetlayout.png[] |
| |
| *注：*要在 NetBeans IDE 中查看目标布局，请在 "Projects"（项目）标签中，展开 ``"Source Packages"（源包）> "tutorial"（教程）`` ，然后双击 ``ContactsAdvancedFinal.java`` 。 |
| 此时将在 GUI 构建器的 "Design"（设计）视图中打开具有目标布局的 ``ContactsAdvancedFinal`` 窗体。 |
| |
| |
| === 插入新行 |
| |
| 现有窗体的 ``Phone`` 部分包含三个电话条目。要改进该部分并添加额外的标签和文本字段（例如，在 ``Cell Phone:`` 和 ``Home Phone:`` 之间插入 Skype 用户名），请在该位置创建一个新行，如下所示： |
| |
| 1. 在 "Customize Layout"（定制布局）对话框中，右键单击包含 ``Home Phone:`` 信息的行标题。 |
| 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`` 。 |
| |
| |
| [start=3] |
| . 右键单击新添加的行的第二个单元格。 |
| |
| [start=4] |
| . 从上下文菜单中，选择 ``"Add Components"（添加组件）> "Swing Controls"（Swing 控件）> "Text Field"（文本字段）`` 。 |
| 此时将在第二个单元格中突出显示 ``JTextField1`` 。 |
| |
| image::images/highlightedtextfield.png[] |
| |
| 在添加组件后，必须指定这些组件的 GridBag 约束，使之与其他组件对齐。 |
| |
| 在网格区域中选择了 ``JTextField1`` 组件的情况下，在属性表单中执行以下操作： |
| |
| 1. 在 "Grid Width"（网格宽度）组合框中，输入 ``3`` ，然后按 Enter 键。 |
| 2. 在 "Fill"（填充）组合框中，选择 ``Horizontal`` （水平）。 |
| 3. 在 "Anchor"（锚点）组合框中，向下滚动并选择 ``Baseline`` （基线）。 |
| 4. 在 "Weight X"（X 粗细）文本字段中，输入 ``1.0`` ，然后按 Enter 键。 |
| |
| image::images/textfieldconstraints.png[] |
| |
| 在网格区域中，选择 ``JLabel1`` 组件，然后在属性表单中向下滚动并选择 ``基线前导`` 以指定其 ``Anchor`` （锚点）约束。 |
| |
| 在网格区域中同时选择 ``JLabel1`` 和 ``JTextField1`` 组件，单击 ``Insets`` （插入量）文本字段右侧的浏览按钮 (image::images/browsebutton.png[])。此时将显示 ``Insets`` （插入量）对话框。在 ``Top:`` （上：）文本字段中输入 ``5`` ，然后单击 "OK"（确定）。 |
| |
| 窗体应如下所示。 |
| |
| image::images/constraintsset.png[] |
| |
| *注：*GridBag 定制器可帮助您在布局中添加和删除组件以及更改组件的位置。要更改布局中的组件属性（如背景或文本），请使用 GUI 构建器的 "Design"（设计）窗口。 |
| |
| 要设置 ``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. 在 "Customize Layout"（定制布局）对话框中，按住 Ctrl 键单击四个 ``JTextField`` 组件将其选中。 |
| 3. 将文本字段的右边缘拖放至左侧，以使这些文本字段仅占据第二个网格列；换而言之，使它们不再占据第三个和第四个网格列。 |
| |
| image::images/textfieldsonecolumn.png[] |
| |
| GridBag 定制器可以同时调整几个组件的大小，从而为文本字段的第二列腾出空间。 |
| |
| |
| [start=4] |
| . 在窗体外部单击以取消选择调整了大小的文本字段。 |
| |
| [start=5] |
| . 按住 Ctrl 键单击以选择 ``Phone`` 部分的所有 ``Skype:`` 、 ``Home Phone:`` ``JLabel`` 和 ``JTextField`` 组件。 |
| |
| [start=6] |
| . 将光标放在所选组件上，然后将其拖至上面两个文本字段的右侧。 |
| |
| image::images/movesecondcolumn.png[] |
| |
| *注：*在拖动之前，请确保光标未变为双向箭头，否则，将需要调整所选组件的大小。 |
| |
| 在移动组件后，窗体应如下所示。 |
| |
| image::images/extrarows.png[] |
| |
| 要删除多余的第 10 和 11 行（行索引分别为 9 和 10），请右键单击行标题，然后从上下文菜单中选择 ``Delete Row`` （删除行）。 |
| |
| ``Phone`` 部分将变得更加紧凑。 |
| |
| image::images/textfieldsmoved.png[] |
| |
| 要固定此处的第二列的间距，请执行以下操作： |
| |
| 1. 在网格区域中，按住 Ctrl 键单击 ``Skype:`` 和 ``Home Phone:`` 标签将其选中。 |
| 2. 单击 ``Insets`` （插入量）文本字段右侧的浏览按钮 (image::images/browsebutton.png[])。 |
| 此时将显示 ``Insets`` （插入量）对话框。 |
| |
| [start=3] |
| . 在 ``Left:`` （左侧：）文本字段中输入 ``5`` ，然后单击 "OK"（确定）。 |
| |
| |
| === 引入子容器 |
| |
| 基于网格的布局有时会引入不必要的依赖关系，需要通过子容器进行解决。 |
| |
| 如果单击工具栏中的 "Test Layout"（测试布局）(image::images/testlayoutbutton.png[]) 按钮并测试当前布局的水平大小可调性，则可以看到在 "Browse"、"OK" 和 "Cancel" 按钮周围创建了多余空间。 |
| |
| [.feature] |
| -- |
| image::images/unwantedspace-small.png[role="left", link="images/unwantedspace.png"] |
| -- |
| |
| 发生这种情况的原因是，第四列同时包含文本字段和按钮（这两种组件分别需要增大和减小）。您需要修改布局以使 ``Street`` 和 ``City:`` 文本字段占据 ``Browse`` 按钮周围的额外空间。当前布局确保了 ``Street:`` 和 ``City:`` 文本字段右边缘的垂直位置与 ``Home Phone:`` 文本字段左边缘相同。要使这些位置没有关联，请完成以下步骤： |
| |
| 1. 按住 Ctrl 键单击 ``Street:`` 文本字段及其右侧的 ``Browse`` 按钮将其选中。 |
| 2. 右键单击所选内容，然后从上下文菜单中选择 ``Enclose in Container`` （包含在容器中）。 |
| |
| [.feature] |
| -- |
| image::images/enclose-small.png[role="left", link="images/enclose.png"] |
| -- |
| |
| 在将组件包含在子容器中后， ``Home Phone:`` 标签和文本字段之间的边界不再影响 ``Street`` 文本字段和按钮之间的边界。 |
| |
| *注：* ``Enclose in Container`` （包含在容器中）操作将在选定组件占据的单元格中创建一个新的子容器。它将选定组件移到新引入的容器中，但保留其相对位置和其他布局约束。 |
| |
| 对于 ``City:`` 文本字段及其右侧的 ``Browse`` 按钮，重复上面列出的两个步骤，以便将其包含在子容器中，如下所示。 |
| |
| image::images/enclosecity.png[] |
| |
| 现在，您希望按如下方式删除 ``OK`` 和 ``Cancel`` 按钮周围的多余空间： |
| |
| 1. 单击 "Close"（关闭）取消选择包含在子容器中的组件，右键单击窗体，然后从上下文菜单中选择 ``Customize Layout`` （定制布局）。 |
| 2. 按住 Ctrl 键单击窗体底部的 ``OK`` 和 ``Cancel`` 按钮将其选中。 |
| 3. 右键单击所选内容，然后从上下文菜单中选择 ``Enclose in Container`` （包含在容器中）。 |
| 此时将为这些按钮创建一个新的子容器。 |
| |
| image::images/subcontainerbuttons.png[] |
| |
| *注：*无法调整子容器中的任何组件的大小。因此，这些组件将彼此相邻放在容器的中心位置（这是默认锚定方式）。 |
| |
| 要更改整个子容器的锚定方式，请完成以下步骤： |
| |
| 1. 请确保选中了带有 ``OK`` 和 ``Cancel`` 按钮的子容器，然后单击 ``Anchor`` （锚点）组合框右侧的箭头按钮 (image::images/arrowbutton.png[])。 |
| 2. 向下滚动并从列表中选择 ``Line End`` （行尾）。 |
| |
| image::images/subcontainerlineend.png[] |
| |
| 布局效果看起来很好，但包含 ``OK`` 和 ``Cancel`` 按钮的子容器仅占据最后一行中的最后两个单元格。 |
| 如果 ``OK`` 和 ``Cancel`` 按钮变宽（例如，在翻译为不同语言期间），则这些按钮会将 ``Work Phone:`` 和 ``Cell Phone:`` 文本字段的右边缘向后推。 |
| 为避免出现这种潜在的问题，并使子容器占据底部行中的所有单元格，请选择该子容器，然后将其左边框拖至行的开头。 |
| |
| image::images/subcontainerresized.png[] |
| |
| 子容器将占据底部行的所有单元格。 |
| |
| |
| === 在容器之间导航 |
| |
| 要在子容器中添加组件（例如，在现有 ``OK`` 和 ``Cancel`` 按钮的基础上添加 ``Help`` 按钮），您需要在编辑子容器布局之前从主容器切换到子容器。 |
| |
| 完成下面列出的步骤，在现有子容器中添加一个按钮： |
| |
| 1. 单击包含 ``OK`` 和 ``Cancel`` 按钮的子容器将其选中。 |
| 2. 右键单击该容器以显示上下文菜单，然后从该菜单中选择 ``Design This Container`` （设计此容器）。 |
| |
| [.feature] |
| -- |
| image::images/designsubcontainer-small.png[role="left", link="images/designsubcontainer.png"] |
| -- |
| |
| |
| [start=3] |
| . 右键单击第二列的标题，然后从上下文菜单中选择 ``Insert Column After`` （在后面插入列）。 |
| 此时将显示新按钮的空单元格。 |
| |
| [.feature] |
| -- |
| image::images/emptycell-small.png[role="left", link="images/emptycell.png"] |
| -- |
| |
| |
| [start=4] |
| . 在新创建的单元格内右键单击，然后从上下文菜单中选择 ``Add Component`` （添加组件）> ``Swing Controls`` （Swing 控件）> ``Button`` （按钮）。 |
| 此时将添加一个新的 ``jButton1`` 按钮。 |
| |
| [.feature] |
| -- |
| image::images/newbutton-small.png[role="left", link="images/newbutton.png"] |
| -- |
| |
| |
| [start=5] |
| . 单击属性定制器中的 "Baseline-Related Anchor"（与基线相关的锚点）按钮 (image::images/baselineanchor.png[])，将新按钮与行中的两个现有按钮对齐。 |
| |
| [start=6] |
| . 单击 "Insets"（插入量）文本字段右侧的浏览按钮 (image::images/browsebutton.png[])。此时将显示 "Insets"（插入量）对话框。在 "Top:"（上：）文本字段中输入 5，然后单击 "OK"（确定）。 |
| |
| [start=7] |
| . 要立即查看主容器布局的外观，请右键单击设计的子容器，然后从上下文菜单中选择 ``Design Parent Container`` （设计父容器）。 |
| |
| 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[+使用 GridBag 定制器设计基本 Java 窗体+] |
| |
| <<top,返回页首>> |
| |
| link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20an%20Advanced%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,返回页首>> |
| |
