Skip to main content
This revision made February 26, 2011 16:27, by Jean-François Poilpret

Designgridlayout: an easy and powerful Swing LayoutManager

DesignGridLayout is a revolutionary and innovative Swing 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, TableLayout and MiGLayout). DesignGridLayout works with JDK 1.6 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.

What makes DesignGridLayout revolutionary and innovative?

DesignGridLayout's primary innovation is a well behaved simple layout algorithm exposed as a convenient API. Just add rows from top to bottom and components from left to right.

But more than that, DesignGridLayout is smart:

  • it manages all margins, gaps, alignments (baseline and vertical) automagically for you, while respecting UI guidelines for the current platform (as defined by the Look and Feel)
  • it makes sure your UI is always visually pleasing (that's the power of canonical grids)
  • it knows how to count: you never need to specify upfront how many columns or rows you have in your UI, DesignGridLayout will automatically count that for you! This way, you generally don't need to mock up your UI on paper first and try to draw virtual grid lines like most grid-oriented LayoutManagers impose
  • it does not require you to specify which rows should be able to vertically grow during user resize and which rows should have fixed height: DesignGridLayout automatically detect both types of rows!
  • DesignGridLayout will also make sure that the height of special components -such as a JList- is always appropriate for the content, i.e. allows to display all rows in their full height (not truncated like all other LayoutManagers)
  • thanks to its fluent API, DesignGridLayout makes it a breeze to define your UI forms; it also makes the learning curve very short: you can be fully effective in less than one hour!

Praise

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

Quick Start

Try it now using WebStart:

TODO WEBSTART IMAGE + JNLP LINK

Try it offline: Download designgridlayout-1.7.jar, and designgridlayout-1.7-tests.jar. Add them to your classpath. Launch the examples with 'java net.java.dev.designgridlayout.showdown.Examples'.

The DesignGridLayout Examples application is the best way to get started with DesignGridLayout: it guides you step by step through every DesignGridLayout feature and always shows the relevant source code to produce each demonstrated layout.

Although the Examples application is a good quick start to DesignGridLayout, it is advised to read the following additional documentation, found on the project web site (particularly the 2 first links below):

  • Introduction is a quick introduction to DesignGridLayout in terms of motivation, philosophy, features and roadmap
  • Canonical Grids is a quick introduction to canonical grids used by DesignGridLayout
  • Usage demonstrates DesignGridLayout API usage through simple examples
  • Examples shows more concrete, real life examples where DesignGridLayout is used, along with the source code
  • Javadoc is the reference documentation of DesignGridLayout API

With the Examples application and the documentation above, you can start using DesignGridLayout on your own and create professional Swing UI dialogs only one hour after starting, and this with only a few lines of code!

You may also want to check the author's blog which contains several DesignGridLayout-related posts (technical details, announces, how to...)

Acknowledgements

DesignGridLayout authors are grateful for the efforts of Scott Violet and all other contributors regarding the component baseline functionality added to Java 6. The baseline work is non-trivial and an important contribution to user interface development.

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.

Difference compared to previous revision
<span>= Designgridlayout: an easy and powerful Swing LayoutManager= DesignGridLayout is a revolutionary and innovative Swing 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, TableLayout and MiGLayout). DesignGridLayout works with JDK 1.6 and later. The idea of user interfaces based on canonical grids is described in the book [http://www.amazon.com/gp/product/0133033899 Designing Visual Interfaces: Communication Oriented Techniques] by Kevin Mullet and Darrell Sano. Available online, Patrizia Nanni's thesis [http://www.vhml.org/theses/nannip/HCI_final.htm Human-Computer Interaction: Principles of Interface Design] has a nice chapter called [http://www.vhml.org/theses/nannip/HCI_final.htm#_Toc87596295 Module and Program: Grid-based Design], which also references Mullet and Sano's work. <span style="text-decoration:underline;color:green">== What makes DesignGridLayout revolutionary and innovative? == DesignGridLayout's primary innovation is a well behaved simple layout algorithm exposed as a convenient API. Just add rows from top to bottom and components from left to right. But more than that, DesignGridLayout is smart: * it manages all margins, gaps, alignments (baseline and vertical) automagically for you, while respecting UI guidelines for the current platform (as defined by the Look and Feel) * it makes sure your UI is always visually pleasing (that's the power of canonical grids) * it knows how to count: you never need to specify upfront how many columns or rows you have in your UI, DesignGridLayout will automatically count that for you! This way, you generally don't need to mock up your UI on paper first and try to draw virtual grid lines like most grid-oriented LayoutManagers impose * it does not require you to specify which rows should be able to vertically grow during user resize and which rows should have fixed height: DesignGridLayout automatically detect both types of rows! * DesignGridLayout will also make sure that the height of special components -such as a JList- is always appropriate for the content, i.e. allows to display all rows in their full height (not truncated like all other LayoutManagers) * thanks to its fluent API, DesignGridLayout makes it a breeze to define your UI forms; it also makes the learning curve very short: you can be fully effective in less than one hour! == Praise == :Very impressive, and you nailed it! :-- Darrell Sano, March 21st, 2006 == Quick Start == Try it now using WebStart: TODO WEBSTART IMAGE + JNLP LINK Try it offline: Download [http://java.net/projects/designgridlayout/downloads/download/designgridlayout-1.7.jar designgridlayout-1.7.jar], and [http://java.net/projects/designgridlayout/downloads/download/designgridlayout-1.7-tests.jar designgridlayout-1.7-tests.jar]. Add them to your classpath. Launch the examples with ''''java net.java.dev.designgridlayout.showdown.Examples''''. The DesignGridLayout Examples application is the best way to get started with DesignGridLayout: it guides you step by step through every DesignGridLayout feature and always shows the relevant source code to produce each demonstrated layout. Although the Examples application is a good quick start to DesignGridLayout, it is advised to read the following additional documentation, found on the project web site (particularly the 2 first links below): * Introduction is a quick introduction to DesignGridLayout in terms of motivation, philosophy, features and roadmap * Canonical Grids is a quick introduction to canonical grids used by DesignGridLayout * Usage demonstrates DesignGridLayout API usage through simple examples * Examples shows more concrete, real life examples where DesignGridLayout is used, along with the source code * Javadoc is the reference documentation of DesignGridLayout API With the Examples application and the documentation above, you can start using DesignGridLayout on your own and create professional Swing UI dialogs only one hour after starting, and this with only a few lines of code! You may also want to check the [http://jfpoilpret.blogspot.com/ author's blog] which contains several DesignGridLayout-related posts (technical details, announces, how to...) == Acknowledgements == DesignGridLayout authors are grateful for the efforts of [http://weblogs.java.net/blog/zixle/ Scott Violet] and all other contributors regarding the component baseline functionality added to Java 6. The baseline work is non-trivial and an important contribution to user interface development. Karsten Lentzsch, of [http://www.jgoodies.com/ 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. </span><span>
 
 
Close
loading
Please Confirm
Close