| <!doctype html> |
| <html class="no-js" lang="en" dir="ltr"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| <title>Designing a Basic Java Form Using the GridBag Customizer</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description" content="Designing a Basic Java Form Using the GridBag Customizer - Apache NetBeans"> |
| <meta name="author" content="Apache NetBeans"> |
| <meta name="description" content="Designing a Basic Java Form Using the GridBag Customizer - Apache NetBeans"> |
| <meta name="keywords" content="Apache NetBeans, Tutorials, Designing a Basic Java Form Using the GridBag Customizer"> |
| <meta name="generator" content="Apache NetBeans"> |
| <link rel="stylesheet" href="../../../../../../_/css/font-awesome.min.css"> |
| <link rel="alternate" type="application/atom+xml" title="Apache NetBeans Blog" href="https://netbeans.apache.org/blogs/atom" /> |
| <link rel="stylesheet" href="../../../../../../_/css/highlightjs/default.min.css"> |
| <link rel="stylesheet" href="../../../../../../_/css/netbeans.css"> |
| <link rel="apple-touch-icon" sizes="180x180" href="../../../../../../_/images/fav/apple-touch-icon.png"> |
| <link rel="icon" type="image/png" sizes="32x32" href="../../../../../../_/images/fav/favicon-32x32.png"> |
| <link rel="icon" type="image/png" sizes="16x16" href="../../../../../../_/images/fav/favicon-16x16.png"> |
| <link rel="manifest" href="../../../../../../_/images/fav/site.webmanifest"> |
| <link rel="mask-icon" href="../../../../../../_/images/fav/safari-pinned-tab.svg" color="#5bbad5"> |
| <meta name="msapplication-TileColor" content="#ffc40d"> |
| <meta name="theme-color" content="#ffffff"> |
| <link href="../../../../../../_/css/font-open-sans.css" rel="stylesheet"> |
| <!-- |
| 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. |
| --> |
| </head> |
| <body> |
| <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium"> |
| <button type="button" data-toggle="responsive-menu"><i style='font-size: 32px; color: #fff; padding: 8px' class='fa fa-bars'></i></button> |
| <div class="title-bar-title">Apache NetBeans</div> |
| </div> |
| <div class="top-bar" id="responsive-menu"> |
| <div class='top-bar-left'> |
| <a class='title' href="../../../../../../index.html"><img src='../../../../../../_/images/apache-netbeans.svg' style='padding: 8px; height: 48px;'> Apache NetBeans</a> |
| </div> |
| <div class="top-bar-right"> |
| <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"> |
| <li> <input id="search-input" type="text" placeholder="Search the docs"> </li> |
| <li> <a href="../../../../../../front/main/community">Community</a> </li> |
| <li> <a href="../../../../../../front/main/participate">Participate</a> </li> |
| <li> <a href="../../../../../../front/main/blogs">Blog</a></li> |
| <li> <a href="../../../../../../front/main/help">Get Help</a> </li> |
| <li> <a href="https://plugins.netbeans.apache.org/">Plugins</a> </li> |
| <li> <a href="../../../../../../front/main/download">Download</a> </li> |
| </ul> |
| </div> |
| </div> |
| |
| <!-- src/templates/news --> |
| <section class="hero news alternate"> |
| <div class='grid-container'> |
| <div class='cell'> |
| <div class="annotation">Latest release</div> |
| <h1>Apache NetBeans 28</h1> |
| <p><a class="button success" href="../../../../../../front/main/download/nb28">Download</a></p> |
| </div> |
| </div> |
| </section> |
| <div class='grid-container main-content tutorial'> |
| <article class="doc"> |
| <h1 class="sect0">Designing a Basic Java Form Using the GridBag Customizer</h1> |
| <div class="sectionbody"> |
| <div class="admonitionblock note"> |
| <table> |
| <tbody><tr> |
| <td class="icon"><i class="fa icon-note" title="Note"></i></td> |
| <td class="content">This tutorial needs a review. |
| You can <a href="https://github.com/apache/netbeans-antora-tutorials/edit/main/modules/ROOT/pages/kb/docs/java/gbcustomizer-basic.adoc" title="Edit this tutorial in github">edit it in GitHub </a> |
| following these <a href="../../../../../../tutorial/main/kb/docs/contributing">contribution guidelines.</a></td> |
| </tr></tbody> |
| </table> |
| </div> |
| </div> |
| <div id="toc" class="toc"> |
| <div id="toctitle"></div> |
| <ul class="sectlevel1"> |
| <li><a href="#_opening_example_project">Opening Example Project</a></li> |
| <li><a href="#_gridbag_customizer_overview">GridBag Customizer Overview</a> |
| <ul class="sectlevel2"> |
| <li><a href="#_grid_area">Grid Area</a></li> |
| <li><a href="#_toolbar">Toolbar</a></li> |
| <li><a href="#_property_customizer">Property Customizer</a></li> |
| <li><a href="#_property_sheet">Property Sheet</a></li> |
| </ul> |
| </li> |
| <li><a href="#_laying_out_components">Laying Out Components</a> |
| <ul class="sectlevel2"> |
| <li><a href="#_moving">Moving</a></li> |
| <li><a href="#_resizing">Resizing</a></li> |
| <li><a href="#_specifying_fill_layout_constraint">Specifying Fill Layout Constraint</a></li> |
| <li><a href="#_previewing">Previewing</a></li> |
| <li><a href="#_specifying_weight_x_and_weight_y_constraints">Specifying Weight X and Weight Y Constraints</a></li> |
| <li><a href="#_anchoring">Anchoring</a></li> |
| <li><a href="#_spacing">Spacing</a></li> |
| </ul> |
| </li> |
| <li><a href="#_summary">Summary</a></li> |
| <li><a href="#_summary_2">Summary</a></li> |
| </ul> |
| </div> |
| <div id="preamble"> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>This tutorial is the first in a two-part series that demonstrates how to design a simple Java form using the basic features of the NetBeans IDE GridBag Customizer. |
| The series is intended as a guide to show how you can layout your GUI components without manually writing your layout code and then perform additional changes in an existing form to implement a specific target layout that is required by the project.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Each document in this series covers specific set of features.</p> |
| </div> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>Part 1: Designing a Basic Java Form Using the GridBag Customizer</p> |
| </li> |
| <li> |
| <p>Part 2: <a href="../gbcustomizer-advanced/" class="xref page">Designing an Advanced Java Form Using the GridBag Customizer</a></p> |
| </li> |
| </ul> |
| </div> |
| <div class="paragraph"> |
| <p><strong>To follow this tutorial, you need the software and resources listed below.</strong></p> |
| </div> |
| <table class="tableblock frame-all grid-all stretch"> |
| <colgroup> |
| <col style="width: 50%;"> |
| <col style="width: 50%;"> |
| </colgroup> |
| <thead> |
| <tr> |
| <th class="tableblock halign-left valign-top">Software or Resource</th> |
| <th class="tableblock halign-left valign-top">Version Required</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip">gbcustomizer-basic-tutorial.zip</a></p></td> |
| <td class="tableblock halign-left valign-top"><p class="tableblock">An archive with the demo project containing the initial and target tutorial layouts.</p></td> |
| </tr> |
| </tbody> |
| </table> |
| <div class="paragraph"> |
| <p><strong>Notes:</strong></p> |
| </div> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>You can download the project that is used as the starting point for this series as a <code>.zip</code> archive.</p> |
| </li> |
| <li> |
| <p>This tutorial focuses on designing the layout of the container only. Adding functionality to the GUI is out of its scope.</p> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_opening_example_project"><a class="anchor" href="#_opening_example_project"></a>Opening Example Project</h2> |
| <div class="sectionbody"> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Download and unzip the <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip">gbcustomizer-basic-tutorial.zip</a> project to any location on your computer.</p> |
| </li> |
| <li> |
| <p>In the Projects tab, choose <code>File</code> > <code>Open Project</code> , navigate to the <code>gbcustomizer-basic-tutorial</code> project that you extracted in the previous step, and click Open Project. The project folder might be in a containing folder that is also called <code>gbcustomizer-basic-tutorial</code> .</p> |
| </li> |
| <li> |
| <p>In the Reference Problem dialog box, click Resolve. The IDE automatically downloads the JUnit and JUnit 4 libraries. Follow the instructions in the NetBeans IDE installer to install the required plugins. When the installation is complete, click Finish.</p> |
| </li> |
| <li> |
| <p>Expand <code>Source Packages</code> > <code>Tutorial</code> and double-click <code>ContactsBasicInitial.java</code> . |
| The sample form opens in the GUI Builder Design view.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="openblock feature"> |
| <div class="content"> |
| <div class="imageblock xref-image left"> |
| <div class="content"> |
| <a class="image" href="../../../../_images/kb/docs/java/sampleform.png"><img src="../../../../_images/kb/docs/java/sampleform-small.png" alt="sampleform small"></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_gridbag_customizer_overview"><a class="anchor" href="#_gridbag_customizer_overview"></a>GridBag Customizer Overview</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>The GridBag Layout Customizer is one of the most flexible and complex layout managers the Java platform provides. The Customizer places components in a grid of rows and columns, allowing specified components to span multiple rows or columns. Not all rows necessarily have the same height. Similarly, not all columns necessarily have the same width. Essentially, the GridBagLayout places components in rectangles (cells) in a grid, and then uses the components' preferred sizes to determine how big the cells should be.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To display the GridBag Customizer, complete the steps below:</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>In the Design view, select the JFrame form.</p> |
| </li> |
| <li> |
| <p>Right-click the form and choose <code>Customize Layout</code> from the context menu. |
| The Customize Layout dialog box opens as shown below.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="openblock feature"> |
| <div class="content"> |
| <div class="imageblock xref-image left"> |
| <div class="content"> |
| <a class="image" href="../../../../_images/kb/docs/java/customizerdialog.png"><img src="../../../../_images/kb/docs/java/customizerdialog-small.png" alt="customizerdialog small"></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="admonitionblock note"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-note" title="Note"></i> |
| </td> |
| <td class="content"> |
| In this tutorial the GridBagLayout is already set. In case you work with another form, in step 2 above, right-click the form and choose <code>Set Layout</code> > <code>Grid Bag Layout</code> from the context menu (this enables the <code>Customize Layout</code> menu item.). Then complete the procedure. |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div class="sect2"> |
| <h3 id="_grid_area"><a class="anchor" href="#_grid_area"></a>Grid Area</h3> |
| <div class="paragraph"> |
| <p>The Grid area is on the right side of the Customize Layout dialog box. It shows the grid layout of the components. |
| The components in the sample form are already added but not laid out correctly.</p> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_toolbar"><a class="anchor" href="#_toolbar"></a>Toolbar</h3> |
| <div class="paragraph"> |
| <p>A toolbar with five buttons is located above the Grid area. It provides convenient access to common commands, such as undoing, redoing, enabling uniform gaps, hiding empty rows and columns, and testing the layout.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/toolbar.png" alt="toolbar"> |
| </div> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_property_customizer"><a class="anchor" href="#_property_customizer"></a>Property Customizer</h3> |
| <div class="paragraph"> |
| <p>The Property Customizer is positioned in the top left corner of the Customize Layout dialog box. It allows for easy modification of the most common layout constraints such as <code>Anchor</code> , <code>Insets</code> , etc.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/propcustomizer.png" alt="propcustomizer"> |
| </div> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_property_sheet"><a class="anchor" href="#_property_sheet"></a>Property Sheet</h3> |
| <div class="paragraph"> |
| <p>The Property Sheet is located below the Property Customizer. It displays the layout constraints of the selected components.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/propsheet.png" alt="propsheet"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_laying_out_components"><a class="anchor" href="#_laying_out_components"></a>Laying Out Components</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>The components for the <code>ContactsBasicInitial</code> form are added and laid out in a single row. The GridBagLayout lays out the components like this when no layout constraints are specified.</p> |
| </div> |
| <div class="sect2"> |
| <h3 id="_moving"><a class="anchor" href="#_moving"></a>Moving</h3> |
| <div class="paragraph"> |
| <p>You can move components using simple drag and drop as desired. The component is highlighted with green when selected. While dragging a component, its <code>Grid X</code> and <code>Grid Y</code> properties change to reflect its new position. New columns and rows are created automatically when needed.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To create a layout like shown in the picture below, move the components from columns 2 to 11 as follows:</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Drag the <code>Surname:</code> label and the adjacent text field into the first two cells of the second row.</p> |
| </li> |
| <li> |
| <p>Drag the <code>Street:</code> label, the adjacent text field, and the adjacent <code>Browse</code> button into the first three cells of the third row.</p> |
| </li> |
| <li> |
| <p>Drag the <code>City:</code> label, the adjacent text field, and the adjacent <code>Browse</code> button into the first three cells of the fourth row.</p> |
| </li> |
| <li> |
| <p>Drag the <code>State:</code> label and the adjacent combobox into the first two cells of the fifth row.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="paragraph"> |
| <p>The components are now placed in accordance with the target layout.</p> |
| </div> |
| <div class="openblock feature"> |
| <div class="content"> |
| <div class="imageblock xref-image left"> |
| <div class="content"> |
| <a class="image" href="../../../../_images/kb/docs/java/layout1.png"><img src="../../../../_images/kb/docs/java/layout1-small.png" alt="layout1 small"></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="admonitionblock note"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-note" title="Note"></i> |
| </td> |
| <td class="content"> |
| When a component is moved the target cells are highlighted with green. |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_resizing"><a class="anchor" href="#_resizing"></a>Resizing</h3> |
| <div class="paragraph"> |
| <p>A component can be resized by dragging small square resize handles that appear around its perimeter when it is selected.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To resize the <code>First Name:</code> and <code>Surname:</code> text fields and make them occupy two adjacent cells, complete the steps below:</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Control-click the two JTextField components to select them.</p> |
| </li> |
| <li> |
| <p>With both JTextFields selected, position the cursor over the cells right edge, click and drag until the orange highlighted guideline embraces the adjacent cells in column 2 on the right.</p> |
| </li> |
| <li> |
| <p>Release the cursor to resize the components.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="paragraph"> |
| <p>The <code>First Name:</code> and <code>Surname:</code> text fields are extended to span between the two cells as shown in the following illustration. The occupied cells are highlighted.</p> |
| </div> |
| <div class="openblock feature"> |
| <div class="content"> |
| <div class="imageblock xref-image left"> |
| <div class="content"> |
| <a class="image" href="../../../../_images/kb/docs/java/tfieldsresized.png"><img src="../../../../_images/kb/docs/java/tfieldsresized-small.png" alt="tfieldsresized small"></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_specifying_fill_layout_constraint"><a class="anchor" href="#_specifying_fill_layout_constraint"></a>Specifying Fill Layout Constraint</h3> |
| <div class="paragraph"> |
| <p>Though the <code>First Name:</code> and <code>Surname:</code> text fields occupy two cells, they have the preferred size and are placed in the middle of the display area. Before moving on, we need to fill out the whole area of the cells using the <code>Fill</code> layout constraint.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To make the text fields wide enough to fill their display areas horizontally without changing their heights, in the <code>Fill</code> combobox in the Property Sheet area, select <code>Horizontal</code> .</p> |
| </div> |
| <div class="openblock feature"> |
| <div class="content"> |
| <div class="imageblock xref-image left"> |
| <div class="content"> |
| <a class="image" href="../../../../_images/kb/docs/java/horizontalset.png"><img src="../../../../_images/kb/docs/java/horizontalset-small.png" alt="horizontalset small"></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_previewing"><a class="anchor" href="#_previewing"></a>Previewing</h3> |
| <div class="paragraph"> |
| <p>Now that you have successfully completed the <code>ContactsBasicInitial</code> form layout, you can try your interface to see the results. You can preview your form as you work by clicking the Test Layout button (<span class="image"><img src="../../../../_images/kb/docs/java/testbutton.png" alt="testbutton"></span>) in the Customizer’s toolbar. The form opens in its own window, allowing you to test it prior to building and running.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/designpreview.png" alt="designpreview"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>The preview is useful to test dynamic behaviour of the layout, i.e. how the layout behaves when the designed container is resized.</p> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_specifying_weight_x_and_weight_y_constraints"><a class="anchor" href="#_specifying_weight_x_and_weight_y_constraints"></a>Specifying Weight X and Weight Y Constraints</h3> |
| <div class="paragraph"> |
| <p>Specifying weights has a significant impact on the appearance of the GridBagLayout components. Weights are used to determine how to distribute space among columns (Weight X) and among rows (Weight Y); this is important for specifying resizing behavior. |
| Generally weights are specified with 0.0 and 1.0 as the extremes: the numbers in between are used as necessary. Larger numbers indicate that the component’s row or column should get more space.</p> |
| </div> |
| <div class="paragraph"> |
| <p>If you try to resize the previewed container horizontally, you can see that the layout components remain the same size and stay clumped in the middle of the container. Even the <code>First Name:</code> and <code>Surname:</code> fields that have the Fill constraint set to Horizontal do not grow since the Fill constraint refers to the cell inner area but not the cell’s size. In other words, a component with the Fill attribute set to a value different from <code>none</code> claims that it <strong>"can"</strong> grow, but it does not claim that it <strong>"wants"</strong> to grow. |
| The Weight X and Weight Y layout constraints determine whether a component <strong>"wants"</strong> to grow in horizontal and vertical directions. |
| When two components in a row (or column) have a non-zero value of Weight X (or Weight Y) constraint the values determine how much the individual components grow. For example, if the values are 0.6 and 0.4 then the first component obtains 60% of the available additional space and the second component obtains 40%.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To make the designed container resize correctly in a horizontal direction, do the following:</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Select the text field to the right of the <code>First Name:</code> label in the Grid Area of the GridBag Customizer.</p> |
| </li> |
| <li> |
| <p>Type <code>1.0</code> in the <code>Weight X</code> layout constraint value field and press Enter.</p> |
| </li> |
| <li> |
| <p>Select the text field to the right of the <code>Surname:</code> label in the Grid Area of the GridBag Customizer.</p> |
| </li> |
| <li> |
| <p>Type <code>1.0</code> in the <code>Weight X</code> layout constraint value field and press Enter.</p> |
| </li> |
| <li> |
| <p>Select the text field to the right of the <code>Street</code> label in the Grid Area of the GridBag Customizer.</p> |
| </li> |
| <li> |
| <p>Select <code>Horizontal</code> in the <code>Fill</code> combobox and press Enter.</p> |
| </li> |
| <li> |
| <p>Type <code>1.0</code> in the <code>Weight X</code> layout constraint value field and press Enter.</p> |
| </li> |
| <li> |
| <p>Select the text field to the right of the <code>City</code> label in the Grid Area of the GridBag Customizer.</p> |
| </li> |
| <li> |
| <p>Select <code>Horizontal</code> in the <code>Fill</code> combobox and press Enter.</p> |
| </li> |
| <li> |
| <p>Type <code>1.0</code> in the <code>Weight X</code> layout constraint value field and press Enter.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="paragraph"> |
| <p>To verify that the designed container resizes correctly in horizontal direction, click the Test Layout button (<span class="image"><img src="../../../../_images/kb/docs/java/testbutton.png" alt="testbutton"></span>) in the Customizer’s toolbar and drag the borders of the <code>ContactsBasicInitial</code> form.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/resizedpreview.png" alt="resizedpreview"> |
| </div> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_anchoring"><a class="anchor" href="#_anchoring"></a>Anchoring</h3> |
| <div class="paragraph"> |
| <p>Anchoring is used when the component is smaller than its display area to determine where (within the area) to place the component.</p> |
| </div> |
| <div class="paragraph"> |
| <p>During horizontal resizing of the <code>ContactsBasicInitial</code> form in the previous section you have probably noticed that the <code>State</code> combobox moves away from the <code>State</code> label. Since the preferred size of the combobox is smaller than the size of the corresponding cell, the GridBagLayout places the component into the center of the cell by default.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To change this behaviour, specify the <code>Anchor</code> layout constraint as follows:</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Select the combo-box to the right of the <code>State</code> label and click the arrow button (<span class="image"><img src="../../../../_images/kb/docs/java/arrowbutton.png" alt="arrowbutton"></span>) to the right of the <code>Anchor</code> combobox in the <a href="#01d">Property Sheet</a> of the Customizer.</p> |
| </li> |
| <li> |
| <p>Choose <code>Line Start</code> from the drop-down list.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="paragraph"> |
| <p>The <code>State</code> combo-box is anchored to the left side of the form when the latter is resized horizontally now.</p> |
| </div> |
| <div class="openblock feature"> |
| <div class="content"> |
| <div class="imageblock xref-image left"> |
| <div class="content"> |
| <a class="image" href="../../../../_images/kb/docs/java/comboanchored.png"><img src="../../../../_images/kb/docs/java/comboanchored-small.png" alt="comboanchored small"></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>To get the labels aligned to the left instead of to the center as they are at the moment, complete the steps below:</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Select the <code>First name:</code> , <code>Surname:</code> , <code>Street</code> , <code>City</code> , and <code>State</code> labels.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="admonitionblock note"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-note" title="Note"></i> |
| </td> |
| <td class="content"> |
| You can select multiple components by pressing the left mouse button on the first component, holding it, and dragging it pressed to the last component as if drawing a rectangle that encloses all the labels. After you release the mouse all the five components are highlighted with orange borders and green background as shown below. |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/multiselect.png" alt="multiselect"> |
| </div> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Change the <code>Anchor</code> layout constraint of the labels to <code>Line Start</code> . |
| The labels are anchored to the left.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/linestartanchor.png" alt="linestartanchor"> |
| </div> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_spacing"><a class="anchor" href="#_spacing"></a>Spacing</h3> |
| <div class="paragraph"> |
| <p>By default, each component has no external padding. The <code>Inset</code> constraint specifies the external padding of the component - the minimum amount of space between the component and the edges of its display area.</p> |
| </div> |
| <div class="paragraph"> |
| <p>In the current layout, the components are placed too close to each other. To separate them, do the following:</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Ctrl-click to select all the components.</p> |
| </li> |
| <li> |
| <p>Press the button to the right of the Insets constraint text field.</p> |
| </li> |
| <li> |
| <p>In the displayed dialog box, change <code>Top:</code> and <code>Left:</code> values to <code>5</code> and click OK.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/insets.png" alt="insets"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Your form should look now like the one from the <code>ContactsBasicFinal.java</code> file if you open it.</p> |
| </div> |
| <div class="openblock feature"> |
| <div class="content"> |
| <div class="imageblock xref-image left"> |
| <div class="content"> |
| <a class="image" href="../../../../_images/kb/docs/java/contactsbasicfinal.png"><img src="../../../../_images/kb/docs/java/contactsbasicfinal-small.png" alt="contactsbasicfinal small"></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_summary"><a class="anchor" href="#_summary"></a>Summary</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>In this short tutorial, you designed a simple form. When editing the layout you learned how to use the basic features of the GridBag Customizer. |
| You can now go to the second in a two-part series tutorial where you will modify the <code>ContactsAdvancedInitial</code> form to get familiar with the GridBag Customizer advanced features.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Go to <a href="../gbcustomizer-advanced/" class="xref page">Designing an Advanced Java Form Using the GridBag Customizer</a></p> |
| </div> |
| <div class="paragraph"> |
| <p><a href="#top">top</a></p> |
| </div> |
| <div class="paragraph"> |
| <p><a href="../../../../../../front/main/community/mailing-lists/" class="xref page">Send Us Your Feedback</a></p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_summary_2"><a class="anchor" href="#_summary_2"></a>Summary</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>You have now completed the Designing a Basic Java Form Using the GridBag Customizer tutorial. For information on adding functionality to the GUIs that you create, see:</p> |
| </div> |
| <div class="paragraph"> |
| <p><a href="#top">top</a></p> |
| </div> |
| </div> |
| </div> |
| <section class='tools'> |
| <ul class="menu align-center"> |
| <li><a title="Facebook" href="https://www.facebook.com/NetBeans"><i class="fa fa-md fa-facebook"></i></a></li> |
| <li><a title="Twitter" href="https://twitter.com/netbeans"><i class="fa fa-md fa-twitter"></i></a></li> |
| <li><a title="Github" href="https://github.com/apache/netbeans"><i class="fa fa-md fa-github"></i></a></li> |
| <li><a title="YouTube" href="https://www.youtube.com/user/netbeansvideos"><i class="fa fa-md fa-youtube"></i></a></li> |
| <li><a title="Atom Feed" href="https://netbeans.apache.org/blogs/atom"><i class="fa fa-mf fa-rss"></i></a></li> |
| <li><a title="Slack" href="https://tinyurl.com/netbeans-slack-signup/"><i class="fa fa-md fa-slack"></i></a></li> |
| <li><a title="Issues" href="https://github.com/apache/netbeans/issues"><i class="fa fa-mf fa-bug"></i></a></li> |
| </ul> |
| <ul class="menu align-center"> |
| <li><a href="https://github.com/apache/netbeans-antora-tutorials/edit/main/modules/ROOT/pages/kb/docs/java/gbcustomizer-basic.adoc" title="See this page in github"><i class="fa fa-md fa-edit"></i> See this page in GitHub.</a></li> |
| </ul> |
| </section> |
| </article> |
| </div> |
| <div class='grid-container incubator-area' style='margin-top: 64px'> |
| <div class='grid-x grid-padding-x'> |
| <div class='large-auto cell text-center'> |
| <a href="https://www.apache.org/"> |
| <img style="height: 60px" title="Apache Software Foundation" src="../../../../../../_/images/asf_logo_wide.svg" /> |
| </a> |
| </div> |
| <div class='large-auto cell text-center'> |
| <a href="https://www.apache.org/events/current-event.html"> |
| <img style="width:234px; height: 60px;" title="Apache Software Foundation current event" src="https://www.apache.org/events/current-event-234x60.png"/> |
| </a> |
| </div> |
| </div> |
| </div> |
| <footer> |
| <div class="grid-container"> |
| <div class="grid-x grid-padding-x"> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/about">About</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/community/who">Who's Who</a></li> |
| <li><a href="https://www.apache.org/foundation/thanks.html">Thanks</a></li> |
| <li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li> |
| <li><a href="https://www.apache.org/security/">Security</a></li> |
| </ul> |
| </div> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/community">Community</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/community/mailing-lists">Mailing lists</a></li> |
| <li><a href="../../../../../../front/main/community/committer">Becoming a committer</a></li> |
| <li><a href="../../../../../../front/main/community/events">NetBeans Events</a></li> |
| <li><a href="https://www.apache.org/events/current-event.html">Apache Events</a></li> |
| </ul> |
| </div> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/participate">Participate</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/participate/submit-pr">Submitting Pull Requests</a></li> |
| <li><a href="../../../../../../front/main/participate/report-issue">Reporting Issues</a></li> |
| <li><a href="../../../../../../front/main/participate/#documentation">Improving the documentation</a></li> |
| </ul> |
| </div> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/help">Get Help</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/help/#documentation">Documentation</a></li> |
| <li><a href="../../../../../../wiki/main/wiki">Wiki</a></li> |
| <li><a href="../../../../../../front/main/help/#support">Community Support</a></li> |
| <li><a href="../../../../../../front/main/help/commercial-support">Commercial Support</a></li> |
| </ul> |
| </div> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/download">Download</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/download">Releases</a></li> |
| <li><a href="https://plugins.netbeans.apache.org/">Plugins</a></li> |
| <li><a href="../../../../../../front/main/download/#_daily_builds_and_building_from_source">Building from source</a></li> |
| <li><a href="../../../../../../front/main/download/#_older_releases">Previous releases</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </footer> |
| <div class='footer-disclaimer'> |
| <div class="footer-disclaimer-content"> |
| <p>Copyright © 2017-2025 <a href="https://www.apache.org">The Apache Software Foundation</a>.</p> |
| <p>Licensed under the Apache <a href="https://www.apache.org/licenses/">license</a>, version 2.0</p> |
| <div style='max-width: 40em; margin: 0 auto'> |
| <p>Apache, Apache NetBeans, NetBeans, the Apache feather logo and the Apache NetBeans logo are trademarks of <a href="https://www.apache.org">The Apache Software Foundation</a>.</p> |
| <p>Oracle and Java are registered trademarks of Oracle and/or its affiliates.</p> |
| <p>The Apache NetBeans website conforms to the <a href="https://privacy.apache.org/policies/privacy-policy-public.html">Apache Software Foundation Privacy Policy</a></p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <script src="../../../../../../_/js/vendor/lunr.js"></script> |
| <script src="../../../../../../_/js/search-ui.js" id="search-ui-script" data-site-root-path="../../../../../.." data-snippet-length="100" data-stylesheet="../../../../../../_/css/search.css"></script> |
| <script async src="../../../../../../search-index.js"></script> |
| <script src="../../../../../../_/js/vendor/jquery.min.js"></script> |
| <script src="../../../../../../_/js/vendor/what-input.min.js"></script> |
| <script src="../../../../../../_/js/vendor/foundation.min.js"></script> |
| <script src="../../../../../../_/js/vendor/jquery.colorbox-min.js"></script> |
| <script src="../../../../../../_/js/netbeans.js"></script> |
| <script> |
| $(function(){ $(document).foundation(); }); |
| </script> |
| <script src="../../../../../../_/js/vendor/highlight.min.js"></script> |
| <script> |
| document.addEventListener('DOMContentLoaded', (event) => { |
| document.querySelectorAll('pre code').forEach((el) => { |
| hljs.highlightElement(el); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
