DesignGridLayoutExample

Here's a screenshot of DesignGridLayout^? entry to John O'Conner's Layout Manager Showdown.

DesignGridLayout is a novel layout manager which uses canonical grids to make it easy to create visually pleasing ("correct") forms.

You may notice that this entry does not exactly reproduce O'Conner's original.

All labels are right aligned and all the components fit into columns. John O'Conners' original has a mix of left and right aligned labels and the text fields aren't all column aligned.

There's nothing much to be worried about the difference. DesignGridLayout^? entry looks better! Which is kind of the whole point of using canonical grids for visual design. However, judging from the comments posted by the other challengers, opinions differ.

The source code for this entry is here.

For the impatient, here's the snippet which relies on DesignGridLayout's API. Note that populating the form, after the component instances are made, is only 9 lines of code. That's 1 line of code per 1 row in the form. (If you count the gap as a row.)

@Override public void build(DesignGridLayout layout)
{
   JTextField lastNameField = new JTextField("Martian");
   JTextField firstNameField = new JTextField("Marvin");
   JTextField phoneField = new JTextField("805-123-4567");
   JTextField emailField = new JTextField("marvin@wb.com");
   JTextField address1Field = new JTextField("1001001010101 Martian Way");
   JTextField address2Field = new JTextField("Suite 10111011");
   JTextField cityField = new JTextField("Ventura");
   JTextField stateField = new JTextField("CA");
   JTextField postalField = new JTextField("93001");
   JTextField countryField = new JTextField("USA");

   JButton newButton = new JButton("New");
   JButton deleteButton = new JButton("Delete");
   JButton editButton = new JButton("Edit");
   JButton saveButton = new JButton("Save");
   JButton cancelButton = new JButton("Cancel");

   layout.row().grid(label("Last Name")).add(lastNameField).grid(label("First Name")).add(firstNameField);
   layout.row().grid(label("Phone")).add(phoneField).grid(label("Email")).add(emailField);
   layout.row().grid(label("Address 1")).add(address1Field);
   layout.row().grid(label("Address 2")).add(address2Field);
   layout.row().grid(label("City"), 1).add(cityField);
   layout.row().grid(label("State")).add(stateField).grid(label("Postal Code")).add(postalField);
   layout.row().grid(label("Country"), 1).add(countryField);
   layout.emptyRow();
   layout.row().center().add(newButton).add(deleteButton).add(editButton).add(saveButton).add(cancelButton);
}

Note that for this example, DesignGridLayout^? had to be combined with BorderLayout^? (to manage the JList on the left). Only the source code for the DesignGridLayout^? portion is shown here (you can refer to the source code link above to view the whole class if you want).

Answers to John's Questions

Q: Can it align components across other components? For example, can it both left and right align the 'phone' text field with the 'city' text field on the other side of the two address fields?

A: Yes of course, that's the power of canonical grids!

Q: Does your manager know about platform specific gaps and spacing among components. Just curious.

A: Yes! That was one of the big motivators. DesignGridLayout^? relies on Swing Layout (requires Java 5 or above) to get the LAF specific values.

Q: Can the text fields, labels, etc grow and shrink when the text is localized?

A: Sure, all sizes are dynamically calculated based on components preferred sizes.

Q: Just how much code do I have to write? Java code? Declarative XML?

A: UI construction with DesignGridLayout^? is very terse. Only Java code. One line of code per row in the grid. XML is fool's gold.

Q: Can I nest panels?

A: Not sure I understand the question.

Q: Can it align components along a baseline. For example, the new GroupLayout^? can align labels and text fields along the text baseline...that's nice.

A: Yes! That also was one of the motivators for DesignGridLayout^?.

Q: What's the licensing?

A: Apache License 2.0.

Q: Will this work for bi-directional locales? How difficult would it be to mirror the layout for a right-to-left locale?

A: Yes it works out of the box according to the text orientation of the current Locale. Nothing special to do, no API call.

Q: What else should we evaluate?

A: I believe that ease of construction and correctness of results are the most important issues. We spend too much time figuring out how to organize our code and then tweaking (nudging) components to make everything look "just so".

For instance, it took about 10 minutes to write the UI layout code for this example, and it worked well the first time it was run!

DesignGridLayout^? is designed for typical (but possibly complex) forms-based user interfaces. It does that one thing very well. If you need to do something else, write a new layout manager. By doing one thing very well, each layout manager is simple to use and debug.

DesignGridLayout^? also strives to be visually correct when used with all look and feels. Many existing LayoutManagers don't have this capability.

Other interesting features to evaluate (DesignGridLayout^? has them):

• possibility to define components spanning several rows
• smart behavior of vertical resize: eg make sure that a JList, when enlarged, always show complete rows (not height-truncated rows). To my knowledge, DesignGridLayout^? is the only LayoutManager to offer this feature