Organizing Widgets with Panels

While a two-dimensional grid serves well for laying out widgets in most application windows, there are occasions where the widgets just donŐt line up properly.  For example, consider the dialog window for the employee management system (DialogDemo.java). Each of the four rows has six columns, but only the third row has six widgets. The two widgets in each of the first two rows align nicely in the six columns, but the five integer fields in row three have different widths, and the two buttons in row four are not centered.

 

 

You can mitigate this ragged appearance by organizing some of the widgets in panels. In the new version of the employee dialog shown below, there are just two columns in the window. The second column of the third row contains a panel, into which are added the five integer fields. The fourth row contains a panel stretched across its two columns. The two buttons are then placed in this panel, which is colored black to highlight its significance. This version exhibits no distracting alignment issues.

 

 

Like a window, a panel has its own grid of rows and columns. To add a panel for organizing widgets, you call the method addPanel without a panel argument (addPanel(row, column, width, height)). This method returns the new panel, as before. You then add widgets to the panel in the same manner as you add them to a window, remembering that the panel has its own grid that is separate from the grid of the enclosing window. You can also set the background color of the panel, as you do with graphics applications.

Here is the code for the revised EmployeeDialog class, with the two nested panels:

import javax.swing.*;

import BreezySwing.*;

import java.awt.Color;

 

public class EmployeeDialog extends GBDialog{

 

    // Lay out the GUI

 

    JLabel nameLbl = addLabel("Name",          1,1,1,1);

    JTextField nameFld = addTextField("",      1,2,1,1);

    JLabel payRateLbl = addLabel("Pay Rate",   2,1,1,1);

    DoubleField payRateFld = addDoubleField(0, 2,2,1,1);

    JLabel daysLbl = addLabel("Daily hours",   3,1,1,1);

 

    // Five fields now in a single panel in one column of the window

    GBPanel hoursPanel = addPanel(             3,2,1,1);

    IntegerField day1Fld = hoursPanel.addIntegerField(0, 1,1,1,1);

    IntegerField day2Fld = hoursPanel.addIntegerField(0, 1,2,1,1);

    IntegerField day3Fld = hoursPanel.addIntegerField(0, 1,3,1,1);

    IntegerField day4Fld = hoursPanel.addIntegerField(0, 1,4,1,1);

    IntegerField day5Fld = hoursPanel.addIntegerField(0, 1,5,1,1);

 

    // Two buttons now in a single panel in two columns of the window

    GBPanel buttonPanel = addPanel(            4,1,2,1);

    JButton okBtn = buttonPanel.addButton("OK",         1,1,1,1);

    JButton cancelBtn = buttonPanel.addButton("Cancel", 1,2,1,1);

 

    // The dialog is passed an employee object and must refer to it

    // at several locations thereafter.

 

    private Employee emp;

 

    public EmployeeDialog(JFrame parent, Employee emp){

        // The next few lines are part of every dialog

        super(parent);                                 // ** REQUIRED **

        setTitle("Edit Employee");

        setDlgCloseIndicator("Cancel");                // Default is "Cancel"

        setSize(300, 200);                             // Default is (300,300)

 

        this.emp = emp;

        nameFld.setText(emp.getName());

        payRateFld.setNumber(emp.getPayRate());

        day1Fld.setNumber(emp.getHours(1));

        day2Fld.setNumber(emp.getHours(2));

        day3Fld.setNumber(emp.getHours(3));

        day4Fld.setNumber(emp.getHours(4));

        day5Fld.setNumber(emp.getHours(5));

        buttonPanel.setBackground(Color.black);       // Highlight background of button panel  

    }

 

    public void buttonClicked(JButton buttonObj){

        // The choice of buttons is entirely up to the programmer

        // HOWEVER, pull down menus are NOT available.

        if (buttonObj == okBtn){

            emp.setName(nameFld.getText());

            emp.setPayRate(payRateFld.getNumber());

            emp.setHours(1, day1Fld.getNumber());

            emp.setHours(2, day2Fld.getNumber());

            emp.setHours(3, day3Fld.getNumber());

            emp.setHours(4, day4Fld.getNumber());

            emp.setHours(5, day5Fld.getNumber());

            setDlgCloseIndicator("OK");

        }

        dispose();

    }

}

 

The programmer can add any widget to a panel that can be added to an application window, with the exception of drop-down menus. However, when you add a custom panel for graphics, using the method addPanel(panel, row, column, width, height), you should not add buttons or list boxes to this panel, because their event handlers are not supported The next table summarizes these differences:

Method

What it does

GBPanel addPanel(row, column, width, height)

Adds a panel to the caller's grid and returns the panel. Can be used to organize widgets.

GBPanel addPanel(panel, row, column, width, height)

Adds panel to the caller's grid and returns this panel. Should be used only for graphics applications.

 

Enjoy writing your GUI programs with BreezySwing!

 

Back to tutorial