designgridlayout
Project home

DesignGridLayout is a LayoutManager inspired by the use of canonical grids for user interface design. Its goal is to be useful for typical form-based designs. DesignGridLayout is an alternative to other grid-based layout managers (FormsLayout, GridLayout, GridBagLayout, HIGLayout, PnutsLayout, RiverLayout, SGLayout, and TableLayout). DesignGridLayout works with JDK 1.5 and later.

The idea of user interfaces based on canonical grids is described in the book Designing Visual Interfaces: Communication Oriented Techniques by Kevin Mullet and Darrell Sano. Available online, Patrizia Nanni's thesis Human-Computer Interaction: Principles of Interface Design has a nice chapter called Module and Program: Grid-based Design, which also references Mullet and Sano's work.

DesignGridLayout's primary innovation is a well behaved simple layout algorithm exposed as a convenient API. No need to specify constraints. Just add rows from top to bottom and components from left to right. Sizing, resizing, aligning component baselines, margins, and gutters are all handled automatically.

Praise

Very impressive, and you nailed it!
-- Darrell Sano, March 21st, 2006

Quick Start

Try it now using webstart: DesignGridLayout Examples

Try it offline: Download both designgridlayout-0.1.jar and swing-layout-1.0.jar. Add them to your classpath. Launch the examples with java zappini.designgridlayout.Examples.

Keep reading for explanations and screenshots.

Canonical Grid

Canonical grids are visual tools used by graphic artists to design magazines, posters, advertisements, forms, and so forth. As an artist friend told me, the use of grids is "graphic design 101, taught on the first day".

Here are the steps to create a simple 4 column canonical grid. First, divide the rectangle horizontally into halves (1/2). The light gray represents the gaps (for gutters and margins) between columns.

Then add divisions for thirds (1/3).

Lastly, add divisions for fourths (1/4).

Voila! The black lines represent the 4 column canonical grid.

For each row, the row is divided by the number of components you add. Adding two components divides the grid in half. Adding three components divides the grid in thirds.

So here's an example.

See how everything lines up nicely? There's two interesting cases to note.

• Row 3 has just two components, but the row is divided in thirds. That's because the first component spans 2 columns, so the total number of components is considered to be 3.
• Row 4 has no component in the fourth column. Rows having empty columns is common for forms.

Simple Examples

First, we'll build a simple form based on the 4 column canonical grid shown above. Example 1a shows how to use the DesignGridLayout layout manager, add rows to the grid, and add components to rows.

package zappini.designgridlayout;
import javax.swing.*;
public class Example1a 
{
  public static void main( String[] args ) 
  {
    JFrame frame = new JFrame( "Example 1a" );
    frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
    JPanel top = new JPanel();		
    DesignGridLayout layout = new DesignGridLayout( top );
    top.setLayout( layout );
    // You can add components one line at a time
    Row row = layout.row();
    row.add( button() );
    row.add( button() );
		
    // Or using method chaining
    layout.row().add( button() ).add( button() );
		
    // Or, even better, using variable arguments
    layout.row().add( button(), button() );
		
    frame.add( top );
    frame.pack();
    frame.setVisible( true );
  }
	
  public static JButton button()
  {
    return new JButton( "Button" );
  }
}
		

(Example 1a source)

Example 1b reflects the design from the prior section.

    ...
     
    layout.row().add( button(), button() );
    layout.row().add( button(), button(), button() );
    layout.row().add( button(), 2 ).add( button() );
    layout.row().add( button(), button(), button(), Row.EMPTY );
    
    ...

(Example 1b source)

Some cool things to note:

• You do not specify the number of rows and columns for the canonical grid. Nor do you specify each component's location. DesignGridLayout is order dependent. Just add rows to the grid and components to rows, in order. DesignGridLayout determines the columns and their widths automatically.
• Row 3's first component spans 2 columns. As shown, use the method add( JComponent child, int span ) when you need to specify a span greater than 1.
• Row 4's has no fourth component. As shown, use the constant Row.EMPTY for each empty column you need.

Most forms have labels for each row. So let's add some for Example 1c.

    ...
    		
		layout.row().label( "Row 1" ).add( button(), button() );
		layout.row().label( "Row 2" ).add( button(), button(), button() );
		layout.row().label( "Row 3" ).add( button(), 2 ).add( button() );
		layout.row().label( "Row 4" ).add( button(), button(), button(), Row.EMPTY );
		
    ...

(Example 1c source)

Another common exception to the canonical grid are the "Cancel" and "OK" buttons found in dialog boxes. DesignGridLayout allows you to specify grid, left, right, or center alignment per row. We'll also add a blank row with some additional height, to add space before the "Cancel" and "OK" buttons.

    ...
    		
    layout.row().height( 20 );
    layout.row().right().add( new JButton( "Cancel" ), new JButton( "OK" ));
		
    ...

(Example 1d source)

Interesting Examples

John O'Conner started the Layout Manager Showdown, pitting everyone's favorite layout manager against all challengers in no-holds-barred cage fight. Here's my entry:

(AddressBookDemo source)

While creating DesignGridLayout, I used figures 177, 178, and 179 from Designing Visual Interfaces to help validate and work through my ideas. I found scans of the original figures in this online syllabus (scroll down to the bottom). Here are the screenshots from my recreations using DesignGridLayout.

(Figure 177 source)

(Figure 178 source)

(Figure 179 source)

Acknowledgements

DesignGridLayout relies on the component baseline functionality from the Swing Layout project. The baseline work is non-trivial and an important contribution to user interface development. I'm grateful for the efforts of Scott Violet and all other contributors.

Karsten Lentzsch, of JGoodies fame, has probably been the most influential contributor towards making professional, high quality user interfaces in Swing. He was definitely one of the first. His efforts have been a source of inspiration.

 java.net RSS

Powered by CollabNet

Feedback | FAQ | Press | Developer tools Terms of Use | Privacy | Trademarks | Site Map © 1995 - 2007 CollabNet. CollabNet is a registered trademark of CollabNet, Inc.