Grid Usage: com.vaadin.ui.GridLayout$OutOfBoundsException

General
1

I am writing one of the first test apps in Vaadin, but I run immediately into some errors.

I created a simple grid to place the components I need but I get a strange error of
GridLayout$OutOfBoundsException

I checked the documentation for the Grids and I think I am having them created the right way, but still a problem.

public class MainView extends CustomComponent {
	@AutoGenerated
	private AbsoluteLayout mainLayout;
	@AutoGenerated
	private GridLayout mainGrid;
	@AutoGenerated
	private GridLayout gridFooter;
	@AutoGenerated
	private GridLayout gridCenter;
	@AutoGenerated
	private GridLayout gridHeader;
	/**
	 * The constructor should first build the main layout, set the
	 * composition root and then do any custom initialization.
	 *
	 * The constructor will not be automatically regenerated by the
	 * visual editor.
	 */
	public MainView() {
		buildMainLayout();
		setCompositionRoot(mainLayout);
		
		

		// TODO add user code here
	}

	@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		
		// top-level component properties
		setWidth("100.0%");
		setHeight("100.0%");
		
		// mainGrid
		mainGrid = buildMainGrid();
		mainLayout.addComponent(mainGrid,
				"top:1.0px;right:3.0px;bottom:1.0px;left:3.0px;");
		
		return mainLayout;
	}

	@AutoGenerated
	private GridLayout buildMainGrid() {
		// common part: create layout
		mainGrid = new GridLayout();
		mainGrid.setWidth("100.0%");
		mainGrid.setHeight("810px");
		mainGrid.setImmediate(false);
		mainGrid.setMargin(false);
		mainGrid.setRows(3);
		
		// gridHeader
		gridHeader = new GridLayout();
		gridHeader.setWidth("100.0%");
		gridHeader.setHeight("140px");
		gridHeader.setDescription("Grid Header");
		gridHeader.setImmediate(false);
		gridHeader.setMargin(false);
		mainGrid.addComponent(gridHeader, 0, 0);
		
		// gridCenter
		gridCenter = new GridLayout();
		gridCenter.setWidth("100.0%");
		gridCenter.setHeight("600px");
		gridCenter.setDescription("GridCenter");
		gridCenter.setImmediate(false);
		gridCenter.setMargin(false);
		mainGrid.addComponent(gridCenter, 1, 0);
		
		// gridFooter
		gridFooter = new GridLayout();
		gridFooter.setWidth("100.0%");
		gridFooter.setHeight("60px");
		gridFooter.setDescription("The Footer");
		gridFooter.setImmediate(false);
		gridFooter.setMargin(false);
		mainGrid.addComponent(gridFooter, 2, 0);
		
		return mainGrid;
	}

}

Anyone has an idea why I might be getting outofBound

2

Hi!

The problem is that you’re calling the GridLayout constructor without any parameters, causing the grid dimensions to be 1x1. Later you add a component to the coordinates 2, 0 for which no cell exists.

You should either specify the size of your GridLayout, e.g. new GridLayout(1,2) or use the plain GridLayout.addComponent(component) – i.e. the one without coordinates – which will just expand the grid automatically.

HTH,
/Jonatan

3

Hello Jonathan,
Thank you for the reply.

If I am not confused, I am adding the components on the main Grid
see line 62 (mainGrid.addComponent(gridHeader, 0, 0):wink: or line 71 mainGrid.addComponent(gridCenter, 1, 0);

As I see it, it is a problem with the behaviour of autosizing of grids

In the case of
Grid
main,
contains grid
header,
contains grid
content
 … there is an exception.
If I change to Grid
Main,
contains grid
header,
contains HorizontalLayout
content
 everything works fine

4

GridLayout’s design is such that if you specify coordinates where you want to add the component, GridLayout will throw an OutOfBoundsException if these coordinates do not exist. However, if you add a component without specifying coordinates, GridLayout will put the component the next empty cell and if there are no more empty cells, GridLayout will expand the grid to make the new component fit.

This all means that when you, on line 80 in your pasted code, add a component to (2, 0) for a 1-by-1 grid, you get the OutOfBoundsException.

Either do not specify the coordinates when adding to mainGrid, or specify a size that allows all components to fit as you wish.

I do not quite understand what you mean by “Grid main, contains grid header, contains grid content … there is an exception. If I change to Grid Main, contains grid header, contains HorizontalLayout content everything works fine”
Could you please elaborate a bit?

HTH,
/Jonatan

5

Thank you for the explanation.
What I meant above is that the exception is launched if there are 2 grids within one grid.