Frames with GridLayout go wrong

Hello,

I’m trying to build a kind of frames for a WebApplication and I tried it with GridLayouts. My expectation is, that the following code shows Panels in the following order:

OOOO
O11O
O34O
OOOO

O = OutOfPagePanels
1…4 = Panel1…4

The order is right, but the problem is, that the OutOfPagePanels stay the same size, even if the Panel in the mid is getting bigger or smaller! For that reason, there are Spaces between the panels, which I’d like to avoid…


import com.google.gwt.user.client.ui.Grid;
import com.vaadin.Application;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Layout;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Tree;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

public class CCTApplication extends Application {

	@Override
	public void init() {
		// TODO Auto-generated method stub
		Window mainWindow = new Window("CCT");
		setMainWindow(mainWindow);
		mainWindow.getContent().setSizeFull();

		GridLayout mainGrid = new GridLayout(3,3);
		mainWindow.addComponent(mainGrid);
		mainGrid.setSizeFull();
		mainGrid.setSpacing(false);

		Panel outOfPage1 = new Panel();
		Panel outOfPage2 = new Panel();
		Panel outOfPage3 = new Panel();
		Panel outOfPage4 = new Panel();
		outOfPage1.setWidth("400px");
		outOfPage1.setHeight("100%");
		outOfPage2.setSizeFull();
		outOfPage2.setWidth("400px");
		outOfPage2.setHeight("100%");
		outOfPage3.setSizeFull();
		outOfPage4.setSizeFull();
		mainGrid.addComponent(outOfPage1, 1, 0, 1, 0);
		mainGrid.addComponent(outOfPage2, 1, 2, 1, 2);
		mainGrid.addComponent(outOfPage3, 0, 0, 0, 2);
		mainGrid.addComponent(outOfPage4, 2, 0, 2, 2);
		
		GridLayout pageGrid = new GridLayout(2,2);
		
		pageGrid.setHeight("300px");
		pageGrid.setWidth("400px");
		pageGrid.setSpacing(false);
		pageGrid.setColumnExpandRatio(1, 0);
		pageGrid.setRowExpandRatio(1, 0);
		
		//mainGrid.setComponentAlignment(pageGrid, Alignment.MIDDLE_CENTER);
		
		mainGrid.addComponent(pageGrid, 1, 1, 1, 1);

		Panel panel1 = new Panel();
		Panel panel3 = new Panel();
		Panel panel4 = new Panel();
		panel1.setHeight("100px");
		panel1.setWidth("100%");
		panel3.setHeight("100%");
		panel3.setWidth("100px");
		panel4.setSizeFull();
		
		pageGrid.addComponent(panel1, 0, 0, 1, 0);
		pageGrid.addComponent(panel3, 0, 1, 0, 1);
		pageGrid.addComponent(panel4, 1, 1, 1, 1);
	}

}

Could you help me with this problem or tell me a better way to build something like Frames in vaadin?

Thanks
Willy m.F.

The best way to achieve a centralized component is to use a CSSLayout as a wrapper and position the single component inside with CSS (margin:auto should work). That would be a lot simpler and faster then trying to build it with expanding grids.