Gap Editing Support in the NetBeans GUI Builder
Jan Stola, Alyona Stashkova
A layout of a container in the Free Design mode consists of components and gaps between these components. Both the components and gaps are visualized in the Design view of the GUI Builder. The NetBeans IDE enables you to edit gaps directly in the GUI Builder.
This tutorial demonstrates how to utilize gap editing to insert new UI components between other components as well as how to center components easily around a frame in the NetBeans GUI Builder without concern for the underlying layout manager. The tutorial is intended as a guide to show how you can perform changes in an existing form in the Free Design mode to implement a specific target layout that is required by the project.
To follow this tutorial, you need the software and resources listed below.
Opening Example Project
Resizing a Gap by Dragging and Dropping Its Edge
Let us explore how to edit a gap by dragging and dropping its edge in the Design view of the IDE.
To add a Middle Name row between the First Name and Last Name rows, you need to complete the following steps:
The Middle Name row is inserted between the form components.
Resizing a Gap Using the Mouse Wheel
The IDE enables you to resize a gap by clicking and then scrolling a mouse wheel to tune the gap size.
To remove the remaining space between the Middle Name and Last Name rows, click the gap below and decrease the height of the gap by scrolling the mouse wheel downward and setting the new size to default small.
Note: The NetBeans GUI Builder supports three preferred gaps for component placement - default small, default medium, and default large.
The gap between the form components is resized by using the mouse wheel and utilizing a preferred gap.
Editing Gaps Around a Component
You can center a component by enclosing it into two identical gaps that have prior been marked as resizable.
Note: A container helps specify where the components should be centered. It is possible to center the buttons without enclosing them in a new panel but it is more difficult to accomplish in the GUI Builder and the resulting layout is a bit fragile. Therefore, we suggest to enclose the component being centered in a panel whenever it is possible.
To enclose the buttons and resizable gaps into a separate container, do as follows:
To remove the newly created gaps on the left and right side of the buttons, complete the following steps:
To make the gaps above and below the container resizable, do as follows:
To center the buttons of the sample form:
Drag the bottom edge of the container with the buttons to align with the bottom edges of the lists as shown below:
The container is stretched to match the height of the Available Topics and Selected Topics lists. The buttons are centered within the space determined by the enclosing container since the surrounding gaps have been marked as resizable.
In this tutorial you enhanced a simple form. When manipulating gaps you learned how to manage empty spaces in the Free Design mode and design an appealing UI without spending extra time on tweaking every detail of the layout implementation.
You have now completed the Gap Editing Support in the NetBeans GUI Builder tutorial. For information on adding functionality to the GUIs that you create, see: