GridLayout grab remaining space problem

I’m pretty new to Vaadin, but having a good desktop application development background I find Vaadin a real joy to use.

Anyways, I have problem with getting GridLayout to do what I want.

I’m trying to create a design where I have a 3 X 3 grid where the last column and rows are expanding to the edge of the window. So far I managed to get the column to expand to the size of the window using setColumnExpandRatio. But I can get the same behavior using setRowExpandRatio. How do extend the row height of the last row to grab the remaining space in the window?

Any help great appreciated.

Thanks

Jan

And you have set the GridLayout to be 100% size both horizontally and vertically with setFullSize()? (And same for the possible containing layouts)

Yes I did call setSizeFull(). Actually I took some sample code to illustrate my problem. This code demonstrates my problem.

@Override
public void init() {

	Window mainWindow = new Window("Myvaadinproject Application");
	mainWindow.setSizeFull();
	mainWindow.addComponent(new GridLayoutBasicExample());
	setMainWindow(mainWindow);		
	setTheme("blue-chameleon");
}

public class GridLayoutBasicExample extends VerticalLayout {

public GridLayoutBasicExample() {

    final GridLayout grid = new GridLayout(3, 3);
    grid.setSpacing(true);
    grid.setSizeFull();
    grid.setRowExpandRatio(0, 0);
    grid.setRowExpandRatio(1, 0);
    grid.setRowExpandRatio(2, 1);

    grid.setColumnExpandRatio(1, 1);
    grid.setColumnExpandRatio(2, 1);
    grid.setColumnExpandRatio(3, 1);

    // The style allows us to visualize the cell borders in this example.
    grid.addStyleName("gridexample");

    // First we insert four components that occupy one cell each
    Button topleft = new Button("Top Left");
    grid.addComponent(topleft, 0, 0);
    grid.setComponentAlignment(topleft, Alignment.TOP_LEFT);

    Button topcenter = new Button("Top Center");
    grid.addComponent(topcenter, 1, 0);
    grid.setComponentAlignment(topcenter, Alignment.TOP_CENTER);

    Button bottomleft = new Button("Bottom Left");
    grid.addComponent(bottomleft, 0, 2);
    grid.setComponentAlignment(bottomleft, Alignment.BOTTOM_LEFT);

    Button bottomcenter = new Button("Bottom Center");
    grid.addComponent(bottomcenter, 1, 2);
    grid.setComponentAlignment(bottomcenter, Alignment.BOTTOM_CENTER);

    // Insert a component that occupies all the rightmost cells
    Button topright = new Button("Extra height");
    grid.addComponent(topright, 2, 0, 2, 2);
    grid.setComponentAlignment(topright, Alignment.MIDDLE_CENTER);

    // Insert a component that occupies two cells in horizontal direction
    Button middleleft = new Button("This is a wide cell in GridLayout");
    grid.addComponent(middleleft, 0, 1, 1, 1);
    grid.setComponentAlignment(middleleft, Alignment.MIDDLE_CENTER);

    // Add the layout to the containing layout.
    addComponent(grid);

    // Align the grid itself within its container layout.
    setComponentAlignment(grid, Alignment.MIDDLE_CENTER);
}

}

Thanks

Jan

You are not setting setSizeFull() for the root layout, only for the main window. Windows have a root layout to which the components are added. You need to do mainWindow().getContent().setSizeFull().

Also, you do not set the GridLayoutBasicExample to be full size, only the GridLayout inside it.

Actually, in your case you might consider doing mainWindow.setContent() instead of addComponent(), as then you wouldn’t have the unnecessary root layout (which is actually VerticalLayout by default).

You can use the “?debug” mode to analyze such layout issues (click “A” as for Analyze in the debug window).

Voila - that did it!

Thanks for your excellent support :slight_smile:

Jan

please help me i am new in vaadin…
i am trying to play with buttons and his position…can u tell me what does it mean “grid.addComponent(topright, 2, 0, 2, 2)” ???
and what is the meaning of number inside the bracket ?

Gridlayout has slots. It has rows and columns. calling grid.addComponent(component, 0, 2, 0, 2) means that it will add the component to the gridlayout into the slot which is at column 0, row 2. having different numbers between the two first numbers and the second two means that the component should take multiple slots in the gridlayout. Check the javadocs.

Thanks for the reply Jens,

ya its right grid has slots but in grid.addComponent(component, num1, num2,num3,num4) there is 4 numbers .

will u please elaborate about each numbers and which numbers give the what position in slots ???

i have understood why we are using first two number but still i m not getting about last two numbers.


As stated in the Javadocs:

Adds a component to the grid in the specified area. The area is defined by specifying the upper left corner (column1, row1) and the lower right corner (column2, row2) of the area. The coordinates are zero-based.

If the area overlaps with any of the existing components already present in the grid, the operation will fail and an GridLayout.OverlapsException is thrown.

Parameters:
component - the component to be added.
column1 - the column of the upper left corner of the area c is supposed to occupy. The leftmost column has index 0.
row1 - the row of the upper left corner of the area c is supposed to occupy. The topmost row has index 0.
column2 - the column of the lower right corner of the area c is supposed to occupy.
row2 - the row of the lower right corner of the area c is supposed to occupy.

Calling addComponent(component, 0, 2, 0, 2) is equivalent to calling addComponent(component, 0, 2).
Calling addComponent(component, 0, 2, 1, 3) means that the component will take the spaces of the cells in 0,2 ; 1,2 ; 0,3 ; 1,3, so four in total.

Thanks Jens…this is very important to me…i got the answer

Hi Friends,

I am new in vaadin,I am stuck in an issue.

When i will click a checkbox then i want all checkbox should be disable except which one i have clicked.
[/size]

Please help me
Thanks in advance,

add a ValueChangeListener on the checkbox. In that ValueChangeListener, if value is true, then call setEnabled(false) on all other checkboxes.


Quick side-note

Please only post questions once. I deleted the other copies of the this question from other threads.

To get maximum visibility for a new question, I would recommend to post as a new thread instead of continuing a somewhat related thread.