In previous articles, we have summarized the new features of version 7 of the NetBeans IDE, gone through the download and installation process and shown how the IDE supports the small changes introduced into Java 7 by Project Coin. In this article we focus on another new feature of NetBeans 7: a new improved visual editor for GridBagLayout.
When we develop graphical user interfaces using an API such as AWT or Swing, the visual components (form fields, buttons, etc.) that we draw inside the windows, panels and other containers are managed by objects called “Layout Managers”. Since this is not the main focus of the article, we will not provide further explanation. To find out more about layout managers, see the Visual Guide to Layout Managers on Links.
An example of layout managers is the GridBagLayout. It organizes the container as a matrix of rows and columns, and allows the developer to place a visual component to each cell and to indicate the number of rows and columns the component should use. Performing this activity can be tedious and error prone if done manually. However, NetBeans 7.0, can help you during this work, by offering a new visual editor, that eases the construction of graphical user interfaces that employ GridBagLayout.
In order to try this new editor, go to menu File > New File… and select the option JFrame Form in the category Swing GUI Forms. Following the wizard for new file creation, the visual editor will be open, and will display an empty panel. If you right-click in the middle of this panel you can choose the option Set Layout > Grid Bag Layout. Now you can use the Palette on the upper right corner of the IDE to add some graphical components. For example, try adding some form fields with the purpose of registering an employee, as you can see in Figure 1.
Figure 1. NetBeans visual editor after inserting visual components into a container with GridBagLayout.
The components are placed in this way because initially, the layout is composed by only one cell (1 row, 1 column) and NetBeans place the components on the same line, creating new columns for each new item. In order to reorganize them, you have to right-click on the container and choose Customize Layout… to open the new visual editor, which you can see in Figure 2.
Figure 2. Graphical User Interface Editor, using GridBagLayout.
In order to fix the layout presented in the previous example, we will use the facilities provided by the visual editor:
1. Right-click on number 0 on the left of the first row and select Insert Row After. Repeat this operation until you have a grid of four rows;
2. Drag and drop the components in a way that each one is placed in a different row. Keep the label on the first column and the field on the second. In the last row, place the buttons OK and Cancel, respectively in the columns indexed 1 and 2;
3. Right-click on the numbers of the columns 3 to 7 and choose Delete Column, in order to remove those columns that will not be used.
4. Select the text field related to “Name” and click on the button (Horizontal Fill). In this way, the field will fill up the entire cell. After that, you can do the same with the other text fields;
5. For the text fields related to “Name” and “Department”, select the component and, in the list of properties in the left side, change the Grid Width to 2. This will make the component span two columns;
6. For each label and also for the button OK, select them and click on the Arrow pointing to the Right in the section Anchor, in order to align right the component inside the cell;
7. Pressing Ctrl, click on each one of the components, to select them. Then, in the panel properties, change the value of the property Insets to [2, 5, 2, 5] to change the spacing between the components (the numbers refer to how many pixels the components will have on top, right, down and left, respectively);
8. Finally, use the button (test Layout) to see how your form is looking. The result of the steps above are shown in Figure 3.
Figure 3. Test Layout in the new visual editor of NetBeans.
At this moment, the fields are in their default size and for this reason, the field Extension is very small. Going back to the traditional visual editor of NetBeans, select the components and change the property preferredSize to complete the layout.
In the example of this section, we first added the components in the traditional visual editor and, then, we organized them using the new editor. However, it is also possible to open the new editor directly and add the components on the cells by right-clicking on them and using the menu Add Component.
As you can see, the new visual editor for containers that use GridBagLayout helps a lot when you need to define and configure the details of your design in grid.
Visual Guide for Swing Layout Managers.