Most efficient way to display multiple components on n columns

Question

I am creating a GWT app. In all my screens, one need is recurrent : adding a lot of components to a screen and have automatically them organized in 2 or 3 columns. I want to create a template for this but before, I wonder if there is already something defined for this need.

Ideally, that is what I would like to do:

MyLayout myLayout = new MyLayout(nbColumns);
myLayout.add(widget1);
myLayout.add(widget2);
myLayout.add(widget3);
myLayout.add(widget4);
myLayout.add(widget5);
...

and have the components automatically organizes in nbColumns columns.

Any solution in GWT or GXT 3 would be appreciated. I would also appreciate if this solution was usable with uiBinder.

Answer 1

Use TableLayout

Usage example:

public class TableForm extends ContentPanel{
      setLayout(new TableLayout(2)); // number of columns in the table
      Button button1 = new Button(); // any widget, button is just example
      Button button2 = new Button(); 
      add(button1,new TableData("100%","100%")); // width and height
      add(button2,new TableData("100%","100%")); 
}

Number in TableLayout's constructor is number of columns - layout automatically organizes your widgets in specified number of columns. You have to only perform add() operation.

Note, that usually it's better not to set height. In such case, widget's height will be default. Otherwise, it will be stretched to the specified percents.

One more advice - use setBorder(int width) (width>0) method of TableLayout to see how exactly TableLayout organized your components. Also, TableData objects has rowspan and colspan properties - you may find it useful.