| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <!-- |
| Copyright (c) 2009, 2014, Oracle and/or its affiliates. All rights reserved. |
| --> |
| <html> |
| <head> |
| <title>使用 GridBag 定制器设计高级 Java 窗体 - NetBeans IDE 教程</title> |
| <!-- BEGIN METADATA --> |
| <meta name="author" content="Alyona.Stashkova@oracle.com"> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" > |
| <meta name="description" content="This tutorial guides you through the process of modifying an application form layout using the NetBeans IDE GridBag Designer Advanced Features."> |
| <meta name="KEYWORDS" content="NetBeans, GridBag, Layout Manager, Tutorial, Guide, User, Documentation, Advanced"> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <!-- END METADATA --> |
| |
| </head> |
| <body> |
| |
| <a name="top"></a> |
| <h1>使用 GridBag 定制器设计高级 Java 窗体</h1> |
| <div class="articledate" style="margin-left: 0px;">作者：Jan Stola、Tomas Pavek 和 Alyona Stashkova</div> |
| |
| <p>本教程是一个系列教程的第二部分（共两个部分），介绍了如何使用 NetBeans IDE GridBag 定制器的高级功能设计高级 Java 窗体。<br> 该系列教程可作为一个指南，介绍了如何设置 GUI 组件布局而无需手动编写布局代码，然后在现有窗体中进行其他更改，以实现项目所需的特定目标布局。 </p> |
| <p>该系列教程中的每个文档都介绍了一组特定的功能。</p> |
| <ul> |
| <li>第 1 部分：<a href="../java/gbcustomizer-basic.html">使用 GridBag 定制器设计基本 Java 窗体</a></li> |
| <li>第 2 部分：使用 GridBag 定制器设计高级 Java 窗体</li> |
| |
| </ul> |
| |
| <p><a href="../java/gbcustomizer-basic.html">该系列中的第一个教程</a>介绍了如何使用 NetBeans IDE GridBag 定制器的基本功能修改简单的 Java 窗体。在本教程中，将了解如何使用 GridBag 定制器的高级功能更改现有的窗体布局。 </p> |
| |
| |
| |
| |
| <p><b>目录</b></p> |
| <img alt="此页上的内容适用于 NetBeans IDE 7.1 和更高版本" class="stamp" src="../../../images_www/articles/74/netbeans-stamp-80-74.png" title="此页上的内容适用于 NetBeans IDE 7.1 和更高版本"> |
| <ul class="toc"> |
| <li><a href="#zip">打开示例项目</a></li> |
| <li><a href="#invokegb">调用 GridBag 定制器</a></li> |
| <li><a href="#01">高级功能</a> |
| <ul> |
| <li><a href="#01a">插入新行</a></li> |
| <li><a href="#01b">添加新组件</a></li> |
| <li><a href="#01c">重新组织布局</a></li> |
| <li><a href="#01d">引入子容器</a></li> |
| <li><a href="#01e">在容器之间导航</a></li> |
| |
| </ul></li> |
| |
| <li><a href="#summary">小结</a></li> |
| <li><a href="#seealso">另请参见</a></li> |
| |
| |
| |
| </ul> |
| |
| |
| <p><b>要学习本教程，您需要具备以下软件和资源。</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">软件或资源</th> |
| <th class="tblheader" scope="col">要求的版本</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">7.1 或更高版本 </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java 开发工具包 (JDK)</a></td> |
| <td class="tbltd1">版本 6、7 或 8 </td> |
| </tr> |
| |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-advanced-tutorial.zip</a></td> |
| <td class="tbltd1">一个具有演示项目的档案文件，其中包含初始和目标教程布局。</td> |
| </tr> |
| |
| </tbody> |
| </table> |
| |
| <p class="notes"><b>注：</b></p> |
| |
| <div class="indent"> |
| <ul> |
| |
| <li>您可以将用作该系列教程起点的项目作为 <tt>.zip</tt> 档案文件进行下载。 </li> |
| <li>本教程仅重点介绍如何设计容器的布局。在 GUI 中添加功能超出了本教程的范围。</li> |
| </ul> |
| |
| |
| </div> |
| |
| |
| <!-- ++++++++++++ Using .zip ++++++++++++ --> |
| <a name="zip"></a> |
| <h2>打开示例项目</h2> |
| |
| <p>在开始借助 GridBag 定制器设置组件布局之前，请下载 <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-advanced-tutorial.zip</a>，将 <tt>GridBagCustomizerAdvancedTutorial</tt> 项目解压缩到您的硬盘驱动器上，然后在 NetBeans IDE 中打开该项目。</p> |
| <ol><li>下载 <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-advanced-tutorial.zip">gbcustomizer-advanced-tutorial.zip</a> 项目，并将其解压缩到您计算机上的任何位置。</li> |
| <li>在 NetBeans IDE 的 "Projects"（项目）标签中，单击 "File"（文件）菜单上的 "Open Project"（打开项目），导航至在上一步中解压缩的 <tt>GridBagCustomizerAdvancedTutorial</tt> 项目，然后单击 "Open Project"（打开项目）。项目文件夹可能包含在也称为 <tt>GridBagCustomizerAdvancedTutorial</tt> 的文件夹中。 |
| <p class="notes"><b>注：</b><tt>GridBagCustomizerAdvancedTutorial</tt> 项目使用 <tt>JUnit</tt> 和 <tt>JUnit 4</tt> 类库，这些库位于更新中心内。需要在 "Open project"（打开项目）对话框中单击 "Resolve Problems"（解决问题），然后在 "Resolve Reference Problems"（解决引用问题）对话框中单击 "Resolve"（解决），并按照 NetBeans IDE 安装程序中的说明安装 JUnit 插件。安装完成后，单击 "Finish"（完成）以关闭 "NetBeans IDE Installer"（NetBeans IDE 安装程序）对话框，然后单击 "Close"（关闭）以关闭 "Resolve Reference Problems"（解决引用问题）对话框。 </p> |
| </li> |
| <li> 展开<tt>源包 > tutorial</tt>，然后双击 <tt>ContactsAdvancedInitial.java</tt>。<br>此时将在 GUI 构建器的 "Design"（设计）视图中打开样例窗体。 </li> |
| </ol> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/sampleform.png" rel="lytebox" title="GridBag 定制器"> <img alt="GridBag 定制器" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/sampleform-small.png"></a></p> |
| |
| |
| |
| <!-- ++++++++++++ Invoking GBCustomizer ++++++++++++ --> |
| <a name="invokegb"></a> |
| <h2>调用 GridBag 定制器</h2> |
| |
| <p>要显示 GridBag 定制器，请完成以下步骤： </p> |
| <ol> |
| <li>在 "Design"（设计）视图中，选择 "JFrame Form"（JFrame 窗体）。</li> |
| |
| <li>右键单击该窗体，然后选择 <tt>Customize Layout</tt>（定制布局）。<br> 此时将打开 "Customize Layout"（定制布局）对话框，如下所示。</li> |
| |
| </ol> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/customizerdialog.png" rel="lytebox" title="GridBag 定制器"> <img alt="GridBag 定制器" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/customizerdialog-small.png"></a></p> |
| |
| <p class="notes"><b>注：</b>在本教程中，已设置了 GridBagLayout。如果使用其他窗体，请在上面的步骤 2 中右键单击该窗体，选择 <tt>Set Layout</tt>（设置布局）> <tt>Grid Bag Layout</tt>（网格包布局）（这将启用 <tt>Customize Layout</tt>（定制布局）菜单项），然后完成该步骤。</p> |
| |
| |
| <a name="01"></a> |
| <h2>高级功能</h2> |
| <p>在本部分中，将使用 GridBag 定制器的高级功能，按照下面显示的目标布局重新组织 <tt>ContactsAdvancedInitial</tt> 窗体组件。 </p> |
| <p class="align-center"><img alt="目标布局" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/targetlayout.png"></p> |
| <p class="notes"><b>注：</b>要在 NetBeans IDE 中查看目标布局，请在 "Projects"（项目）标签中，展开 <tt>"Source Packages"（源包）> "tutorial"（教程）</tt>，然后双击 <tt>ContactsAdvancedFinal.java</tt>。<br> 此时将在 GUI 构建器的 "Design"（设计）视图中打开具有目标布局的 <tt>ContactsAdvancedFinal</tt> 窗体。</p> |
| |
| <!-- ++++++++++++ Inserting New Row ++++++++++++ --> |
| <a name="01a"></a> |
| <h3>插入新行</h3> |
| <p>现有窗体的 <tt>Phone</tt> 部分包含三个电话条目。要改进该部分并添加额外的标签和文本字段（例如，在 <tt>Cell Phone:</tt> 和 <tt>Home Phone:</tt> 之间插入 Skype 用户名），请在该位置创建一个新行，如下所示：</p> |
| <ol> |
| |
| <li>在 "Customize Layout"（定制布局）对话框中，右键单击包含 <tt>Home Phone:</tt> 信息的行标题。 </li> |
| <li>选择 <tt>Insert Row Before</tt>（在前面插入行）。 |
| <p class="align-center"><img alt="上下文菜单 - 插入行" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/insertrow.png"></p> |
| <p>此时将添加一个新行，如下图所示。</p> |
| <p class="align-center"><img alt="上下文菜单 - 行已插入" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/rowinserted.png"></p></li> |
| </ol> |
| |
| |
| <!-- ++++++++++++ Adding New Components ++++++++++++ --> |
| <a name="01b"></a> |
| <h3>添加新组件</h3> |
| <p>要在新添加的行中添加新标签和文本字段，请完成以下步骤： </p> |
| <ol> |
| <li>右键单击新添加的行的第一个单元格。</li> |
| <li>从上下文菜单中，选择 <tt>"Add Components"（添加组件）> "Swing Controls"（Swing 控件）> "Label"（标签）</tt>，如下所示。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/addcomponent.png" rel="lytebox" title="上下文菜单 - 添加标签"> <img alt="上下文菜单 - 添加标签" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/addcomponent-small.png"></a></p> |
| |
| <p>此时将在第一个单元格中突出显示 <tt>JLabel1</tt>。</p></li> |
| <li>右键单击新添加的行的第二个单元格。</li> |
| <li>从上下文菜单中，选择 <tt>"Add Components"（添加组件）> "Swing Controls"（Swing 控件）> "Text Field"（文本字段）</tt>。<br>此时将在第二个单元格中突出显示 <tt>JTextField1</tt>。 |
| <p class="align-center"><img alt="上下文菜单 - 突出显示的 jTextField1" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/highlightedtextfield.png"></p></li> |
| |
| </ol> |
| <p>在添加组件后，必须指定这些组件的 GridBag 约束，使之与其他组件对齐。 </p> |
| <p> |
| 在网格区域中选择了 <tt>JTextField1</tt> 组件的情况下，在属性表单中执行以下操作：</p> |
| <ol> |
| <li>在 "Grid Width"（网格宽度）组合框中，输入 <tt>3</tt>，然后按 Enter 键。 </li> |
| <li>在 "Fill"（填充）组合框中，选择 <tt>Horizontal</tt>（水平）。</li> |
| <li>在 "Anchor"（锚点）组合框中，向下滚动并选择 <tt>Baseline</tt>（基线）。 </li> |
| <li>在 "Weight X"（X 粗细）文本字段中，输入 <tt>1.0</tt>，然后按 Enter 键。 </li> |
| </ol> |
| <p class="align-center"><img alt="jTextField1 - 指定的约束" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldconstraints.png"></p> |
| <p>在网格区域中，选择 <tt>JLabel1</tt> 组件，然后在属性表单中向下滚动并选择<tt>基线前导</tt>以指定其 <tt>Anchor</tt>（锚点）约束。</p> |
| <p>在网格区域中同时选择 <tt>JLabel1</tt> 和 <tt>JTextField1</tt> 组件，单击 <tt>Insets</tt>（插入量）文本字段右侧的浏览按钮 (<img alt="&quot;Browse&quot;（浏览）按钮" src="../../../images_www/articles/80/java/gbcustomizer-advanced/browsebutton.png">)。此时将显示 <tt>Insets</tt>（插入量）对话框。在 <tt>Top:</tt>（上：）文本字段中输入 <tt>5</tt>，然后单击 "OK"（确定）。 </p> |
| <p>窗体应如下所示。</p> |
| <p class="align-center"><img alt="指定的约束" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/constraintsset.png"></p> |
| <p class="notes"><b>注：</b>GridBag 定制器可帮助您在布局中添加和删除组件以及更改组件的位置。要更改布局中的组件属性（如背景或文本），请使用 GUI 构建器的 "Design"（设计）窗口。</p> |
| <p>要设置 <tt>JLabel1</tt> 的显示文本，请执行以下操作：</p> |
| <ol> |
| <li> 单击 "Close"（关闭），以关闭 "Customize Layout"（定制布局）对话框。</li> |
| <li>在 "Design"（设计）视图中，选择 <tt>JLabel1</tt> 组件，然后按 F2 键（或者，从上下文菜单中选择 "Edit Text"（编辑文本））。</li> |
| <li>删除选定的文本，然后输入 <tt>Skype:</tt>。 </li> |
| <li>按 Enter 键。</li> |
| </ol> |
| <p>要删除 <tt>JTextField1</tt> 组件的文本，请完成以下步骤：</p> |
| <ol> |
| <li>在 "Design"（设计）视图中，选择 <tt>JTextField1</tt> 组件，然后按 F2 键（或者，从上下文菜单中选择 "Edit Text"（编辑文本））。</li> |
| <li>删除选定的文本，然后按 Enter 键。 </li> |
| </ol> |
| |
| |
| |
| |
| |
| |
| |
| |
| <!-- ++++++++++++ Reorganizing Layout ++++++++++++ --> |
| <a name="01c"></a> |
| <h3>重新组织布局</h3> |
| <p>GridBag 定制器允许您根据需要快速调整窗体组件的位置，节省了您的时间和精力。</p> |
| <p>要更改 <tt>Phone</tt> 部分的布局以及将四个现有文本字段从一列更改为两列（各包含两个文本字段），请完成以下步骤：</p> |
| <ol> |
| <li>右键单击该窗体，然后从上下文菜单中选择 <tt>Customize Layout</tt>（定制布局）。</li> |
| <li>在 "Customize Layout"（定制布局）对话框中，按住 Ctrl 键单击四个 <tt>JTextField</tt> 组件将其选中。</li> |
| <li>将文本字段的右边缘拖放至左侧，以使这些文本字段仅占据第二个网格列；换而言之，使它们不再占据第三个和第四个网格列。 |
| <p class="align-center"><img alt="文本字段占据一列" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldsonecolumn.png"></p> |
| <p>GridBag 定制器可以同时调整几个组件的大小，从而为文本字段的第二列腾出空间。</p></li> |
| <li>在窗体外部单击以取消选择调整了大小的文本字段。</li> |
| <li>按住 Ctrl 键单击以选择 <tt>Phone</tt> 部分的所有 <tt>Skype:</tt>、<tt>Home Phone:</tt> <tt>JLabel</tt> 和 <tt>JTextField</tt> 组件。 </li> |
| <li>将光标放在所选组件上，然后将其拖至上面两个文本字段的右侧。 |
| <p class="align-center"><img alt="文本字段正移动到第二列" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/movesecondcolumn.png"></p> |
| <p class="notes"><b>注：</b>在拖动之前，请确保光标未变为双向箭头，否则，将需要调整所选组件的大小。 </p> |
| <p>在移动组件后，窗体应如下所示。 </p> |
| <p class="align-center"><img alt="额外的行" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/extrarows.png"></p> |
| <p> |
| 要删除多余的第 10 和 11 行（行索引分别为 9 和 10），请右键单击行标题，然后从上下文菜单中选择 <tt>Delete Row</tt>（删除行）。 </p> |
| <p><tt>Phone</tt> 部分将变得更加紧凑。</p> |
| <p class="align-center"><img alt="文本字段已移动到第二列" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/textfieldsmoved.png"></p> </li> |
| </ol> |
| <p>要固定此处的第二列的间距，请执行以下操作：</p> |
| <ol><li>在网格区域中，按住 Ctrl 键单击 <tt>Skype:</tt> 和 <tt>Home Phone:</tt> 标签将其选中。</li> |
| <li>单击 <tt>Insets</tt>（插入量）文本字段右侧的浏览按钮 (<img alt="&quot;Browse&quot;（浏览）按钮" src="../../../images_www/articles/80/java/gbcustomizer-advanced/browsebutton.png">)。<br> 此时将显示 <tt>Insets</tt>（插入量）对话框。 </li> |
| <li>在 <tt>Left:</tt>（左侧：）文本字段中输入 <tt>5</tt>，然后单击 "OK"（确定）。</li> |
| </ol> |
| |
| <!-- ++++++++++++ Introducing Subcontainers ++++++++++++ --> |
| <a name="01d"></a> |
| <h3>引入子容器</h3> |
| <p>基于网格的布局有时会引入不必要的依赖关系，需要通过子容器进行解决。</p> |
| <p>如果单击工具栏中的 "Test Layout"（测试布局）(<img alt="&quot;Test Layout&quot;（测试布局）按钮" src="../../../images_www/articles/80/java/gbcustomizer-advanced/testlayoutbutton.png">) 按钮并测试当前布局的水平大小可调性，则可以看到在 "Browse"、"OK" 和 "Cancel" 按钮周围创建了多余空间。</p> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/unwantedspace.png" rel="lytebox" title="多余空间"> <img alt="多余空间" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/unwantedspace-small.png"></a></p> |
| |
| <p>发生这种情况的原因是，第四列同时包含文本字段和按钮（这两种组件分别需要增大和减小）。您需要修改布局以使 <tt>Street</tt> 和 <tt>City:</tt> 文本字段占据 <tt>Browse</tt> 按钮周围的额外空间。当前布局确保了 <tt>Street:</tt> 和 <tt>City:</tt> 文本字段右边缘的垂直位置与 <tt>Home Phone:</tt> 文本字段左边缘相同。要使这些位置没有关联，请完成以下步骤：</p> |
| <ol><li>按住 Ctrl 键单击 <tt>Street:</tt> 文本字段及其右侧的 <tt>Browse</tt> 按钮将其选中。</li> |
| <li>右键单击所选内容，然后从上下文菜单中选择 <tt>Enclose in Container</tt>（包含在容器中）。 |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/enclose.png" rel="lytebox" title="包含在容器中"> <img alt="包含在容器中" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/enclose-small.png"></a></p> |
| <p>在将组件包含在子容器中后，<tt>Home Phone:</tt> 标签和文本字段之间的边界不再影响 <tt>Street</tt> 文本字段和按钮之间的边界。 </p> |
| <p class="notes"><b>注：</b><tt>Enclose in Container</tt>（包含在容器中）操作将在选定组件占据的单元格中创建一个新的子容器。它将选定组件移到新引入的容器中，但保留其相对位置和其他布局约束。</p></li> |
| </ol> |
| <p>对于 <tt>City:</tt> 文本字段及其右侧的 <tt>Browse</tt> 按钮，重复上面列出的两个步骤，以便将其包含在子容器中，如下所示。</p> |
| |
| <p class="align-center"><img alt="包含在容器中" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/enclosecity.png"></p> |
| |
| <p>现在，您希望按如下方式删除 <tt>OK</tt> 和 <tt>Cancel</tt> 按钮周围的多余空间：</p> |
| <ol> |
| <li>单击 "Close"（关闭）取消选择包含在子容器中的组件，右键单击窗体，然后从上下文菜单中选择 <tt>Customize Layout</tt>（定制布局）。</li> |
| <li>按住 Ctrl 键单击窗体底部的 <tt>OK</tt> 和 <tt>Cancel</tt> 按钮将其选中。</li> |
| <li>右键单击所选内容，然后从上下文菜单中选择 <tt>Enclose in Container</tt>（包含在容器中）。<br>此时将为这些按钮创建一个新的子容器。 |
| <p class="align-center"><img alt="子容器中的按钮" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerbuttons.png"></p> |
| <p class="notes"><b>注：</b>无法调整子容器中的任何组件的大小。因此，这些组件将彼此相邻放在容器的中心位置（这是默认锚定方式）。</p></li> |
| </ol> |
| |
| <p>要更改整个子容器的锚定方式，请完成以下步骤：</p> |
| <ol> |
| <li>请确保选中了带有 <tt>OK</tt> 和 <tt>Cancel</tt> 按钮的子容器，然后单击 <tt>Anchor</tt>（锚点）组合框右侧的箭头按钮 (<img alt="&quot;Test Layout&quot;（测试布局）按钮" src="../../../images_www/articles/80/java/gbcustomizer-advanced/arrowbutton.png">)。</li> |
| <li>向下滚动并从列表中选择 <tt>Line End</tt>（行尾）。 |
| <p class="align-center"><img alt="锚定到行尾的按钮" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerlineend.png"></p></li> |
| |
| </ol> |
| <p>布局效果看起来很好，但包含 <tt>OK</tt> 和 <tt>Cancel</tt> 按钮的子容器仅占据最后一行中的最后两个单元格。<br> 如果 <tt>OK</tt> 和 <tt>Cancel</tt> 按钮变宽（例如，在翻译为不同语言期间），则这些按钮会将 <tt>Work Phone:</tt> 和 <tt>Cell Phone:</tt> 文本字段的右边缘向后推。<br> 为避免出现这种潜在的问题，并使子容器占据底部行中的所有单元格，请选择该子容器，然后将其左边框拖至行的开头。 </p> |
| <p class="align-center"><img alt="已调整大小的子容器" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/subcontainerresized.png"></p> |
| <p>子容器将占据底部行的所有单元格。</p> |
| |
| |
| <!-- ++++++++++++ Navigating Between Containers ++++++++++++ --> |
| <a name="01e"></a> |
| <h3>在容器之间导航</h3> |
| <p>要在子容器中添加组件（例如，在现有 <tt>OK</tt> 和 <tt>Cancel</tt> 按钮的基础上添加 <tt>Help</tt> 按钮），您需要在编辑子容器布局之前从主容器切换到子容器。 </p> |
| <p>完成下面列出的步骤，在现有子容器中添加一个按钮： </p> |
| <ol><li>单击包含 <tt>OK</tt> 和 <tt>Cancel</tt> 按钮的子容器将其选中。</li> |
| <li>右键单击该容器以显示上下文菜单，然后从该菜单中选择 <tt>Design This Container</tt>（设计此容器）。 |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/designsubcontainer.png" rel="lytebox" title="设计子容器"> <img alt="设计子容器" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/designsubcontainer-small.png"></a></p> |
| </li> |
| <li>右键单击第二列的标题，然后从上下文菜单中选择 <tt>Insert Column After</tt>（在后面插入列）。<br> 此时将显示新按钮的空单元格。 |
| |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/emptycell.png" rel="lytebox" title="空单元格"> <img alt="空单元格" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/emptycell-small.png"></a></p></li> |
| <li>在新创建的单元格内右键单击，然后从上下文菜单中选择 <tt>Add Component</tt>（添加组件）> <tt>Swing Controls</tt>（Swing 控件）> <tt>Button</tt>（按钮）。<br> 此时将添加一个新的 <tt>jButton1</tt> 按钮。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/80/java/gbcustomizer-advanced/newbutton.png" rel="lytebox" title="添加的新按钮"> <img alt="添加的新按钮" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/newbutton-small.png"></a></p></li> |
| <li>单击属性定制器中的 "Baseline-Related Anchor"（与基线相关的锚点）按钮 (<img alt="与基线相关的锚点" src="../../../images_www/articles/80/java/gbcustomizer-advanced/baselineanchor.png">)，将新按钮与行中的两个现有按钮对齐。</li> |
| <li>单击 "Insets"（插入量）文本字段右侧的浏览按钮 (<img alt="&quot;Browse&quot;（浏览）按钮" src="../../../images_www/articles/80/java/gbcustomizer-advanced/browsebutton.png">)。此时将显示 "Insets"（插入量）对话框。在 "Top:"（上：）文本字段中输入 5，然后单击 "OK"（确定）。</li> |
| |
| <li>要立即查看主容器布局的外观，请右键单击设计的子容器，然后从上下文菜单中选择 <tt>Design Parent Container</tt>（设计父容器）。 |
| <p class="align-center"><img alt="设计父容器" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/designparentcontainer.png"></p> |
| <p class="notes"><b>注：</b>如果右键单击这些按钮，则不会显示上下文菜单。</p> |
| </li> |
| </ol> |
| |
| <p>布局设计现已完成。<br> 只剩下与容器布局无关的最终更改。<br> 要重命名该按钮，请完成以下步骤：</p> |
| <ol> |
| <li>单击 "Close"（关闭），以关闭 "Customize Layout"（定制布局）对话框。</li> |
| <li>在 "Design"（设计）视图中，单击 <tt>jButton1</tt> 组件，然后按 F2 键（或者，从上下文菜单中选择 "Edit Text"（编辑文本））。</li> |
| <li>删除选定的文本，然后输入 <tt>Help</tt>。 </li> |
| <li>按 Enter 键。 |
| <p class="align-center"><img alt="最终布局" border="1" src="../../../images_www/articles/80/java/gbcustomizer-advanced/finallayout.png"></p></li> |
| </ol> |
| |
| |
| |
| <a name="summary"></a> |
| <h2>小结</h2> |
| <p>在本教程中，您通过添加新组件、插入行等操作修改了现有窗体。在设计布局时，您了解了如何使用 GridBag 定制器的高级功能重新组织窗体布局。</p> |
| <p>转至<a href="../java/gbcustomizer-basic.html">使用 GridBag 定制器设计基本 Java 窗体</a></p> |
| |
| |
| <p class="align-center"><a href="#top">返回页首</a></p> |
| |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20Designing%20an%20Advanced%20Java%20Form%20Using%20the%20GridBag%20Customizer">发送有关此教程的反馈意见</a></div> |
| <br style="clear:both;" > |
| |
| |
| <a name="seealso"></a> |
| <h2>另请参见</h2> |
| |
| <p>现在，您已完成了“使用 GridBag 定制器设计高级 Java 窗体”教程。有关向所创建的 GUI 中添加功能的信息，请参见：</p> |
| <ul> |
| <li><a href="gui-functionality.html">构建 GUI 应用程序简介</a> </li> |
| |
| <li><a href="gui-image-display.html">在 GUI 应用程序中处理图像</a></li> |
| |
| |
| <li><a href="http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29" target="_blank">GUI 构建器常见问题解答</a> </li> |
| <li><a href="../../trails/matisse.html">Java GUI 应用程序学习资源</a> </li> |
| <li><a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920">使用 NetBeans IDE 开发应用程序</a>中的<i>实现 Java GUI</i></a></li> |
| </ul> |
| |
| <p class="align-center"><a href="#top">返回页首</a></p> |
| </body> |
| </html> |
