Designing a Basic Java Form Using the GridBag Customizer
Written by Jan Stola, Tomas Pavek, and Alyona Stashkova
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.
Each document in this series covers specific set of features.
To follow this tutorial, you need the software and resources listed below.
Opening Example Project
GridBag Customizer Overview
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.
To display the GridBag Customizer, complete the steps below:
Note: 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 Set Layout > Grid Bag Layout from the context menu (this enables the Customize Layout menu item.). Then complete the procedure.
The Grid area is on the right side of the Customize Layout dialog box. It shows the grid layout of the components.
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.
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 Anchor, Insets, etc.
The Property Sheet is located below the Property Customizer. It displays the layout constraints of the selected components.
Laying Out Components
The components for the ContactsBasicInitial form are added and laid out in a single row. The GridBagLayout lays out the components like this when no layout constraints are specified.
You can move components using simple drag and drop as desired. The component is highlighted with green when selected. While dragging a component, its Grid X and Grid Y properties change to reflect its new position. New columns and rows are created automatically when needed.
To create a layout like shown in the picture below, move the components from columns 2 to 11 as follows:
Note: When a component is moved the target cells are highlighted with green.
A component can be resized by dragging small square resize handles that appear around its perimeter when it is selected.
To resize the First Name: and Surname: text fields and make them occupy two adjacent cells, complete the steps below:
Specifying Fill Layout Constraint
Though the First Name: and Surname: 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 Fill layout constraint.
To make the text fields wide enough to fill their display areas horizontally without changing their heights, in the Fill combobox in the Property Sheet area, select Horizontal.
Now that you have successfully completed the ContactsBasicInitial 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 () in the Customizer's toolbar. The form opens in its own window, allowing you to test it prior to building and running.
The preview is useful to test dynamic behaviour of the layout, i.e. how the layout behaves when the designed container is resized.
Specifying Weight X and Weight Y Constraints
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.
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 First Name: and Surname: 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 none claims that it "can" grow,
but it does not claim that it "wants" to grow.
To make the designed container resize correctly in a horizontal direction, do the following:
To verify that the designed container resizes correctly in horizontal direction, click the Test Layout button () in the Customizer's toolbar and drag the borders of the ContactsBasicInitial form.
Anchoring is used when the component is smaller than its display area to determine where (within the area) to place the component.
During horizontal resizing of the ContactsBasicInitial form in the previous section you have probably noticed that the State combobox moves away from the State 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.
To change this behaviour, specify the Anchor layout constraint as follows:
The State combo-box is anchored to the left side of the form when the latter is resized horizontally now.
To get the labels aligned to the left instead of to the center as they are at the moment, complete the steps below:
By default, each component has no external padding. The Inset constraint specifies the external padding of the component - the minimum amount of space between the component and the edges of its display area.
In the current layout, the components are placed too close to each other. To separate them, do the following:
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 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: