| <!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 http-equiv="content-type" content="text/html; charset=UTF-8" > |
| <meta name="description" content="This tutorial guides you through the process of managing an application form layout using the NetBeans IDE GridBag Designer basic features."> |
| <meta name="KEYWORDS" content="NetBeans, GridBag, GridBag Customizer, Layout Manager, Tutorial, Guide, User, Documentation, Basic"> |
| <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 部分：使用 GridBag 定制器设计基本 Java 窗体</li> |
| <li>第 2 部分：<a href="../java/gbcustomizer-advanced.html">使用 GridBag 定制器设计高级 Java 窗体</a></li> |
| </ul> |
| |
| |
| |
| |
| |
| <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="#01">GridBag 定制器概述</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> |
| </ul> |
| </li> |
| |
| <li><a href="#02">设置组件布局</a> |
| <ul> |
| <li><a href="#02a">移动</a></li> |
| <li><a href="#02b">调整大小</a></li> |
| <li><a href="#02c">指定“填充”布局约束</a></li> |
| <li><a href="#02d">预览</a></li> |
| <li><a href="#02e">指定“X 粗细”和“Y 粗细”约束</a></li> |
| <li><a href="#02f">锚定</a></li> |
| <li><a href="#02g">间距</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-basic-tutorial.zip">gbcustomizer-basic-tutorial.zip</a></td> |
| <td class="tbltd1">一个具有演示项目的档案文件，其中包含初始和目标教程布局。</td> |
| </tr> |
| |
| </tbody> |
| </table> |
| |
| <p class="notes"><strong>注：</strong></p> |
| <div class="indent"> |
| <ul> |
| <li>您可以将用作该系列教程起点的项目作为 <tt>.zip</tt> 档案文件进行下载。 </li> |
| <li>本教程仅重点介绍如何设计容器的布局。在 GUI 中添加功能超出了本教程的范围。</li> |
| </ul> |
| </div> |
| <!-- ++++++++++++ Using .zip ++++++++++++ --> |
| <a name="zip"></a> |
| <h2>打开示例项目</h2> |
| <ol><li>下载 <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip">gbcustomizer-basic-tutorial.zip</a> 项目，并将其解压缩到您的计算机上的任意位置。</li> |
| <li>在 "Projects"（项目）标签中，选择 <tt>File</tt>（文件）> <tt>Open Project</tt>（打开项目），导航至在上一步中解压缩的 <tt>gbcustomizer-basic-tutorial</tt> 项目，然后单击 "Open Project"（打开项目）。项目文件夹可能包含在也称为 <tt>gbcustomizer-basic-tutorial</tt> 的文件夹中。</li> |
| <li>在 "Reference Problem"（引用问题）对话框中，单击 "Resolve"（解决）。IDE 将自动下载 JUnit 和 JUnit 4 库。按照 NetBeans IDE 安装程序中的说明安装所需的插件。安装完成后，单击 "Finish"（完成）。</li> |
| <li> 展开<tt>源包</tt> > <tt>Tutorial</tt>，然后双击 <tt>ContactsBasicInitial.java</tt>。<br> 此时将在 GUI 构建器的 "Design"（设计）视图中打开样例窗体。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/72/java/gbcustomizer-basic/sampleform.png" rel="lytebox" title="样例窗体初始打开"> <img alt="样例窗体初始打开" class="margin-around b-none" src="../../../images_www/articles/72/java/gbcustomizer-basic/sampleform-small.png"></a></p></li> |
| </ol> |
| <a name="01"></a> |
| <h2>GridBag 定制器概述</h2> |
| |
| <p>GridBag 布局定制器是 Java 平台提供的最灵活且最复杂的布局管理器之一。定制器将组件放在行和列网格中，使指定的组件可以占据多个行或列。所有行的高度并不一定相同。同样，所有列的宽度也并不一定相同。实际上，GridBagLayout 将组件放在网格的矩形（单元格）中，然后使用组件的首选大小确定所需的单元格大小。 </p> |
| <p>要显示 GridBag 定制器，请完成以下步骤： </p> |
| <ol> |
| <li>在 "Design"（设计）视图中，选择 "JFrame Form"（JFrame 窗体）。</li> |
| |
| <li>右键单击该窗体，然后从上下文菜单中选择 <tt>Customize Layout</tt>（定制布局）。<br> 此时将打开 "Customize Layout"（定制布局）对话框，如下所示。 |
| <p class="align-center"> |
| <a href="../../../images_www/articles/72/java/gbcustomizer-basic/customizerdialog.png" rel="lytebox" title="GridBag 定制器"> <img alt="GridBag 定制器" class="margin-around b-none" src="../../../images_www/articles/72/java/gbcustomizer-basic/customizerdialog-small.png"></a></p></li> |
| |
| </ol> |
| <p class="notes"><b>注：</b>在本教程中，已设置了 GridBagLayout。如果使用其他窗体，请在上面的步骤 2 中右键单击该窗体，从上下文菜单中选择<tt>设置布局</tt> > <tt>网格包布局</tt>（这将启用<tt>定制布局</tt>菜单项）。然后完成该步骤。</p> |
| |
| <div class="indent"> |
| <a name="01a"></a> |
| <h3>网格区域</h3> |
| <p>网格区域位于 "Customize Layout"（定制布局）对话框的右侧。它显示组件的网格式布局。<br> 已添加样例窗体中的组件，但没有正确设置这些组件的布局。 </p> |
| |
| <a name="01b"></a> |
| <h3>工具栏</h3> |
| <p>包含五个按钮的工具栏位于网格区域的上方。通过该工具栏，可方便地访问常用的命令，例如撤消、重做、启用相同间隙、隐藏空行和列以及测试布局。</p> |
| <p class="align-center"><img alt="工具栏" border="1" src="../../../images_www/articles/72/java/gbcustomizer-basic/toolbar.png"></p> |
| |
| <a name="01c"></a> |
| <h3>属性定制器</h3> |
| <p>属性定制器位于 "Customize Layout"（定制布局）对话框的左上角。它便于您修改常用的布局约束，例如 <tt>Anchor</tt>（锚点）、<tt>Insets</tt>（插入量）等。 </p> |
| <p class="align-center"><img alt="属性定制器" border="1" src="../../../images_www/articles/72/java/gbcustomizer-basic/propcustomizer.png"></p> |
| |
| <a name="01d"></a> |
| <h3>属性表单</h3> |
| <p>属性表单位于属性定制器的下方。它显示选定组件的布局约束。 </p> |
| <p class="align-center"><img alt="属性表单" border="1" src="../../../images_www/articles/72/java/gbcustomizer-basic/propsheet.png"></p> |
| |
| |
| </div> |
| |
| |
| <!-- ++++++++++++ Laying Out Components ++++++++++++ --> |
| <a name="02"></a> |
| <h2>设置组件布局</h2> |
| <p><tt>ContactsBasicInitial</tt> 窗体的组件在添加后设置为单行布局。在未指定布局约束时，GridBagLayout 将按这种方式设置组件布局。</p> |
| |
| <div class="indent"> |
| <a name="02a"></a> |
| <h3>移动</h3> |
| <p>您可以根据需要使用简单的拖放功能移动组件。如果选定，将使用绿色突出显示组件。拖动组件时，组件的 <tt>Grid X</tt>（网格 X）和 <tt>Grid Y</tt>（网格 Y）属性将随之改变以反映新位置。根据需要，将自动创建新的列和行。</p> |
| |
| <p> 要创建下图所示的布局，请按如下方式将组件从第 2 列移到第 11 列：</p> |
| <ol> |
| <li>将 <tt>Surname:</tt> 标签和相邻文本字段拖至第二行的前两个单元格中。</li> |
| |
| <li>将 <tt>Street:</tt> 标签、相邻文本字段以及相邻 <tt>Browse</tt> 按钮拖至第三行的前三个单元格中。 </li> |
| <li>将 <tt>City:</tt> 标签、相邻文本字段以及相邻 <tt>Browse</tt> 按钮拖至第四行的前三个单元格中。 </li> |
| <li>将 <tt>State:</tt> 标签和相邻组合框拖至第五行的前两个单元格中。 |
| <p>现在，组件将按目标布局进行放置。</p> |
| </li> |
| |
| </ol> |
| <p class="align-center"> |
| <a href="../../../images_www/articles/72/java/gbcustomizer-basic/layout1.png" rel="lytebox" title="没有额外列的布局"> <img alt="没有额外列的布局" class="margin-around b-none" src="../../../images_www/articles/72/java/gbcustomizer-basic/layout1-small.png"></a></p> |
| |
| <p class="note"><b>注：</b>在移动组件时，将使用绿色突出显示目标单元格。 </p> |
| |
| <a name="02b"></a> |
| <h3>调整大小</h3> |
| <p>在选定组件时，可通过拖动组件周围显示的小方形大小调整控柄来调整组件的大小。</p> |
| <p>要调整 <tt>First Name:</tt> 和 <tt>Surname:</tt> 文本字段的大小并使其占据两个相邻的单元格，请完成以下步骤：</p> |
| <ol> |
| <li>按住 Ctrl 键单击两个 JTextField 组件将其选中。 </li> |
| <li>在选定两个 JTextField 的情况下，将光标放在单元格的右边缘上，单击并拖动，直到突出显示的橙色基准线包含右侧第 2 列中的相邻单元格。</li> |
| |
| <li>松开光标以调整组件大小。 |
| <p> 此时将扩展 <tt>First Name:</tt> 和 <tt>Surname:</tt> 文本字段以占据两个单元格（如下图所示）。同时，将突出显示占据的单元格。</p></li> |
| </ol> |
| <p class="align-center"><a href="../../../images_www/articles/72/java/gbcustomizer-basic/tfieldsresized.png" rel="lytebox" title="已调整大小的文本字段"> <img alt="已调整大小的文本字段" class="margin-around b-none" src="../../../images_www/articles/72/java/gbcustomizer-basic/tfieldsresized-small.png"></a></p> |
| |
| <a name="02c"></a> |
| <h3>指定“填充”布局约束</h3> |
| <p>虽然 <tt>First Name:</tt> 和 <tt>Surname:</tt> 文本字段占据两个单元格，但它们具有首选大小并位于显示区域的中间位置。在继续操作之前，我们需要使用<tt>填充</tt>布局约束填充单元格的整个区域。 </p> |
| <p>要设置足够宽的文本字段以水平填充其显示区域而不更改其高度，请在属性表单区域的<tt>填充</tt>组合框中选择<tt>水平</tt>。 </p> |
| <p class="align-center"><a href="../../../images_www/articles/72/java/gbcustomizer-basic/horizontalset.png" rel="lytebox" title="已调整大小的文本字段"> <img alt="已调整大小的文本字段" class="margin-around b-none" src="../../../images_www/articles/72/java/gbcustomizer-basic/horizontalset-small.png"></a></p> |
| |
| <a name="02d"></a> |
| <h3>预览</h3> |
| <p>现已成功完成了 <tt>ContactsBasicInitial</tt> 窗体布局，您可以尝试使用该界面查看结果。您可以在工作过程中预览窗体，方法是单击定制器工具栏中的 "Test Layout"（测试布局）按钮 (<img src="../../../images_www/articles/72/java/gbcustomizer-basic/testbutton.png">)。此时窗体在单独的窗口中打开，以便您在构建并运行窗体之前对其进行测试。</p> |
| <p class="align-center"><img alt="设计预览" border="1" src="../../../images_www/articles/72/java/gbcustomizer-basic/designpreview.png"> </p> |
| <p>该预览用于测试布局的动态行为，即在调整所设计容器的大小时的布局行为。</p> |
| <a name="02e"></a> |
| <h3>指定“X 粗细”和“Y 粗细”约束</h3> |
| <p>指定粗细将对 GridBagLayout 组件外观造成很大影响。粗细用于确定如何在列（X 粗细）和行（Y 粗细）之间分配空间；这对指定调整大小行为非常重要。<br>通常，粗细是将 0.0 和 1.0 作为最小和最大值指定的：根据需要，使用两者之间的数字。较大的数字表示组件的行或列具有较大的空间。 </p> |
| <p>如果您尝试水平调整预览的容器大小，则可以看到布局组件保持相同的大小并位于容器的中间位置。甚至将“填充”约束设置为“水平”的 <tt>First Name:</tt> 和 <tt>Surname:</tt> 字段也不会增大，因为“填充”约束指的是单元格内部区域，而不是单元格大小。换句话说，如果将组件的“填充”属性设置为<tt>无</tt>以外的值，则表明它<b>可以</b>增大，但并不表明它<b>需要</b>增大。<br> “X 粗细”和“Y 粗细”布局约束决定了组件是否<b>需要</b>在水平和垂直方向增大。<br> 如果一行（或列）中的两个组件具有非零 X 粗细（或 Y 粗细）约束值，则这些值决定了各个组件的增大幅度。例如，如果值为 0.6 和 0.4，则第一个组件获取 60% 可用额外空间，而第二组件获取 40% 空间。 </p> |
| <p>要使设计的容器在水平方向上正确调整大小，请执行以下操作： </p> |
| <ol> |
| <li>在 GridBag 定制器的网格区域中，选择 <tt>First Name:</tt> 标签右侧的文本字段。 </li> |
| <li>在 <tt>X 粗细</tt>布局约束值字段中键入 <tt>1.0</tt>，然后按 Enter 键。 </li> |
| <li>在 GridBag 定制器的网格区域中，选择 <tt>Surname:</tt> 标签右侧的文本字段。</li> |
| <li>在 <tt>X 粗细</tt>布局约束值字段中键入 <tt>1.0</tt>，然后按 Enter 键。</li> |
| <li>在 GridBag 定制器的网格区域中，选择 <tt>Street</tt> 标签右侧的文本字段。</li> |
| <li>在<tt>填充</tt>组合框中选择<tt>水平</tt>，然后按 Enter 键。 </li> |
| <li>在 <tt>X 粗细</tt>布局约束值字段中键入 <tt>1.0</tt>，然后按 Enter 键。</li> |
| <li>在 GridBag 定制器的网格区域中，选择 <tt>City</tt> 标签右侧的文本字段。</li> |
| <li>在<tt>填充</tt>组合框中选择<tt>水平</tt>，然后按 Enter 键。 </li> |
| <li>在 <tt>X 粗细</tt>布局约束值字段中键入 <tt>1.0</tt>，然后按 Enter 键。</li> |
| </ol> |
| |
| <p>要验证设计的容器是否在水平方向上正确调整大小，请单击定制器工具栏中的 "Test Layout"（测试布局）按钮 (<img src="../../../images_www/articles/72/java/gbcustomizer-basic/testbutton.png">)，然后拖动 <tt>ContactsBasicInitial</tt> 窗体的边框。 </p> |
| <p class="align-center"><img alt="已调整大小的 ContactsBasicInitial" border="1" src="../../../images_www/articles/72/java/gbcustomizer-basic/resizedpreview.png"> </p> |
| |
| <a name="02f"></a> |
| <h3>锚定</h3> |
| <p>如果组件大小比其显示区域小，则可以使用锚定功能确定组件的放置位置（在该区域内）。</p> |
| <p>在上一部分中水平调整 <tt>ContactsBasicInitial</tt> 窗体大小期间，您可能已注意到 <tt>State</tt> 组合框移到离 <tt>State</tt> 标签很远的位置。由于该组合框的首选大小比相应单元格小，因此，GridBagLayout 默认将该组件放在单元格的中心位置。</p> |
| <p>要更改此行为，请按如下方式指定<tt>锚点</tt>布局约束：</p> |
| <ol> |
| <li>选择 <tt>State</tt>（状态）标签右侧的组合框，然后单击定制器<a href="#01d">属性表单</a>中 <tt>Anchor</tt>（锚点）组合框右侧的箭头按钮 (<img alt="箭头按钮" src="../../../images_www/articles/72/java/gbcustomizer-basic/arrowbutton.png">)。</li> |
| <li>从下拉列表中选择<tt>行首</tt>。</li> |
| </ol> |
| <p>现在，在水平调整窗体大小时，<tt>State</tt> 组合框将锚定到该窗体的左侧。</p> |
| <p class="align-center"><a href="../../../images_www/articles/72/java/gbcustomizer-basic/comboanchored.png" rel="lytebox" title="锚定组合框"> <img alt="锚定组合框" class="margin-around b-none" src="../../../images_www/articles/72/java/gbcustomizer-basic/comboanchored-small.png"></a></p> |
| <p>要将标签与左侧对齐，而不是像现在这样与中心对齐，请完成以下步骤：</p> |
| <ol> |
| <li>选择 <tt>First name:</tt>、<tt>Surname:</tt>、<tt>Street</tt>、<tt>City</tt> 和 <tt>State</tt> 标签。 |
| <p class="note"><b>注：</b>可通过以下方法选择多个组件：在第一个组件上按鼠标左键，按住该组件并将其拖至最后一个组件上，就好像绘制一个包含所有标签的矩形一样。在松开鼠标后，将使用橙色边框和绿色背景突出显示所有五个组件，如下所示。</p> |
| <p class="align-center"> <img alt="已选定组件" border="1" src="../../../images_www/articles/72/java/gbcustomizer-basic/multiselect.png"> </p></li> |
| |
| <li> 将标签的<tt>锚点</tt>布局约束更改为<tt>行首</tt>。<br> 标签将锚定到左侧。 |
| <p class="align-center"> <img alt="标签将锚定到左侧。" border="1" src="../../../images_www/articles/72/java/gbcustomizer-basic/linestartanchor.png"> </p></li> |
| </ol> |
| <a name="02g"></a> |
| <h3>间距</h3> |
| <p>默认情况下，每个组件都没有外部填充。<tt>Inset</tt>（插入量）约束用于指定组件的外部填充，即组件与其显示区域边缘之间的最小间隙。</p> |
| <p>在当前布局中，组件彼此放置得太近。要分隔这些组件，请执行以下操作：</p> |
| <ol> |
| <li>按住 Ctrl 键单击以选择所有组件。</li> |
| <li>按 "Inset"（插入量）约束文本字段右侧的按钮。 </li> |
| <li>在显示的对话框中，将 <tt>Top:</tt>（上：）和 <tt>Left:</tt>（左：）值更改为 <tt>5</tt>，然后单击 "OK"（确定）。 |
| <p class="align-center"> <img alt="&quot;Insets&quot;（插入量）对话框" border="1" src="../../../images_www/articles/72/java/gbcustomizer-basic/insets.png"> </p> |
| 您的窗体现在应看起来像 <tt>ContactsBasicFinal.java</tt> 文件中的窗体（如果打开）。 |
| <p class="align-center"><a href="../../../images_www/articles/72/java/gbcustomizer-basic/contactsbasicfinal.png" rel="lytebox" title="ContactsBasicFinal"> <img alt="ContactsBasicFinal" class="margin-around b-none" src="../../../images_www/articles/72/java/gbcustomizer-basic/contactsbasicfinal-small.png"></a></p> |
| </li> |
| |
| </ol> |
| |
| |
| |
| |
| </div> |
| |
| <!-- ++++++++++++ Summary ++++++++++++ --> |
| <a name="summary"></a> |
| <h2>小结</h2> |
| <p>在本简短教程中，您设计了一个简单的窗体。在编辑布局时，您学会了如何使用 GridBag 定制器的基本功能。<br> 现在，您可以转至此系列教程的第二部分（共两个部分）。在该部分中，您将修改 <tt>ContactsAdvancedInitial</tt> 窗体以熟悉 GridBag 定制器的高级功能。</p> |
| |
| |
| <p>转至<a href="../java/gbcustomizer-advanced.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%20a%20Basic%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> |
