Help with vaadin app layout

General
1

Hello guys,

I’m assembling a layout (I’m not a web designer as you can see) in vaadin but couldn’t get exactly what I’m looking for, maybe some help?

Follow the screenshot of the layout that I’m tryin’ to create, using only vaadin layouts (not custom layout).

How can I assembly that?

Thanks in advance.
11368.png

2

In my opinion the best way to achieve it is to use GridLayout, 3 rows, 2 columns. Topmost component should span across two columns, leftmost across two rows.

Where would you like to have scrollbars? Which parts of the UI should expand their size, which should fit to browser window?

3

Thanks for the reply.

The brown area I want to use horizontal scroll but the size will be fixed (menu bar as tree).

The yellow area size is fixed.

The blue area size is fixed.

The green area I want to get the rest of the size, to fit to the user’s screen (screens will open in this area, using tabsheet).

I tried in different ways to accomplish that with no success, my problem is to define the fixed size for the blue area and set the green area to be expanded.

The blue area I want to put several components horizontally, like [x x x x]
so I think it should have a HorizontalLayout.

Thanks again.

4

Didn’t you mean vertical scroll for the brown area? Horizontal scrolls are quite annoying in such places.

Assuming that variables of components in layout are named: orange, brown, green and blue respectively. Blue extends HorizontalLayout, as you said.

GridLayout grid = new GridLayout(2, 3);
grid.setWidth("100%");
grid.setColumnExpandRatio(0, 1);
grid.setColumnExpandRatio(1, 4);
grid.addComponent(orange, 0, 0, 1, 0); // first row, span across two columns
grid.addComponent(brown, 0, 1, 0, 2); // first column, span across two rows
grid.addComponent(green, 1, 1);
grid.addComponent(blue, 1, 2);

Have a look at GridLayout’s javadoc for further explanation of the above method calls.

As for the colored components, all should have 100% width (except for green maybe), but their height should be undefined.

5

Hi Michal,

Thanks for the reply.

I’ve tried your code, it does almost the same that mine did, the problem is:

The bottom part (blue area) goes up whether the component inside the green area doesn’t fill it all.
Example:

If i have only one button on the green area so the top area goes right after it, and doesn’t stay at bottom as I want to.

The rest is perfect. Do you know how can I do that?

Thanks.

6

That would be hard, unless you want to have vertical scrollbar in green component only, not on the whole page layout. The whole rest of the page would be “fixed” then, with orange and blue components being always on the top/bottom of browser window - is this what you want?

7

Hi Michal,

Yes, that’s exactly what I want.

Thanks.

8

Working example:

Label orange = new Label("Orange - header");

Panel brown = new Panel();
brown.addStyleName(Reindeer.PANEL_LIGHT);
brown.setSizeFull();

Panel green = new Panel();
green.addStyleName(Reindeer.PANEL_LIGHT);
green.setSizeFull();

for (int i = 0; i < 20; i++) {
    brown.addComponent(new Label("Brown " + i));
    green.addComponent(new Label("Green " + i));
}

Label blue = new Label("Footer");

GridLayout grid = new GridLayout(2, 3);
grid.setSizeFull();
grid.setColumnExpandRatio(0, 1);
grid.setColumnExpandRatio(1, 4);
grid.setRowExpandRatio(0, 0);
grid.setRowExpandRatio(1, 1);
grid.setRowExpandRatio(2, 0);
grid.addComponent(orange, 0, 0, 1, 0); // first row, span across two columns
grid.addComponent(brown, 0, 1, 0, 2); // first column, span across two rows
grid.addComponent(green, 1, 1);
grid.addComponent(blue, 1, 2);

By using Panels with “light” style you provide wrappers for content, that will have scrollbars if their content is bigger than themselves.

You might also want to try:

grid.setColumnExpandRatio(0, 0);

but then the brown component should have its width undefined.

9

Thanks very much for your time and patience Michal.

Gonna try the code and let you know.
I think the layout components a little bit confusing for me, hard to get what I want but maybe 'cause I didnt study well.