As an exercise, I laid out the Group Tracker Group Detail panels using JGoodies' FormLayout. The original Group Tracker screens were designed in Visual Basic and converted to Java as part of the build process, so all the components have a fixed size and position. This means it is very susceptible to user settings. For instance, if a user has their fonts set to 125% under Windows, all the labels will get clipped by their bounding box and be completely unreadable. So the next step is to migrate it to a UI technology such as Swing that can dynamically size the components based on the user's font settings.

Here's my first complete view, using TitledBorders just like in Group Tracker.

View full image.

Karsten (of JGoodies) prefers separators over boxes, because it requires fewer lines and therefore results in a cleaner UI design.

For reference, here's the original, in Internet Explorer HTA mode:

View full image.

And here's my final Swing mockup (with separators instead of boxes):

View full image.

The code is not nearly so complex as I thought it would be. Here's a sample:

super.setLayout (new BorderLayout ());
JPanel top = new JPanel (new BorderLayout (5, 0));

//
// General
//
JPanel gp = new JPanel(new BorderLayout ());
gp.add (DefaultComponentFactory.getInstance().createSeparator("General"),
		BorderLayout.NORTH);

FormLayout layout =
		new FormLayout ("l:p, 3dlu, f:p, 5dlu, l:p, 3dlu, f:p");
DefaultFormBuilder builder = new DefaultFormBuilder (layout);
builder.append ("Contract Date:", createDateField ());
builder.append ("Contract in AR:", createDateField ());
builder.append ("Attendees:", new JTextField ("272"));
builder.append ("Estimated Charges:", new JTextField ("633,975.00"));
JCheckBox jCheckBox = new JCheckBox ();
builder.append ("Limited Credit Group:", jCheckBox);
builder.append ("Contract Deposits:", new JTextField ("0.00"));
builder.append ("Credit App Sent:", createDateField ());
builder.append ("Credit Approval Date:", createDateField ());
builder.append ("Method of Payment:", new JComboBox (
                new Object[]{"City Ledger", "Credit Card", "Credit Pending",
                             "Prepay", "Unspecified"}));
builder.append ("Account Number:", new JTextField ());
builder.append ("Attrition Date:", createDateField ());
builder.append ("Cutoff Date:", createDateField ());
JPanel generalPanel = builder.getPanel ();
addTitleAndGap (generalPanel, "General");
gp.add (generalPanel);
top.add (gp, BorderLayout.WEST);

//
// Representatives
//
JPanel rp = new JPanel(new BorderLayout ());
rp.add (DefaultComponentFactory.getInstance()
         .createSeparator("Representatives"),
		BorderLayout.NORTH);
rp.add (new JSeparator (JSeparator.VERTICAL), BorderLayout.WEST);

layout =
		new FormLayout ("l:p, 3dlu, f:p");
builder = new DefaultFormBuilder (layout);
builder.append ("Sales:", createRep ());
builder.append ("Catering:", createRep ());
builder.append ("Credit:", createRep ());
builder.append ("Reservations:", createRep ());
builder.append ("Hotel Manager:", createRep ());
builder.append ("Front Desk:", createRep ());
builder.append ("A/R:", createRep ());
JPanel repPanel = builder.getPanel ();
addTitleAndGap (repPanel, "Representatives");
rp.add (repPanel, BorderLayout.CENTER);
top.add (rp, BorderLayout.CENTER);

this.add (top, BorderLayout.NORTH);

//
// Contacts
//
JPanel bottom = new JPanel (new BorderLayout (5, 0));
JPanel contacts1 = createContacts ("Primary:");
JPanel contacts2 = createContacts ("Planner:");
bottom.add (contacts1, BorderLayout.WEST);
bottom.add (contacts2, BorderLayout.CENTER);
bottom.add (DefaultComponentFactory.getInstance ()
             .createSeparator ("Contacts"),
			BorderLayout.NORTH);
addTitleAndGap (bottom, "Contacts");
this.add (bottom);

It becomes apparent quickly that you have to use builders to create all your components and panels consistently.

I briefly experimented with background colors, and that was a bit of a chore because panels by default are opaque. The tabstrip never would change its color, I haven't found the trick yet I suppose. In the HTA version the different background colors create a nice contrast that quickly indicates the separation.

The FormLayout is wonderful, but I haven't quite got the knack of using it for the entire panel. Instead I ended up using many nested BorderLayouts. This is adequate.

For single panels however it cannot be bettered. A single command makes the entire column equal sized. Look at the difference in the widget column in the "General" sub-panel, the combobox in the first screen shot sticks out a little to the right, in the last screenshot everything is consistent. Much more aesthetic.

And of course everything adjusts automatically to the font size.

Total time: about 3-1/2 hours.