This tutorial is the second in a two-part series that demonstrates how to design an advanced Java form using the advanced 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.
Each document in this series covers specific set of features.
The first tutorial in the series demonstrated how to modify a simple Java form using the basic features of the NetBeans IDE GridBag Customizer. In this tutorial you will learn how to use the GridBag Customizer advanced features to change the existing form layout.
To follow this tutorial, you need the following software and resources.
|Software or Resource||Version Required|
|NetBeans IDE||7.1 or later|
|Java Development Kit (JDK)||Version 6 or 7|
|gbcustomizer-advanced-tutorial.zip||An archive with the demo project containing the initial and target tutorial layouts.|
Before starting to lay out the components with the help of the GridBag Customizer, download the gbcustomizer-advanced-tutorial.zip, extract the GridBagCustomizerAdvancedTutorial project on your hard drive and open it in the NetBeans IDE.
Note: The GridBagCustomizerAdvancedTutorial project uses the junit and junit 4 class libraries, which are located in the Update Center. You need to click Resolve Problems in the Open project dialog box, then click Resolve in the Resolve Reference Problems dialog box and install the JUnit plugin following the instructions in the NetBeans IDE Installer. When the installation is completed, click Finish to close the NetBeans IDE Installer dialog box, then click close to close the Resolve Reference Problems dialog box.
To display the GridBag Customizer, complete the following steps:
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 (this enables the Customize Layout menu item) and complete the procedure.
In this section you will use the advanced features of the GridBag Customizer to reorganize the ContactsAdvancedInitial form components in accordance with the target layout shown below.
Note: To view the target layout in your NetBeans IDE, in the Projects tab, expand Source Packages > tutorial and double-click ContactsAdvancedFinal.java.
The ContactsAdvancedFinal form with the target layout opens in the GUI Builder Design view.
The Phone section of the existing form features three phone entries. To enhance it and add an additional label and text field (e.g., Skype username between Cell Phone: and Home Phone:), make a new row there as follows:
A new row is added as in the following figure.
To add a new label and text field to the newly added row, complete the following steps:
Highlighted JLabel1 displays in the first cell.
After the components are added, their gridbag constraints must be specified to align them with other components.
With the JTextField1 component selected in the Grid Area, do the following in the Property Sheet:
In the Grid Area, select the JLabel1 component and specify its Anchor constraint by scrolling down and selecting Baseline Leading in the Property Sheet.
Select both the JLabel1 and JTextField1 components in the Grid Area, click the browse button () to the right of the Insets text field. The Insets dialog box displays. Enter 5 in the Top: text field, and click OK.
The form should look like shown below.
Note: The GridBag Customizer helps you to add, remove, and change the position of components in the layout. To change properties of the components in the layout like background or text, use the GUI Builder Design window.
To set the display text for the JLabel1, do as follows:
To remove the JTextField1 component's text, complete the following steps:
The GridBag Customizer can save you time and effort by quickly repositioning the form components as desired.
To change the layout of the Phone section and position of four existing text fields from one column to two columns with two text fields, complete the following steps:
The GridBag Customizer can resize several components together thus making room for the second column of text fields.
Note: Before dragging make sure the cursor is not changed into a two-way arrow, otherwise you will resize the selection instead.
After you move the components, the form should look like shown below.
To discard the redundant rows 10 and 11, right-click the row headers and choose Delete Row from the context menu.
The Phone section became more compact.
To fix spacing of the second column here, do as follows:
The grid based layout sometimes introduces unnecessary dependencies that need to be resolved by means of subcontainers.
If you click the Test Layout button in the toolbar ( ) and test horizontal resizeability of the current layout, you will notice that unwanted space is created around the Browse, OK, and Cancel buttons.
This happens because the fourth column comprises both text fields and buttons (the components that should grow and the components that should not grow respectively). You need to modify the layout so that the additional space around the Browse buttons is consumed by the Street and City: text fields. The current layout ensures that the right edge of the Street: and City: text fields is on the same vertical position as the left edge of the Home Phone: text field. To make these positions independent, complete the following steps:
After the components are enclosed into a subcontainer, the boundary between the Home Phone: label and text field no longer affects the boundary between the Street text field and button.
Note: The Enclose in Container action creates a new subcontainer in the cells occupied by the selected components. It moves the selected components into a newly introduced container but it preserves their relative positions and other layout constraints.
Repeat the two steps listed above for the City: text field and the Browse button to the right of it, to enclose them into a subcontainer like shown below.
Now you want to fix the unwanted space around the OK and Cancel buttons as follows:
Note: None of the components in the subcontainer is resizable. Therefore, they are placed next to each other in the center of the container, which is the default anchoring.
To change the anchoring of the whole subcontainer, complete the following steps:
The layout looks fine but the subcontainer with the OK and Cancel buttons occupies only the last two cells in the last row.
In case the OK and Cancel buttons become wider (for example, during the translation into a different language), they will push the right edges of the Work Phone: and Cell Phone: text fields.
To avoid this potential issue and let the subcontainer occupy all cells in the bottom row, select the subcontainer and drag its left border to the beginning of the row.
The subcontainer occupies all cells in the bottom row.
To add a component to a subcontainer (for example, a Help button to the existing OK and Cancel buttons), you need to switch from the main container to the subcontainer before editing the latter's layout.
Complete the steps listed below to add a button to an existing subcontainer:
Note: The context menu does not display if you right-click the buttons.
The layout design is completed.
A final change that is not related to layout of the container is left.
To rename the button, complete the following steps:
In this tutorial, you modified an existing form by adding new components, inserting rows, etc. When designing the layout you learned how to use the advanced features of the GridBag Customizer to reorganize the layout of the form.
Go to Designing a Basic Java Form Using the GridBag Customizer
You have now completed the Designing an Advanced Java Form Using the GridBag Customizer tutorial. For information on adding functionality to the GUIs that you create, see: