Adding three or more widgets to a GWT LayoutPanel

Question

I want to display three or more DataGrids in my LayoutPanel and specify their width as a percentage of the total width of the LayoutPanel, but in the LayoutPanel methods i see only methods for setting the width of the left and right widgets. setWidgetLeftWidth() and setWidgetRightWidth().

Is it possible to add more than 2 widgets to a LayoutPanel like

layoutPanel.add(dataGrid1);
layoutPanel.add(dataGrid2);
layoutPanel.add(dataGrid3);
layoutPanel.add(dataGrid4);

and then set the width of each widget to be 25% of the width of the LayoutPanel?

Thanks and regards Mukul

Answer 1

Well I think you could do it with LayoutPanel too, but using the DockLayoutPanel is much easier! Here is the code for a the example you tried with a LayoutPanel.

public void onModuleLoad() {

    //define a DockLayoutPanel with a Percentage size definition
    DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PCT);        

    //add four widgets to the DockLayoutPanel, each with a Percentage
    //with of 25%
    dockLayoutPanel.addWest(new Label("widget 1"), 25);
    dockLayoutPanel.addWest(new Label("widget 2"), 25);
    dockLayoutPanel.addWest(new Label("widget 3"), 25);

    //the last widget must always be added with the .add method 
    //since it takes the rest of the screen
    dockLayoutPanel.add(new Label("widget 4"));

    //set a with to the DockLayoutPanel (elso you don't se much)
    dockLayoutPanel.setWidth("500px");
    dockLayoutPanel.setHeight("500px");

    //add it to the RootPanel
    RootPanel.get().add(dockLayoutPanel);       
}

So as long as you don't have a good reason why you must use LayoutPanel, I'd use the DocklayoutPanel!

Answer 2

What you have will work, all you need to do is to make each one setup like the following:

layoutPanel.add(dataGrid1);
layoutPanel.setWidgetLeftRight(dataGrid1, 0, Unit.PCT, 25, Unit.PCT);